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

[lshyun955]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

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

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

과제 셀프회고

기술적 성장

jsx로 작성하는 코드가 어떻게 변환처리를 거쳐서 화면에 렌더링 되는지 알게되었습니다.
그리고 심화과제를 진행하면서 diff알고리즘을 이용하여 변경 요소만 리렌더링이 이뤄지는지 얕게나마 알게되었고,
React에서 key요소가 있으면 가상DOM과 DOM간의 비교가 더 빠르기 때문에 key 미입력 시 경고를 띄워주는 것을 알게 되었습니다.

코드 품질

속성 업데이트 함수가 다른 파일에서 각각 선언되어 있는데 목적이 비슷한 것으로 보여 공통함수로 분리하는 리팩토링이 필요할 것으로 보입니다.. 뿐만 아니라 테스트를 통과하기 위한 코드를 작성한 느낌이 강하게 들어서 코드 품질에 대한 부분은 많이 아쉬웠습니다.

학습 효과 분석

1주차 과제 후 2주차 과제를 진행하면서 우선 학습자료를 통해 기본과제까지 구현한게 스스로 뿌듯했구요..
심화과제는 Diff 알고리즘 구현에 있어서 대략적으로 BFS같은 탐색 알고리즘을 사용해야겠다? 라고 생각했는데,
기존 돔요소와 신규 돔요소 비교 등 돔 조작에 있어서 아직 제가 익숙하지 않아서 어려움을 느끼고있는 저를 발견했습니다..

Web API, DOM, Event에 대한 학습이 더 필요하다고 느끼는 과제였습니다..

과제 피드백

리뷰 받고 싶은 내용

Web API, DOM, Event에 대한 개념을 딥다이브 하고싶어서 MDN문서를 읽어보고 있는데 MDN문서를 정독하는게 베스트일까요?
멘토님이 추천해주실 MDN에 곁들여서 학습할만한 개발서적이나 문서가 있는지 궁금합니다!

[Songchangyeop]

약어는 풀어써주셔도 좋을 것 같습니다 ! 🙂

btn -> button

[gmkim716]

정석적으로 문서를 읽고 이해하신대로 과제를 수행하시는 모습이 부러우면서도 과제 수행에 급급했던 스스로를 되돌아보게 되네요 ㅎㅎ 네트워크에 대한 기본 이해가 바탕이 되어야 하겠다는 생각을 저도 같이 해봅니다! 다음주에는 중간중간 질문 드리면서 제가 이해한 개념과 수현님이 이해한 개념에 대해서 서로 조정해가나는 것을 목표로 해보겠습니다

[Songchangyeop]

submit이후에 textarea 내부를 비워주는군요!
저는 테스트 통과에 급급해서 신경도 못 썼는데 ..ㅜ
디테일 👏👏

[Suyeon-B]

저도 이 부분이 신경쓰여서 찾아보다가, 요런 게 있다는 걸 알게 되었습니다! 🤓

  const handlePostSubmit = (e) => {
    e.preventDefault();
    const textarea = document.getElementById("post-content");
    const content = textarea.value.trim();

    if (!content) {
      alert("내용을 입력해주세요");
      return;
    }
    requestPost(content);
    e.target.reset(); // 👈 요기요!!
  };

[wonyoung2257]

이번주도 과제하신다고 고생많으셨습니다~!

[wonyoung2257]

조금 더 action 스러운 이름으로 수정되면 어떨까요? ㅎㅎ
updateLike 같은 거로 말이죠

[wonyoung2257]

오 createVNode 코드가 매우 깔끔하네요

[Songchangyeop]

lodash를 설치하셔서 사용하셨네요! 혹시 어떤 이유에서 설치하셨는지 알 수 있을까요??

아 그리고 이 프로젝트에선 문제가 안 되는데 추후 lodash를 사용할 경우 lodash 자체가 너무 무거워 번들사이즈가 커지기 때문에 트리쉐이킹을 해주는 것이 좋습니다! :) 👍

[Suyeon-B]

백엔드 개발자이시면서 이렇게 잘 하시다니...... 대단합니다..
null처리를 습관적으로 잘 하시는 것 같아요!!
이번 한 주도 고생 많으셨습니다!!! 👏

[Suyeon-B]

id 값이 없는 경우가 있을까요?!

2중으로 안전한 처리 vs. 필요한 코드만 남기기

수현님의 의견이 궁금합니다 🤓

[Suyeon-B]

저도 이 부분이 신경쓰여서 찾아보다가, 요런 게 있다는 걸 알게 되었습니다! 🤓

  const handlePostSubmit = (e) => {
    e.preventDefault();
    const textarea = document.getElementById("post-content");
    const content = textarea.value.trim();

    if (!content) {
      alert("내용을 입력해주세요");
      return;
    }
    requestPost(content);
    e.target.reset(); // 👈 요기요!!
  };