프로젝트 폴더 구조 구성하기

 

프로젝트를 구성할때 개발, 테스트, 배포 과정에서 효율적인 관리를 위해 폴더 구조를 잘 분리하는 것이 중요하다. 

 

 

| 폴더 구조 구성

 

크게는 백엔드와 프론트엔드를 분리해서 작업하는 것이 실무에서 일반적이다.

project-root/
├── backend/          # Node.js + Express API 서버
│   ├── server.js
│   ├── routes/
│   ├── models/
│   └── config/
├── frontend/         # React 프로젝트
│   ├── public/
│   └── src/
├── .env              # 환경 변수 파일
└── README.md

 

 

- backend : Node.js, Express, MongoDB로 구성된 API 서버

- frontent : React로 구성된 클라이언트

- `.env` : 환경 변수 설정

- `README.md` : 프로젝트 설명 파일

 

 

 

| 초기 구조 세팅 

 

# 루트(프로젝트)에 backend, frontend 폴더 생성

# 백엔드 초기화 

# 프론트엔드 react 설치

 

자세히

 

 

---

 

 

실제 프로젝트로 React, Node.js, MongoDB를 이용하여 회원가입, 로그인, 게시판 등의 기능을 포함하는 구조를 구현한다면 아래와 같이 더욱 세부적으로 나누어 구성할 수 있다. 반드시 이렇게 해야 하는 건 아니다. 

 

my-app/
├── backend/
│   ├── config/                    # 환경설정 (DB, JWT 등)
│   │   └── db.js
│   ├── controllers/              # 각 API의 핵심 로직
│   │   ├── authController.js
│   │   └── postController.js
│   ├── middleware/               # 미들웨어 (인증, 에러처리)
│   │   ├── authMiddleware.js
│   │   └── errorHandler.js
│   ├── models/                   # Mongoose 모델
│   │   ├── User.js
│   │   └── Post.js
│   ├── routes/                   # API 라우트
│   │   ├── authRoutes.js
│   │   └── postRoutes.js
│   ├── utils/                    # 유틸 함수 (토큰 생성 등)
│   │   └── generateToken.js
│   ├── server.js                 # 서버 시작점
│   ├── .env                      # 환경 변수
│   └── package.json
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── api/                  # Axios API 요청 모음
│   │   │   ├── auth.js
│   │   │   └── post.js
│   │   ├── components/           # 공통 컴포넌트
│   │   │   ├── Header.js
│   │   │   └── ProtectedRoute.js
│   │   ├── pages/                # 페이지별 컴포넌트
│   │   │   ├── LoginPage.js
│   │   │   ├── RegisterPage.js
│   │   │   ├── BoardPage.js
│   │   │   └── PostDetailPage.js
│   │   ├── hooks/                # 커스텀 훅
│   │   │   └── useAuth.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── App.css
│   ├── .env                     # 프론트엔드 환경변수
│   └── package.json
│
├── README.md
└── .gitignore

 

 

- backend/config : DB연결, JWT 시크릿 등 환경 설정 파일

- backend/controllers : 실제 로직 처리 (회원가입, 게시글 등)

- backend/middleware : 인증확인, 에러 핸들링 등

- backend/models : MongoDB 데이터 모델 

- backend/routes : API endpoint 라우팅 구성

 

- frontend/api : Axios로 서버와 통신하는 함수들

- frontend/pages : URL별 페이지 컴포넌트

- frontend/components : 재사용 가능한 UI 컴포넌트

- frontend/hooks : 인증상태 유지 등 커스텀 훅