프론트엔드 격변기 회고: 2021년부터 현재까지

2021년부터 프론트엔드 개발자로서 커리어를 쌓아왔다. 당시 프론트엔드 생태계는 엄청나게 빠른 트렌드 변화의 중심에 있었다.
2021년 당시 표준 보일러플레이트는 React + Webpack + Babel 기반의 CRA(Create React App)였으며, JavaScript가 주류였다.
상태 관리는 MobX도 있었지만, Redux 가 시장을 지배하던 시절이었다.

그러다 조금이라도 커스텀 설정이 필요하면 CRA를 eject해야 했는데, 직접 Webpack을 관리하는 것은 매우 까다로운 작업이었다. 앱이 복잡해질수록 안정성 문제가 대두되었고, 정적 분석의 필요성에 대한 논의가 활발해지면서 React에서도 본격적으로 TypeScript를 지원하기 시작했다.
한편, 모듈 표준 문제로 진통을 겪던 JS 진영은 CommonJS에서 ESM으로 넘어가는 과도기에 있었다.

이후 Rollup, Parcel 등 '설정 없는(Zero-config)' 컨셉의 번들러들이 등장했다. 하지만 현대 앱의 번들 사이즈가 커지면서 번들러와 트랜스파일러의 '성능' 자체가 중요해졌고, Go, Rust와 같은 언어로 툴체인을 포팅하는 현상이 일어났다. 이 과정에서 esbuild, swc가 등장했고 이는 곧 vite와 turbopack의 탄생으로 이어졌다.
상태 관리 툴 또한 지향점에 따라 분화되었다. Top-down, Bottom-up, 서버 캐싱, 상태 머신 등 각자의 철학에 따라 zustand, jotai, RTK(Redux Toolkit),Tanstack Query(React Query), SWR, Apollo Client (Graphql), Relay (Graphql), XState 등이 쏟아져 나왔다.
프론트엔드의 이 높은 자유도는 개발자에게 끊임없는 '선택'의 숙제를 던졌고, 때로는 이러한 선택지가 개발 피로도를 높이는 요인이 되기도 했다.
그러던 중 '제로 설정'을 표방하며 SSR, SSG, ISR 등 다양한 렌더링 전략을 지원하는 Next.js가 부상했다.
사실 11 버전 당시에는 도입을 망설이기도 했으나, SEO가 중요한 신사업에서 개념 실증(PoC)을 진행하며 뛰어난 DX(개발자 경험)를 체감했다. 대부분의 복잡한 문제를 프레임워크 자체 기능으로 손쉽게 해결할 수 있었다.
다만, 최적화된 배포를 위해 Vercel 인프라에 의존해야 한다는 점이 불확실성으로 다가왔고, 당시로서는 비용 측면에서도 부적합하다는 결론을 내리기도 했다. 하지만 React 팀과 Vercel의 긴밀한 협업과 방향성을 보며 Next.js가 사실상의 표준이 될 것임을 직감할 수 있었다.
이후 Next.js 12부터 15에 이르기까지 RSC(Server Components), Server Actions, PPR 같은 혁신적인 개념들이 등장했다. 추가적으로 프로젝트를 진행하면서 겪어보면 좋을 것 같다.
한편, Next.js의 독주 속에서도 특정 플랫폼에 종속되지 않는 환경을 지향하는 Vite의 행보 또한 훌륭했다. 복잡한 설정을 플러그인 기반으로 해결하는 Vite는 CSR 프로젝트에서 충분히 매력적이었기에, 나 역시 많은 프로젝트를 Vite로 진행해 왔다.
현재의 Vite는 프레임워크와 상관없이 빌드, 테스트, 린팅 등을 통합하는 거대한 생태계(Vite+)를 꿈꾸고 있는 듯하다.
회고해 보니 테스트 툴, 린팅, 스타일링, 스토리북 등 미처 다 적지 못한 이야기들이 너무나도 많다. 프론트엔드 엔지니어가 신경써야 할 것들이 많다는 의미도 있다고 본다. 지난 시간 동안 이 빠른 변화 속에서 기술들이 왜 등장했고, 어떤 문제를 해결하려 했는지 직접 관찰하고 겪어온 과정들이 지금의 나를 만든 자산이 되었다.
사실 회사 근무 중에 확인하는 것들이 많다보니, 회사 문서 등으로만 과정들이 남아 블로그에 깊이 있는 기록을 남기지 못한 아쉬움이 크지만, 앞으로는 실증의 과정과 인사이트를 더 적극적으로 기록하며 성장해 나가려 한다.