원티드 챌린지에서 과제로 내준 리액트로 라우터 구현하기를 오늘도 진행했다. 일단 오늘도 동작은 하게 만들어놨다. 어제와 다른 점은 context로 경로를 전역에서 관리하고, 컴포넌트를 관심사에 맞게? 분리했다. a태그는 Link컴포넌트로 전역에서 경로를 관리하게 해주는 Router 컴포넌트, 그리고 Routes 컴포넌트로 조건에 맞는 라우트 컴포넌트를 담아서 SPA로 동작하는 라우터를 구현했다. 하지만 원티드에서 요구하는 사항 중에 한 가지를 해결하지 못했다. 이 부분은 내일 다시 해결해보겠다.
오늘은 Virtual DOM에 대해 설명해주세요. 라는 질문에 대해 정리해 보았다. 사용자 경험을 위해서 사이트가 점점 인터렉티브 해짐에 따라 웹사이트의 성능을 생각하지 않을 수 없었고, 렌더링이 자주 일어나지 않게 해서 성능을 최적화 할 수 있는 방법을 고민하던 결과물 중에 하나로 리액트의 VirtualDOM이 있다. 변경사항이 발생했을 때마다 리렌더링을 일어나게 하지 않고 변경사항을 한 번에 모아서 처리하는 batching으로 VirtualDOM의 변경사항을 실제 DOM에 적용해서 렌더링이 너무 자주 일어나지 않도록 하여 효율적으로 관리한다.
이렇게 VirtualDOM에 대해 공부하면서 궁금해지는 꼬리 질문에 대해서도 추가로 알아보았다.
원티드 챌린지 내용 중에 ESLint, Prettier, Husky, useEffect, Context, AWS, 클라우드 서버, CI/CD, GitHub Actions에 대해 복습했다. 이전에 강의를 한 번 들었었는데, 오늘 노션에 강의 자료를 가지고 복습하면서 간추려서 정리해봤다. 크게 어려운 부분은 없었다. 하지만 깊게 이해했다고 생각하지는 않는다. 그래도 괜찮다. 어차피 한 번에 이해하는 것보다 조금 이해하고 나중에 그 개념이 프로젝트에서 나왔을때 또 다시 한 번 찾아보고 새롭게 알게된 내용은 더 알아보는 방식으로 공부해나가면 된다.