[13팀 김보영] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[BoYoung00]

과제 체크포인트

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

1) Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다

2) 포스트 추가/좋아요 기능 구현

• 비사용자는 포스트 작성 폼이 보이지 않는다
• 비사용자는 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.
• 사용자는 포스트 작성 폼이 보인다.
• 사용자는 포스트를 추가할 수 있다.
• 사용자는 포스트에 좋아요를 클릭할 경우, 좋아요가 토글된다.

과제 셀프회고

• 이번 과제는 JavaScript로 React를 구현 해보는거구나. 요구 사항대로 하나씩 차근차근 만들어야겠다. 라고만 생각하고 일단 구현을 시작했습니다. 그런데 너무 어려웠습니다. DOM 구조나 이벤트 리스너의 구조를 잘 모를 뿐더러 어떻게 해야할지 감이 잘 안 잡혔습니다. 그래서 팀원분들과 학습 메이트분들께 도움을 받았고, AI에게 계속해서 질문하면서 구현을 했습니다. 온전히 제 힘으로 만들지는 않았지만, 그래도 VirtualDOM과 이벤트 관리에 대해서 이해할 수 있는 좋은 기회였습니다. 또 해결해야하는 문제가 무엇인지 제대로 이해하지 않고 구현을 하려다 보니 오류도 많았습니다. 때문에 문제 인식이 얼마나 중요한 것인지 다시 한 번 느낄 수 있었습니다.

기술적 성장

• 새로 학습한 개념 : React에서 이벤트를 어떻게 등록하고 있는지 깊게 이해할 수 있었습니다. (정규화 한다 -> 노드 생성 -> 이벤트 등록)
• 기존 지식의 재발견/심화 : .filter(Boolean)을 사용하면 falsy 값을 필터링 할 수 있다는 사실을 알았습니다.
• 구현 과정에서의 기술적 도전과 해결 : 초기에 구현된 코드에서 Observer 패턴이 사용되고 있었는데, 이 패턴에 대해 알고는 있었지만 실제로 사용해본 적은 없었습니다. 처음에는 생각대로 적용이 잘 되지 않아 여러 번 시도했고, 그 과정을 통해 Observer 패턴을 더 깊이 이해하게 되었습니다.

코드 품질

• 특히 만족스러운 구현 : 학습 메이트 분께 도움을 받아 updateAttributes를 어떻게 구현해야 하는지 정확히 이해하고 구현했습니다. 그래서 좀 더 이해가 잘 되는 구간이라 만족스럽습니다.
• 리팩토링이 필요한 부분 : post 기능 구현하는 로직들에서 globalStore.getState()가 너무 자주 선언되고 있는데, 이를 줄이고 싶습니다.

학습 효과 분석

• 가장 큰 배움이 있었던 부분 : JavaScript 동작 과정을 깊게 이해할 수 있었습니다.
• 추가 학습이 필요한 영역 : JavaScript 문법과 deep dive에 대한 이해와 공부가 정말 많이 필요한 것 같습니다.. 아직 정말 많이 부족한 것 같습니다
• 실무 적용 가능성 : Observer 패턴에 대해 이해하였으므로 실무에 적용 시켜볼 수 있을 것 같습니다.

과제 피드백

• 저한테는 난이도가 상당히 높았지만 그렇기에 더욱 효과적으로 공부할 수 있었던 것 같습니다

리뷰 받고 싶은 내용

• 구현 되어 있던 Observer 패턴을 토대로 기능을 구현해봤는데, 제가 사용한 방식이 적절한지, 개선해야 할 점이 있는지 궁금합니다.

[dosilv]

저는 vNode.toString()으로 구현했는데 보영님 코드를 보고 String(vNode)는 어떻게 다르지?! 하고 찾아보니 String()으로 사용했을 때는 인자로 null과 undefined까지 받을 수 있어서 더 활용성이 좋군요..! 배워갑니당ㅎㅎ

[BoYoung00]

앗 딱히 의도한 건 아닌데 그런 차이점이 있었군요....!😂 감사합니다!!