[Next.js] NextJS Boilerplate 제작기

이제 곧 개발자로 일한 지 3년 차를 앞둔 만큼 업무적으로 진행한 프로젝트와 개인적으로 진행한 사이드 프로젝트의 수가 점점 늘어가다 보니, 아무 생각 없이 자주 쓰는 코드 패턴들이 생겨나기 시작했습니다. 어떤 프로젝트를 시작할 때면, 습관적으로 익숙하고 편한 방식을 고집했던 거죠. 이전에 짜던 방식대로만 코드를 짜다 보니 코드의 퀄리티가 정체되어 있음을 느꼈습니다.

 

그래서 저의 코딩 스타일을 최적화하고 코드의 퀄리티를 올리기 위해 좋다고 생각했던 코드 패턴들만을 남기고, 너무 번잡하거나 엣지 케이스를 감당하기 힘들었던 부분들을 좋은 라이브러리를 사용한 코드로 대체하였습니다. 같은 동작을 하는 라이브러리들을 비교해 보고 좀 더 취향에 맞는 라이브러리들을 고르고, 공식 문서를 읽어가며 하나둘 새로운 프로젝트에 적용하였습니다. 나중에 활용하기 위해 이런 패턴들을 빈 NextJS 프로젝트에도 쌓아가다 보니 욕심이 생겨 혹시나 도움이 될 개발자분들이 계실까, 실제 프로젝트의 형태로까지 만들게 되었습니다.

 

어떤 프로젝트를 진행하건 높은 확률로 프론트엔드에서 필요로 하게 되는 기능들이 있습니다. 예를 들면 인터랙티브한 웹페이지를 만들기 위해 모달과 토스트 메시지를 활용해야 하는 상황이 생기고, API 요청 중임을 알리는 로딩바나 스켈레톤처럼 UX의 퀄리티를 높이는 디테일도 필요합니다. API 요청과 폼 관리 등 서버와 데이터를 주고받기 위한 기능들도 개발해야 하고, 받아온 데이터를 테이블이나 리스트와 같은 컴포넌트를 통해 보기 좋게 뿌려줘야 합니다.

 

그래서 앞서 말한 공통적인 기능들이 최대한 많이 포함되도록 프로젝트 개발을 진행하였습니다. 이름은 NextJS Boilerplate지만 코드의 대부분은 CSR로 동작하게 되는데요. 저는 내부 툴이나 백오피스 같은 프로젝트를 Next.js가 아닌 React만으로 진행할 때도 많기 때문에, React Query를 적극 활용한 CSR 위주의 코드를 작성했습니다.

 

프로젝트의 주요 기능은

 

전역 모달 관리

API 응답에 따른 토스트 메시지 표출

낙관적 업데이트

위지윅 에디터

여러 형태의 폼들

테이블

인피니티 리스트

가상 리스트

국제화(한/영)

 

정도가 있고 코드와 자세한 내용은 https://github.com/Lee-Minhoon/nextjs-boilerplate에 올려두었습니다.

 

틀린 코드나 구린(?) 부분은 댓글이나 이슈로 남겨주시면 감사하겠습니다.

 

GitHub - Lee-Minhoon/nextjs-boilerplate: NextJS boilerplate using chakra-ui and react-query