[Next.js] 디렉토리 구조 & Atomic Design

프로젝트 폴더구조

 

📦src
 ┣ 📂api
 ┣ 📂app
 ┃ ┣ 📂(home)
 ┃ ┣ 📂admin
 ┣ 📂components
 ┃ ┣ 📂atoms
 ┃ ┣ 📂molecules
 ┃ ┗ 📂organisms
 ┣ 📂hooks
 ┣ 📂lib
 ┣ 📂model
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📜middleware.ts

 

 

이름	내용
api	서버 통신 관련 로직(axios, tanstack query)
app	라우팅될 컴포넌트
components	재사용 또는 가독성을 위해 쪼개놓은 컴포넌트
hooks	자주 쓰이는 로직을 커스텀 훅으로 만들어 관리
lib	외부 라이브러리에서 유틸리티 역할을 하는 모듈을 관리
model	dto 모음 (openapi:develop 스크립트 실행 시 자동생성되는 폴더)
styles	css 관련 (globalTheme, styled.d ...)
utils	유틸리티 함수 모음(자주 사용하는 기능들을 모듈화하여 재사용)

 

 

app 폴더의 (home) 소괄호 -Route Group

 

• 주소 체계에 관여하지 않고 단지 그룹만 지어줌
• 그룹 단위로 레이아웃을 별도로 가져갈 수 있음
• Next.js 공식문서 (링크)

 

 

우리 서비스는 크게 admin용 페이지와 일반유저용 페이지로 나뉨

• 일반유저페이지 https://xxx.com/...
• 어드민페이지 https://xxx.com/admin/...

일반유저 페이지들에 공통 레이아웃은 적용하되, url을 위와 같이 보여주고자 (home)이라는 Route Group 사용

 

 

 

Atomic Design (components 폴더)

 

 

• 기능 / 보여지는 부분의 정밀도 / 어플리케이션 내의 역할 등을 기준으로 atoms(원자), molecules(분자), organisms(유기체), templates(템플릿), pages(페이지) 레벨로 분류하는 디자인 패턴

 

 

우리 서비스에 적용한 기준 (templates, pages는 미사용)

 

구분	설명	예시
atom	단순한 하나의 기능만 하는 컴포넌트	button, checkbox, text area
molecule	atom이 조립된 컴포넌트	accordion, date picker, modal
organism	atom과 molecule이 조립된 컴포넌트 👉 organisms에 있는 컴포넌트들은 재사용 목적보다는 가독성을 위한 파일분리에 가까움(페이지의 특정 부분을 구성하기 위한 목적을 가지기 때문)	faqForm, tokenModalBody