프로젝트 디렉터리 구조 규칙

프로젝트를 진행하려면 폴더 구조를 잡는 것은 필수이고 기본적인 사항입니다. 종류 별로 기본적인 폴더 구조를 잡는 방법에 대해 간략하게 정리해 보겠습니다.

1. react 디렉터리 구조

my-app/
│
├── public/                # 정적 파일들을 저장합니다.
│   ├── index.html         # 메인 HTML 파일입니다.
│   └── favicon.ico        # 웹사이트의 파비콘 아이콘입니다.
│
├── src/                   # 소스 코드를 저장하는 디렉터리입니다.
│   ├── components/        # 재사용 가능한 UI 컴포넌트들을 저장합니다.
│   │   ├── Layout/        # 레이아웃과 관련된 컴포넌트들입니다.
│   │   ├── Button/        # 버튼과 관련된 컴포넌트들입니다.
│   │   ├── Form/          # 폼과 관련된 컴포넌트들입니다.
│   │   ├── ListItem/      # 리스트 아이템과 관련된 컴포넌트들입니다.
│   │   └── Popup/         # 팝업과 관련된 컴포넌트들입니다.
│   │
│   ├── pages/             # 페이지 컴포넌트들을 저장합니다.
│   │
│   ├── services/          # API 호출이나 외부 서비스 로직을 저장합니다.
│   │
│   ├── contexts/          # React context를 사용한 전역 상태 관리 로직을 저장합니다.
│   │
│   ├── assets/            # 이미지, 폰트 등의 정적 리소스를 저장합니다.
│   │
│   ├── styles/            # SCSS 스타일 파일들을 저장합니다.
│   │
│   ├── utils/             # 유틸리티 함수를 저장합니다.
│   │
│   │
│   ├── mocks/             # 가짜 API 응답이나 테스트 데이터를 저장합니다.
│   │   └── users.js       # 사용자 데이터의 목업입니다.
│   │
│   ├── tests/             # 테스트 코드를 저장합니다.
│   │
│   ├── index.js           # 애플리케이션의 엔트리 포인트입니다.
│   └── App.js             # 메인 App 컴포넌트입니다.
│
├── .storybook/             # Storybook 설정 파일을 저장하는 디렉터리입니다.
│   ├── main.js             # Storybook의 기본 설정 파일입니다.
│   └── preview.js          # 컴포넌트 미리보기를 커스터마이징하는 파일입니다.
│
├── stories/                # Storybook 스토리 파일을 저장하는 디렉터리입니다.
│   ├── Button.stories.js   # Button 컴포넌트의 스토리 파일입니다.
│   └── ...
│
├── package.json           # 프로젝트의 의존성과 스크립트를 정의합니다.
├── README.md              # 프로젝트에 대한 설명을 담은 README 파일입니다.
└── ...

2. express 디렉터리 구조

my-express-app/
│
├── routes/                 # 라우터 파일들을 저장합니다.
│   ├── index.js            # 기본 라우트를 정의합니다.
│   └── users.js            # 사용자 관련 라우트를 정의합니다.
│
├── controllers/            # 컨트롤러를 저장합니다.
│   ├── indexController.js  # 'index' 경로의 컨트롤러입니다.
│   └── userController.js   # 'user' 경로의 컨트롤러입니다.
│
├── services/               # 서비스 로직을 저장합니다.
│   └── userService.js      # 사용자 관련 서비스 로직입니다.
│
├── models/                 # 데이터 모델 파일들을 저장합니다.
│
├── utils/                  # 유틸리티 함수를 저장합니다.
│   └── helpers.js          # 다양한 유틸리티 함수를 포함합니다.
│
├── middleware/             # 미들웨어 파일들을 저장합니다.
│
├── tests/                  # 테스트 코드를 저장합니다.
│   ├── unit/               # 유닛 테스트 코드를 저장합니다.
│   └── integration/        # 통합 테스트 코드를 저장합니다.
│
├── docs/                   # 문서화 관련 파일들을 저장합니다.
│   ├── api/                # API 문서를 저장합니다.
│   └── setup.md            # 개발 환경 설정 문서입니다.
│
├── app.js                  # 앱 설정과 미들웨어를 정의합니다.
│
├── package.json            # 프로젝트의 의존성과 스크립트를 정의합니다.
│
└── README.md               # 프로젝트에 대한 설명을 담은 README 파일입니다.

3. nest 디렉터리 구조

src/
|-- app.controller.ts             # 기본 컨트롤러 파일
|-- app.controller.spec.ts        # 기본 컨트롤러 테스트 파일
|-- app.module.ts                 # 기본 모듈 파일
|-- app.service.ts                # 기본 서비스 파일
|-- app.service.spec.ts           # 기본 서비스 테스트 파일
|-- main.ts                       # 애플리케이션의 엔트리 포인트
|-- common/                       # 공통 코드 폴더
|   |-- interfaces/               # 공통 인터페이스
|   |   |-- user.interface.ts
|   |   |-- product.interface.ts
|-- modules/                      # 모듈 폴더
|   |-- users/                    
|   |   |-- dto/                  
|   |   |   |-- create-user.dto.ts
|   |   |-- user-validator.ts     # 사용자 관련 컴포넌트(서비스나 공통 로직)
|   |   |-- user-validator.spec.ts # 컴포넌트 테스트 파일
|   |   |-- users.controller.ts  
|   |   |-- users.controller.spec.ts
|   |   |-- users.module.ts      
|   |   |-- users.service.ts     
|   |   |-- users.service.spec.ts 
|   |-- products/                 
|   |   |-- dto/                  
|   |   |   |-- create-product.dto.ts
|   |   |-- product-validator.ts   # 제품 관련 컴포넌트(서비스나 공통 로직)
|   |   |-- product-validator.spec.ts # 컴포넌트 테스트 파일
|   |   |-- products.controller.ts
|   |   |-- products.controller.spec.ts
|   |   |-- products.module.ts  
|   |   |-- products.service.ts 
|   |   |-- products.service.spec.ts  
|-- middlewares/                  # 미들웨어 폴더
|   |-- logger.middleware.ts
|   |-- logger.middleware.spec.ts # 미들웨어 테스트 파일
|-- utils/                        # 유틸리티 폴더
    |-- helpers.ts
    |-- helpers.spec.ts           # 유틸리티 테스트 파일

4. next 디렉터리 구조(v12)

my-next-app/
│
├── .next/                     # 빌드 생성 디렉터리
│   ├── cache/
│   └── ...
│
├── api-lib/                   # API 호출과 관련된 로직 라이브러리
│   ├── userApi.js
│   └── postApi.js
│
├── assets/                    # 다양한 미디어 자원을 저장하는 디렉터리
│   ├── images/
│   └── icons/
│
├── docs/                      # 필요한 참고문서를 저장하는 디렉터리
│   ├── Frontend/
│   ├── Backend/
│   └── Design/
│
├── components/                # 재사용 가능한 UI 컴포넌트를 저장하는 디렉터리
│   ├── Header.js
│   ├── Footer.js
│   └── ...
│
├── hooks/                     # 커스텀훅을 저장하는 디렉터리
│   ├── useTimeFormat.js
│   └── ...
│
├── lib/                       # 외부 라이브러리 또는 프로젝트 내부에서 사용하는 유틸리티 함수
│   ├── util.js
│   └── helper.js
│
├── page-components/           # 특정 페이지에서만 사용되는 컴포넌트를 저장하는 디렉터리
│   ├── HomePageComponents/
│   └── AboutPageComponents/
│
├── pages/                     # 페이지 컴포넌트 및 API 라우트를 저장하는 디렉터리
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
│   └── api/                   # API를 저장하는 디렉터리
│       └── user.js
│
├── styles/                    # scss, 스타일을 저장하는 디렉터리
│   ├── globals.scss
│   ├── Home.module.scss
│   └── ...
│
├── mocks/                     # 더미 객체를 저장하는 디렉터리 (api 연결 전에 테스트)
│   ├── handler.js
│   └── ...
│
├── public/                    # 정적 파일을 저장하는 디렉터리
│   ├── favicon.ico
│   └── logo.png
│
├── package.json               # 프로젝트의 의존성과 스크립트를 정의하는 파일
└── README.md                  # 프로젝트에 대한 정보 및 사용 방법을 설명하는 파일

이런 식으로 프로젝트별로 디렉터리 구조를 나눌 수 있고 보편적으로 많이 사용하는 구조도 존재합니다.

프로젝트마다 다양한 방식으로 컴포넌트를 설계합니다. 회사에서 좀 더 큰 프로젝트를 할 때 팀원들 간 컴포넌트, 아키텍처, 컨벤션을 설정하여 프로젝트에 알맞은 구조를 설계하는 방식이 제일 좋을 것 같습니다.
이렇게 컴포넌트 구조에는 정답이 없다 보니, 여러 가지 패턴들이 많습니다. 그래서 다양한 문서를 참고해서 자신에게 맞는 방법으로 설계해 보는 연습이 필요합니다.