💡 어떻게 이 아이디어가 나왔는가

프리코스 동안 자바스크립트로 여러 기능을 구현하였는데, 실제로 프론트엔드 개발자가 최종적으로 구현하는 것은 브라우저 화면이다.

하지만 코드를 작성할 때 기능이 잘 동작하는지만 신경을 썼고, 그 코드가 브라우저 내부에서 어떻게 렌더링되고, 성능에 어떤 영향을 주는지는 깊이 생각하지 않았다. 예를 들어 왜 React는 Virtual DOM을 사용하는가라는 질문에 명확히 대답할 수 없었다.

따라서 내가 짠 코드가 화면에서 실제로 어떤 과정을 거쳐 그려질까라는 궁금증이 생겼고, 현재 실무에서 UX만큼 중요한 요소가 최적화라고 생각을 하기 때문에 최적화에 대해 깊이 공부를 해보고, 직접 실험해보자는 아이디어로 해당 주제를 선택하였다.

🎯 이번 미션을 통해 얻고 싶은 것

자바스크립트 로직이 단순이 계산을 수행하는 수준을 넘어서, 브라우저와의 상호작용 구조를 이해하고 싶다. 특히 documentFragment, requestAnimationFrame과 같은 기술이 왜 성능 최적화에 효과적인지를 직접 눈으로 확인하며 체감하는 것이 목표다. 또한, 이러한 과정에서 React의 Virtual DOM처럼 현대 프론트엔드 프레임워크가 성능을 개선하는 원리를 바닐라 JS 수준에서 이해하고 싶다.

🧠 나에게 이 미션이 가지는 의미

이 프로젝트는 단순히 코드를 더 잘 짜기 위한 게 아니라, 코드가 브라우저에서 어떻게 살아 움직이는지를 이해하는 과정이다. 그동안은 결과물이 잘 나오면 만족했지만, 이제는 그 결과가 나오기까지의 과정을 탐구할 것이다. 즉, 이번 미션은 내가 브라우저를 이해하고 제어할 줄 아는 개발자로 성장하기 위한 첫걸음이다.