[15팀 차현빈] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[chb6734]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

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

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

과제 셀프회고

저번주는 시작부터 끝까지 모든 것이 도전이었고 이번주도 마찬가지였지만 자바스크립트에 대해서 저번주에 비해 조금(아주조금이지만) 더 이해하고 코드를 짤 수 있었던 것 같습니다.
특히 스스로 뿌듯했던 점은 저번주랑 비교를 했을 때, JS를 잘 몰라서 과제를 하면서 방향을 잡기도 어려워서 시작도 못해서 스탭마다 시작과 동시에 다른 팀원들의 코드를 보고 시작하고는 했었는데 이번 과제는 발제 내용들을 참고하고, virtual DOM에 대해서 생각해가면서 하나하나씩 풀어보니 스스로 다른사람들의 코드를 보지 않고도 방향을 잡을 수 있었습니다.(시간은 여전히 많이 들었지만...!)

기술적 성장

리엑트를 사용하면서 한번도 virtual DOM에 대해서 생각해본 적이 없었는데 Virtual DOM에 대해서 공부하고 동작 원리를 구현해가면서 리엑트의 동작 원리가 조금 더 이해가 되었고, 특히 Virtual Dom을 쓰기 때문에 빨라지는 것이 아니라는 말씀이 완전히 이해가 되었습니다.
테스트 코드 중 DocumentFragment에 왜 굳이 넣으라고 했을까 의문이 들어서 존재이유와 활용에 대해서 생각을 해볼 수 있었는데 직접 element에 붙어서 그 때 마다 랜더를 해주는 것보다 fragment에 넣고 한번에 하는 것이 비용적인 측면에서 유리하다는 것을 알게 되었습니다.

코드 품질

아직 코드 품질에 대해서 고민할 수 정도로 JS를 이해하고 있지는 않은 것 같습니다.

학습 효과 분석

Virtual DOM을 이해 할 수 있었습니다.

과제 피드백

테스트 코드가 가이드가 너무 잘 되어주었습니다!

리뷰 받고 싶은 내용

• 테스트 코드 중 DocumentFragment에 왜 굳이 넣으라고 했을까 의문이 들어서 존재이유와 활용에 대해서 생각을 해볼 수 있었는데 직접 element에 붙어서 그 때 마다 랜더링를 해주는 것보다 fragment에 넣고 한번에 하는 것이 비용적인 측면에서 유리하다는 것을 알게 되었는데 이게 맞는지 그리고 그 외에 다른 이점이 있는지 궁금합니다!