[항해 플러스 프론트엔드 3기] 2주차 WIL

Q1. 과제

  이번주 과제는 Virtual DOM을 직접 구현해보는 것이었습니다. 전체적인 구조는 잡혀 있는 상태로 미션이 주어졌고 내부 구조를 구현하는 방식이었습니다. 처음에는 이번주에 휴일도 이틀이나 있으니 여유로운 마음으로 시작했는데 AI의 도움이 없었더라면 완성하지 못했을 것 같다는 생각이 들 정도로 구현해야 하는 양도 많고 생각할 거리들이 많았던 것 같습니다.

Q2. 시도

  Virtual DOM을 직접 구현해 볼 거라고는 생각해본 적도 없었기에 처음에는 감조차 잡히지 않았습니다. 요구 사항에 따라 하나씩 구현을 해 나가다 보니 점점 모습이 갖춰지는 게 재미있었던 것 같습니다.ㅎㅎ 특히 DOM Element를 vNode로 만들어서 비교하고 변경점들을 다시 DOM Element에 주입하는 작업이 어려웠던 것 같고 완벽하게 했다고 볼 수는 없겠지만 TC를 다 통과할 정도로는 구현에 성공해서 뿌듯했습니다.

Q3. 문제점

  이번 주차는 문제점이라기 보다는 DOM Element가 갖고 있는 여러 가지 API들을 활용해보면서 새롭게 알게 된 것들이 많은 것 같고 이번 과제를 구현하면서 사용해본 API들을 정리하는 정도로 마무리하면 좋을 것 같습니다.

Q4. 해결

[ property ]
childNodes : 자식 노드를 조회, index로 단일 요소에 접근 가능
className.propName : 클래스 속성 조회
classList : 리스트 형태로 클래스 조회
style.propName : 스타일 속성 조회

[ method ]
hasChildNodes() : 자식 노드가 있는 지 체크
appendChild(childElement) : 자식 노드를 추가
removeChild(childElement) : 자식 노드를 삭제
replaceChild(afterChangedElement, targetElement) : 자식 노드를 교체
removeAttribute(propName) : element의 속성을 제거
addEventListener(eventType, handlerFunction) : 이벤트 리스너 등록
removeEventListener(eventType, handlerFunction) : 이벤트 리스너 삭제
  * 이벤트 리스너는 property로 접근할 수 없다. eventMap을 만들어서 관리 하도록 구현
createDocumentFragment() : fragment를 생성
createTextNode() : 텍스트 노드를 생성
createElement() : DOM Element를 생성
setAttribute(key, value) : 속성을 추가

Q5. 2주차 느낀 점

  휴일이 이틀이나 있었는데도 쉽지 않았습니다.ㅎㅎ ㅠㅠ... virtual DOM 관련해서 면접 때 답변하지 못했던 기억이 있는데 이 정도면 면접 전에 한 번만 복습해도 잘 설명할 수 있겠다 싶을 정도로 virtual DOM에 대해서 자세하게 공부해볼 수 있었습니다. 백문이 불여일견 이라고 설명만으로는 이해할 수 없는 부분들이 많은데 이번 과제를 통해 virtual DOM을 체득할 수 있었던 것 같습니다.