[Next.js] 디렉토리 구조 & Atomic Design
2024. 5. 23. 17:34
반응형
프로젝트 폴더구조
📦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 |
반응형
'한 걸음 > React & Next.js' 카테고리의 다른 글
[React] svg icon 컴포넌트화해서 사용하기 (0) | 2024.06.04 |
---|---|
[styled-components + typescript] 커스텀 컴포넌트에 기본 attributes 가져오기 (0) | 2024.05.29 |
[React] 키보드 입력 감지하기 (0) | 2024.05.22 |
[Next.js] 배포 시 console 지우기 (0) | 2024.05.22 |
[Next.js] 미들웨어(Middleware) (0) | 2024.05.21 |