Skip to content

01. 디렉토리 구조

Jump to bottom
pozafly edited this page Sep 8, 2023 · 5 revisions

구조

src
 ┣ backend // API Routes 모듈화 (⛑️)
 ┃ ┣ auth
 ┃ ┃ ┗ httpMethods // http 메서드 별 함수
 ┃ ┃   ┣ GET.ts
 ┃ ┃   ┣ POST.ts
 ┃ ┃   ┗ DELETE.ts
 ┃ ┣ common // 공통 filter 존재
 ┃ ┣ constants
 ┃ ┗ utils
 ┣ constants // 상수 관리
 ┣ core
 ┃ ┣ config // 앱 부팅시 세팅
 ┃ ┗ utils
 ┣ features // 도메인 별
 ┃ ┗ [도메인]
 ┃   ┣ apis
 ┃   ┃ ┣ mutations
 ┃   ┃ ┣ queries
 ┃   ┃ ┣ index.ts // use axios instance
 ┃   ┃ ┗ interaces.ts
 ┃   ┣ components
 ┃   ┣ contexts
 ┃   ┣ hooks
 ┃   ┗ pages // Next.js의 pages 폴더 내부 파일의 re-export 대상 (🐳)
 ┣ lib
 ┣ pages
 ┃ ┣ api // (⛑️)
 ┃ ┗ [도메인] // (🐳)
 ┃ store // redux store
 ┗ middleware

backend (⛑️)

Next.js의 API Routes를 사용해 backend 코드를 모듈화 해서 작성합니다.

Next.js 13 버전에서는 API Routes가 새롭게 Route Handlers로 변경되었지만, Pages Router를 사용했기 때문에 API Routes를 사용했습니다. API Routes는 pages/api 디렉토리에 작성할 수 있는데, 모듈화가 되지 않는 단점이 있습니다.

때문에 backend 디렉토리를 src 디렉토리에 생성 후, 서버에서 받는 HTTP Methods 별로 작성할 수 있도록 모듈화 했습니다. 이는 Next.js 13 버전의 Route Handlers 에서도 파일 명으로 HTTP Methods를 구분하여 받고 있었기 때문에 아이디어를 차용하여 적용했습니다.

API Routes 모듈화 과정의 고민은 'Next.js의 API Routes 코드 모듈화에 대해서' 라는 글에 자세히 풀어두었습니다.


features

Jiary 프로젝트는 디렉토리 구조를 도메인 별로 나누었습니다. 그 중 features 디렉토리는 각 도메인 별 세부 내용이 들어갑니다.

Next.js 혹은 react 프로젝트에서 주로 src 디렉토리 하위로 apis, components, hooks 등의 역할 별 구조를 따릅니다. Jiary 프로젝트에서도 이를 차용해 프로젝트를 진행했지만, 한 도메인 관련 작업을 할 경우 apis, components 등의 디렉토리를 왔다갔다 하며 작업을 했었습니다. 도메인 별로 api, components, hooks가 폴더에서 굉장히 멀게 느껴지고, 분산되어 있다는 느낌을 받았습니다. 따라서, 최대한 가까이 두어 빠른 서칭을 하기 위해 features/[도메인] 디렉토리 구조로 잡았습니다.

- features/[도메인]/apis

크게 4개 단위로 묶여있습니다.

  • index.ts : HTTP 요청 함수
  • interface.ts : API request / response의 명세
  • queries : react-query의 useQuery 함수 디렉토리
    • useGetFile.ts와 같이 useQuery를 사용하는 훅 명을 파일명으로 사용
  • mutations : react-query의 useMutation 함수 디렉토리
    • useCreateFile.ts와 같이 useMutation을 사용하는 훅 명을 파일명으로 사용

- features/[도메인]/pages (🐳)

Next.js는 src/pages 에서 디렉토리 구조로 페이지를 생성합니다. SSR를 위해 prefetch 로직과, 페이지를 구성하는 마크업 코드가 모두 모여있었습니다. 코드가 혼재해 있기 때문에 이를 나누어 작성하고 싶었습니다.

그래서 src/pages에는 SSR을 위한 prefetch 용도로만 사용하고, features/[도메인]/pages 디렉토리에 페이지를 그려주는 파일을 두고 src/pages에서 해당 파일을 re-export 하도록 했습니다. 결과로, src/pages는 prefetch를 위한 react-query 코드만 존재하고 features/[도메인]/pages 디렉토리는 마크업 코드 및 CSR 코드만 있어 역할 분리가 되었습니다.

Clone this wiki locally