파일/폴더 디렉토리 구조

기본적으로 Next.JS 13의 App Router 버전으로 관리하고 있음.

/public

static한 파일을 넣는데 사용함. 보통 image를 많이 넣음. Next.JS의 Image 컴포넌트와 결합할 경우 더욱 편함.

/ckeditor5

CK Editor의 모듈 파일임. #/components/wysiwyg/ck-editor로 import하여 사용하면 됨. 자세항 사항은 ./wysiwyg-editor.md를 참조.

/src

UI, 비즈니스 로직 등이 들어간 파일. 가장 핵심적인 코드들이 들어갔다고 해도 무방.

📦src
┣ 📂api
┃ ┗ 📜fetch-config.ts
┣ 📂app
┃ ┣ (...)
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
┣ 📂components
┣ 📂constant
┣ 📂containers
┣ 📂layouts
┣ 📂mock
┣ 📂store
┣ 📂styles
┣ 📂types
┗ 📂utils

/api

• 2023/08 : API 호출 코드를 /src와 /api 폴더로 분리하는 것은 코드 구조를 보다 모듈화하고 체계적으로 유지하며, 단일 책임 원칙을 지키고 테스트 용이성과 재사용성을 향상시키기 위해 따로 분리. 서버 URL을 직접적으로 쓰는 코드와 UI, 비즈니스 코드가 분리해 코드 구조가 더 모듈화가 되게끔 체계적으로 정리하고, 혹여나 모를 중복 코드를 제거하고, 추상화를 통해 재사용성도 늘릴 수 있어 분리하는 것을 선택했음.
• 2023/12 : 굳이 그렇게 안해도 된다는 대표님의 지시로 API 호출 코드를 담은 API 함수들을 없애고 API를 호출할 때 거기에서 쓰도록 변경. 그와 함께 fetchAuth, fetchNoAuth로 API 호출을 관리하도록 변경. 자세한 건 후술.

Next.JS에선 따로 /app 안에서 사용해 Next.JS만의 API 커스텀 방식을 사용할 수 있는데, S3로 SSG, 정적 배포를 하여 사용하지 못할 뿐더러 필요가 없어 Route Handler는 사용하지 않고 있음.
/api/fetch-auth.ts에서 선언된 fetchAuth, fetchNoAuth를 통해 토큰 핸들링, 에러 처리를 도맡고 있음. error-object.ts로 커스텀이 들어간 에러를 핸들링하고 있음.

/app

Next.JS App Router만의 기능. 폴더를 만들고 그 안 파일 page.tsx로 URL 도메인을 짤 수 있음. 참고
여기서는 URL Path에 직접적으로 영향을 주는 폴더 및 page.tsx와 공통적으로 컴포넌트를 짤 수 있는 layout.tsx만 존재하게 만들었음. 따로 CDD를 위해 컴포넌트를 분리하여 만든 /containers 및 /component 폴더나 레이아웃을 만드는 데 쓰일 /layout 폴더 등은 동일 위치의 디렉토리에 위치시켰음. 소괄호는 URL에 영향을 주지 않지만 레이아웃 등 그룹핑이 필요할 때 쓴 것임.
/api와 마찬가지로 분리를 통해 폴더 구조를 체계적으로 관리하기 위해서 /app에는 페이지 구조를 짜는 파일만 두게 했음. 또한 SSR을 사용하기 때문에 /app 아래 page.tsx에는 'use client' 같은 지시어나 로직, UI 코드를 잘 사용하지 않고, Next.JS의 SSR 기능과 라우팅만 사용하는 곳으로 사용함.

/components

/container의 구성요소들을 /components에 정리했음. CDD 방식을 따르는 리액트의 프레임워크인 Next.JS이므로 /container에 쓰이는 Component들을 만들어 넣어놓음.

/constants

변하지 않는 데이터를 다루는 코드를 작성하는 폴더. 보통 Category 객체 같은 것들이 쓰임.

/containers

page.tsx에 가장 1번째로 들어가는 파일들이 들어감. 위에서 기술했듯이 로직, UI 정보가 들어가는 최 앞단의 컴포넌트라고 보면 됨. 여기서부터 'use client' 지시어를 쓰면 됨. 리팩터링을 진행할 때 Page를 렌더링하는 /app과 /container 분리해야하기 때문에 /container에 전부 옮김.
나중에 고도화를 위해서 Meta Data 등 use client 지시어를 쓰지 않아야 사용할 수 있는 기능이 있다면 추가하면 됨.

/layouts

말 그대로 레이아웃에 쓰일 컴포넌트들을 따로 두었음. Header, Sidebar 등을 구현해 작성하여 /app의 layout.tsx에 쓰일 코드들을 작성함.

/mock

초기 개발 단계에서 쓰일 Mock Data들을 작성하는데 쓰임.

/store

전역 상태를 작성하는데 쓰이며, 전역 상태 라이브러리의 Hooks, Status를 작성. 여기에서는 지금 Zustand를 쓰고 있음.

/styles

CSS 코드를 작성하는데 쓰임. 공통으로 적용될 grobals.css가 기본으로 있고, 컴포넌트나 페이지에 쓰일 로컬 CSS도 여기에 작성.

/types

TypeScript를 쓰고 있으므로 type을 작성해야함.
로컬에 작성하는 것보다 다른 폴더에 모아 작성하는 것을 통해 모듈화를 이뤄 체계적으로 정리하는 것이 편하고, 추상화와 중복 코드를 방지하기 위해 따로 분리함.

/utils

/utils는 앱 전반에서 사용되는 작은 기능들을 추상화한 함수들이 있는 폴더. 재사용성이 매우 높은 코드이면서, 비즈니스 로직에 큰 영향을 주지 않는 헬퍼 함수 코드를 주로 사용하기 위해 따로 만들음.
보통 인증 관련 함수나 Format 함수, Provider나 Debounce 등이 들어감.