[3팀 주민수] Chapter2-2. 나만의 React 만들기

[Thomas97-J]

과제 체크포인트

배포 링크

https://thomas97-j.github.io/front_7th_chapter2-2/

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

과제 셀프회고

이번 과제는 시작하는 순간부터 어떻게 해야 스트레스를 줄이며 과제를 할 수 있을까를 고민했다. 항해 시작 후 첫주, 둘째주 까지는 회사 업무가 워낙 바빴으므로 스스로가 좀 피곤하고 예민해도 뭐 바쁘니까 그런가보다 하고 대수롭지 않게 생각했는데, 이후 바쁜 고비를 넘겼음에도 불구하고 모니터 앞에서 멍 때리는 시간이 늘어나고, 기획이 엎어지거나 좀 무리한 일정이 제시되면 내 생각보다 더 부정적인 반응을 하는 나의 모습을 보며 어떤 과제를 끝내지 못했다는 데서 오는 불안함과 하루 여섯시간 밑으로 떨어진 수면시간에서 오는 피로가 나의 업무에 지장을 주는 것이 아닌가? 하는 생각을 하게 되었다. 그렇다고 항해를 멈출 수는 없는 노릇이니, 방법을 찾아야 했다.

그래서 그간의 과제 패턴을 떠올려보았다. 나는 항상 화요일까지는 최대한 내 힘으로 코드를 작성해오다가, 수요일즈음이 되면 까마득한 데드라인에 AI를 우다다 쓰고는 했다. 때문에 목요일 밤에는 항상 새벽까지 과제를 해야 했고, 금요일 오전 업무의 질은 자연스레 떨어졌다. 그래서 이번에는 처음부터 AI의 도움을 적극적으로 받아보기로 했다. 과제 진도를 우선 나가면, 남아있는 과제에 대한 스트레스가 덜할 것이고. 내 패턴에 맞게 과제를 할 수 있을것이라는 계산이었다.

이번 과제는 AI를 사용해서 테스트 코드의 상당부분을 통과시키고, 이후 작성된 코드를 수정하고 리팩토링하며 천천히 이해하는 방향으로 진행했다. Easy 난이도를 고른 것과 더불어 이런 방식이 확실히 과제에 대한 스트레스를 더는데 도움이 되었다. 화요일에 회사 업무로 인해 과제를 거의 진행하지 못한 것을 포함해도, 수요일 밤에는 배포까지 마무리 할 수 있었다. 페이스 조절에 있어서 어떤 방법을 찾은 기분이었다.

아하! 모먼트 (A-ha! Moment)

코드를 뜯어보며 동작 원리를 확인하던 중, createVNode가 어떻게 명시적으로 사용되지 않으면서 jsx를 노드로 변환시킬까? 하는 궁금증에 동작 원리를 찾아보았다. 그러면서 문득 이전 리액트 16 이전에서 jsx 파일에서는 꼭 react를 Import 해야 했던 것이 떠올랐다. 혹시 createVNode가 사용되는 방식처럼 리액트 내부에서 jsx를 node로 변환하기 위해 리액트가 import 되어야 했던 걸까? 하는 생각에 관련된 내용을 찾아보니 React.createElement를 사용해서 jsx를 변환하기 위해서라는것을 알 수 있었다. 그 외에도 dom 조작을 줄이기 위한 여러 방법들에 대해 막연하게만 그렇게 진행되지 않을까? 했던 부분들, createDocumentFragment의 활용이나 diff의 과정, 어째서 false는 html에 남지 않는지 등등에 대한 궁금증을 해소할 수 있었다.

기술적 성장

리액트에 대한 이해가 깊어지는게 느껴진다. 오늘 회사에서 있었던 일인데, 백엔드에 정렬 상태를 전달하고 2중 배열로 된 값을 내려받아 평탄화 해 출력하는 컴포넌트가 있었다. 여기서 최신순 -> 오래된 순으로 변경 시에는 순서가 변경되는데, 오래된 순 -> 최신순으로 변경할 때는 값이 재정렬 되지 않는다는 이슈가 있어 확인해보았는데, 백엔드에서는 정렬에 따라 올바른 순서로 값을 전달해 주고 있었다. 프론트에서는 별도의 정렬이 들어가지 않은 상황이었는데, 오래된 순 -> 최신 순에 대해 특정 데이터는 정렬이 반영되는데, 또 특정 데이터에서는 정렬 이슈가 발생하고 있었다. 해당 이슈를 보자마자 뭔가 map을 통해 랜더링되는 자식 컴포넌트의 key에 문제가 있어서 발생한 이슈가 아닐까? 싶어 돌아오는 값들을 확인해 보았다. 역시 key로 사용하는 특정 값이 null로 들어올 때가 있어, 이 경우 해당 문제가 발생한다고 추측할 수 있었다. 키를 교체한 뒤 해당 이슈는 바로 해결되었다.
아마 요즘 리액트를 많이 뜯어본 것이 바로 문제의 원인을 추측하는데 도움이 되지 않았을까? 생각한다.

코드 품질

대부분의 코드를 AI로 작성해서 품질에 대해서는 크게 할 이야기가 없다,

학습 효과 분석

기술적 성장에 기록한 내용이 해당 학습 내용들의 효과라고 생각한다,

과제 피드백

easy와 hard의 과제 양 차이가 심하게 느껴져 hard는 도전할 엄두도 내지 못했습니다. 다만 easy 난이도의 과제량이 퇴근 후 진행하는 상황에서는 적절하다는 생각이 들었습니다.