[Frontend Essential Study] 0. 시작

Nextjs로 웹페이지를 개발하며 문득 그런 생각이 들었다.

그래서 이걸 왜 쓰는 거지?

React, Next 등등.. 어떤 라이브러리/프레임워크를 “쓰는 법”에 대한 자료는 정말 많고 퀄리티도 좋아서, 단순한 기능 구현은 그냥 하면 된다. 더욱이 ChatGPT가 있는 요즘은 일도 아니다. 그런데 내가 이 “쓰는 법”에만 매몰되어 “쓰는 이유”를 전혀 생각하지 않고 있었음을 깨달았다.

찾아보니 React는 SPA 구현과 상태 관리가 쉽고, Nextjs는 React를 이용한 SSR 구현이 쉬운 Full-stack framework라서 쓴다는 얘기가 많다. 물론 기술적 측면만 얘기한 것이고, 현업에서의 이유로는 넓은 개발 생태계나 기타 비즈니스적인 이유도 있을 것이다.
그런데, SPA, 상태 관리, SSR은 어떻게 구현되며 왜 필요한가? 나는 이들의 이점을 정확히 이해하고 인지하며 쓰고 있는가? 아닌 것 같다. 기본을 모른 채 그저 대충 어떻게 구현하면 되는지만 찾아다가 쓰고 있는 것 같다.

그래서 프론트엔드 개발을 기본부터 공부해보기로 했다.

이 공부의 목적은, 코드에 대해 내린 의사결정의 “이유”를 답할 수 있는 능력을 갖추는 것이다. 왜 이 라이브러리/프레임워크를 선택해서 개발했는지, 왜 특정 기능을 이러한 방식으로 구현했는지, SSR을 이용한 이유가 뭔지 등등. 지금 당장 생각나는 주제들은 다음과 같다. 주로 밑바닥부터 구현하기, 라이브러리/프레임워크의 철학과 장단점 이해 등이 주를 이룰 것 같다.

• html + css + Vanilla js로 SPA, 상태 관리, component 등 React의 주요 기능 구현
• 웹브라우저의 주요 원리/구성 요소 이해(History Stack/API, Routing, Rendering)
• 프론트엔드 개발의 역사
• Reactjs의 탄생 철학, 장단점 이해 (Vue.js, Angular와 비교)
• Nextjs의 탄생 철학, 장단점 이해
• 현재 프로젝트에서 구현한 기능들을 밑바닥부터 다시 짜보기 (modal 등)

단순히 코드를 많이 짜고 익숙해지는 것도 좋지만, 이런 것들을 알지 못한 채 작성하는 코드는 모래성 쌓기라는 생각이 들었다.

허울뿐인 개발자가 되고 싶지 않다. 더욱이 컴퓨터공학을 전공까지 한 입장에서, 이유도 모른 채 기능 구현에 급급한 개발자가 되고 싶지 않다. 나중에 프론트로 먹고 살지 않게 된다고 해도, 지금처럼 계속 개발하면 후회만 남길 것 같다. 마음 먹은 김에 제대로 파보자!