활동내용

: IT 아티클을 읽고 자신의 느낀 점을 게시물로 업로드할 수 있는 서비스

• 사용자 인터페이스를 구축하는 나만의 JavaScript 패키지 구현
  • diffing 알고리즘을 이용한 렌더링 구현
  • Observer Pattern을 이용한 전역 상태관리 구현
  • component 클래스 구현
  • router를 통한 spa 구현
  • event delegation 처리
• firebase를 통한 데이터 및 이미지 저장
• intersection observer를 통한 무한 스크롤 구현

활동하게 된 동기

: React를 사용해 여러 프로젝트를 진행하면서 라이브러리의 동작 원리를 잘 이해하고 있는지,자바스크립트를 완벽히 이해했는지에 대한 의문이 들었고 직접 내가 구현해보면서 공부를 해야겠다는 생각을 하여 프로젝트를 진행하게 되었습니다.

기여도

개인 프로젝트이므로 기여도는 따로 표시하지 않았습니다.

배운점

문제

JS의 append child 메서드와 remove 메서드를 이용해 루트 컴포넌트와 자식 컴포넌트를 묶어서 새로운 컴포넌트와 교체해주는 형식으로 화면 이동(dom 업데이트)을 구현하였습니다.

예시 그림

예를 들어 A 컴포넌트에서 D 컴포넌트로 교체가 필요하다면, A 컴포넌트인 자식 컴포넌트 B, C까지 한 번에 모아 D 컴포넌트로 교체했습니다.

 if (newNode.nodeName !== oldNode.nodeName) {
    const index = [...parent.childNodes].indexOf(oldNode);
    oldNode.remove(); // A 컴포넌트 remove ( 자식 컴포넌트까지 한 번에 remove)
    parent.appendChild(newNode, index);
    return;
  }

저는 remove 메서드를 통해 컴포넌트가 제거되면, 컴포넌트에 부착된 이벤트 리스너까지 메모리에서 제거될 것을 예상하여 따로 이벤트 리스너에 대한 관리를 하지 않았습니다.

A,B,C 컴포넌트가 remove 되었으니 해당 컴포넌트에 부착된 이벤트 리스너도 당연히 제거될 줄 알았습니다.