[15팀 김재환] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[kJshine]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

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

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

과제 셀프회고

이번 과제를 통해서 가상돔에 대한 개념을 배울 수 있었고, 이벤트 위임과 Diff 알고리즘에 대해서 학습할 수 있게 되었습니다.
아직 개념에 대해 완전히 이해할 수 있는 상태는 아니여서 복습과 심화학습이 필요할 것 같습니다.
이번 과제를 처음부터 복기하면서 다시 확인이 필요할 것 같습니다.

기술적 성장

• 새로 학습한 개념
  1. 재귀함수가 무엇인지, 어떻게 동작하는지 알 수 있었습니다.

코드 품질

학습 효과 분석

• 학습을 진행하면서 알고리즘 해결 문제와 JavaScript에 대한 이해도가 많이 취약하다는 것을 알게되었습니다.
• 알고리즘 구현에 있어 필요한 메소드가 무엇이 있는지에 대한 학습이 필요하다는 것을 알게되었습니다.

과제 피드백

• 재귀 함수나 알고리즘 사고가 필요한 부분에서 많은 어려움을 겪었습니다.
• 가상돔과 Diff 알고리즘 부분은 코드는 작성했지만, 개념적인 이해가 부족한 상태입니다.

리뷰 받고 싶은 내용

1. JavaScript의 기본기를 강화하고 싶은데 어떻게 하면 좋을까요?

• 과제를 진행하면서 JavaScript의 기본 메소드나 문법에 대한 이해가 부족하다고 느꼈습니다.
• JavaScript의 어떤 영역을 중점적으로 공부해야 이번 과제를 수월하게 진행하는데에 도움이 되는지 궁금합니다.

2. 알고리즘 사고에 대한 학습방법이 궁금합니다.

• 재귀 함수가 무엇인지 이번 과제에서 어떻게 동작했는지에 대해서는 간신히 이해는 하였지만 다음에도 사용할 수 있을것 같지는 않습니다..
• 이런 알고리즘 사고를 향상시킬 수 있는 추천하는 방법이 있을까요?

[9yurilee]

안녕하세요 재환님! 요 부분 삼항연산자를 이용한 구현이나, boolean 반환이면 조건문만 작성하는 방법도 괜찮겠다는 의견을 남기고 갑니다~!👍🏻