폴더구조 처음엔 너무 집착하지 마세요!
다들 프로젝트 진행 전에 폴더구조를 어떻게 하면 이쁘게 만들 수 있을까? 한 번쯤은 고민해 보셨을 겁니다. 하지만 이건 정답이 없는 문제입니다.
리액트의 공식문서에서도 너무 깊이 생각하지 말고 5분 이상 시간을 투자하지 말라고 권고하고 있습니다. 그만큼 폴더구조란 언제든 변경될 수 있는 것이고 프로젝트가 커짐에 따라 어느 파일은 어느 폴더로 가야 할지 리팩토링 할 순간이 알아서 오기 때문입니다.
제가 최근 진행했던 사이드 프로젝트의 기존 폴더구조입니다. 현재 리팩토링을 진행하고 있으며 팀원들과 소통하여 최근 폴더구조를 변경하였습니다. 해당 프로젝트 폴더 구조의 간략한 설명은 아래와 같습니다.
- app : 페이지 라우팅
- components
- pages : 특정 페이지에서 쓰이는 컴포넌트들을 모아두는 폴더
- ui : 디자인 시스템
- configs : 개발환경 설정 파일 모음
- constant : 상수 모음
- font : 폰트 파일 모음
- hooks
- common : 일반적인 커스텀훅 모음
- mutations : React-Query의 useMutation훅을 사용하는 커스텀훅 모음
- queries : React-Query 의 useQuery 훅을 사용하는 커스텀훅 모음
- stores : 전역상태 스토어
- public : 이미지와 svg폴더 두 개 존재
- service : API 요청 함수 모음
- utils : 유틸 함수 모음
- styles : css 파일 모음
구조 개선의 필요성을 느끼다.🧐
components/pages 해당 폴더에는 각 페이지에서 특정하게 사용되는 컴포넌트들만 따로 모아두었습니다.
하지만 개발이 진행되고 파일이 많아 짐에 따라 app directory와 components/pages를 왕복하며 개발하는 것이 너무나 피곤해졌습니다. 따라서 폴더구조 개선의 필요성을 느끼게 되었습니다.
- components폴더를 열었는데 pages폴더?? 형이 왜 여기서 나와... 만약 팀원이 늘어난다면 기존사람이 새로 온 팀원에게 부연설명을 전부 해줘야 하는 불편함
- components/pages/community/component.tsx 중첩이 깊어짐. 만약 community/1/2/3/4... 늘어난다면...? 🙉
- app directory와 떨어져 있기 때문에 유지보수도 어렵고 프로젝트가 더 커지면 파일 찾기에도 시간이 꽤 걸릴 것으로 예상됨
위와 같은 문제로 새롭게 사용할 폴더구조를 찾게 되었고 Next.js에서는 위의 문제를 한 번에 해결할 수 있는 컨벤션이 존재하고 있었습니다.
Private Folder
https://nextjs.org/docs/app/building-your-application/routing/colocation#private-folders
Routing: Project Organization | Next.js
This page shares default behavior and features you can use to organize your project. Each folder represents a route segment that is mapped to a corresponding segment in a URL path. However, even though route structure is defined through folders, a route is
nextjs.org
Private Folder는 app directory의 특정 페이지 폴더 아래에 _를 사용하여 만들 수 있습니다. _ 를 사용하여 폴더를 만들면 Next.js는 해당 폴더를 라우팅 대상으로 고려하지 않는다고 합니다.
Private Folder를 사용하여 개선
Private Folder를 적용하고 나서 위의 3가지 문제를 모두 해결하였습니다.
특정 페이지에서만 사용하는 컴포넌트를 수정하고 싶다면 바로 해당 페이지를 라우팅 하는 폴더로 가면 됩니다. 더 이상 파일을 이리저리 찾으러 스트레스받을 일이 없어졌습니다.
이제 components 폴더에는 디자인 시스템을 담당하는 ui폴더만이 남아있습니다..! 이젠 더 이상 pages라는 폴더는 해당프로젝트에 존재하지 않게 됩니다. 이제는 처음 프로젝트 코드를 살펴보는 사람이 혼란을 겪지 않아도 됩니다.
또한 특정페이지에서만 사용하는 컴포넌트들만을 모아두었기 때문에 응집성이 올라갔으며 유지보수하기 더욱 쉬워질 것입니다.
해당 글에서는 _components를 사용하였지만 테스트 코드를 모아두는 폴더를 _test를 만들면 딱일 것 같습니다.
혹시 Next.js로 프로젝트를 준비하시는 분들은 Private Folder를 꼭 써보시는 걸 추천드리며 행복 개발 하시길 바라겠습니다.🤩
'FrontEnd' 카테고리의 다른 글
| Light House를 통한 웹 성능 최적화 진행 해보기 (0) | 2023.11.05 |
|---|---|
| React Query 의 useQuery 훅 공통 에러처리 (0) | 2023.10.22 |
| 리액트 Stompjs,Sockjs 실시간 채팅 구현 - (2) (0) | 2023.10.20 |
| 리액트 Stompjs,Sockjs 실시간 채팅 구현 - (1) (0) | 2023.10.16 |
| 프론트엔드 클린코드란?(지극히 주관적) (1) | 2023.10.11 |
