이전 프로젝트는 순수 React 기반 앱이였는데 이번 프로젝트에서는 팀원과 만장일치로 Next.js를 선택했다. 이유는 다음과 같다.
빠른 FCP 및 CSR방식 대비 SEO에 이점Dynamic Routing / Catch-all Routes빠른 swc 컴파일러자동 최적화(Image,code split…)Next.js로 개발하면서 느낀점은 순수 React보다 개발자 친화적인 프레임워크라는 생각이 들었다. React에서 Routing을 하려면 Routes로 감싼 Route에 경로를 일일이 적어줘야 했는데, Next.js에서는 pages 폴더아래 생성한 파일의 이름으로 자동으로 Routing이 된다던지, Next Image의 이미지 자동 최적화 같은 개발자가 좀 더 편하게 개발할 수 있는 환경을 조성해준다는 느낌을 받았다.
TypeScript. 이제는 TypeScript의 컴파일 전 타입 검증과 코드 가이드를 포기할 수 없기 때문에 당연히 채택했고, 긴 Boilerplate code의 Redux 대신 손쉽게 전역 상태관리를 위한 Recoil을 사용했다. 또, 서버와 클라이언트와 분리해서 서버의 상태관리와 hydration, pre-fetching, cashing 등을 위해 ReactQuery를 선택했다.
그리고 앱의 주요 기능중 하나인 실시간 채팅을 구현하기 위해서 Socket.io를 사용하고 스타일링은 빠른 개발을 위해 Headless UI와 Emotion 라이브러리를 선택했다.
마지막으로 배포는 Docker를 사용했다. 뒤에서 언급하겠지만, 사실 처음부터 Docker를 선택한 건 아니였다..!
기존 vercel 툴을 이용해 배포하려했지만 결과적으로는 Docker를 사용하게 되었다.
프로젝트의 폴더구조는 src/components 밑에 주요 기능 단위 컴포넌트로 폴더를 생성하기로 컨벤션을 정했다. 전 프로젝트에서도 components 폴더에 기능 단위로 폴더를 나눈 점은 동일한데, 점점 개발이 진행될 수록 하위 폴더의 depth가 늘어나 가독성이 떨어진다는 느낌이 들었기 때문에, 이번 아코하 프로젝트에서는 기능 단위 컴포넌트로 폴더를 만들되, 무분별한 하위 폴더 생성대신 최대한 컴포넌트 파일로만 생성하도록 정했다.