멀티 환경 프로젝트(프론트와 백 폴더를 분리해서 실행)

프론트엔드 + 백엔드 통합 개발 환경 가이드

1. 개발 환경 구성

1. 프론트엔드 개발 환경
   • Vite 개발 서버 (Development Server)
   • 실제 서버가 아닌 개발 편의를 위한 도구
   • Hot Module Replacement(HMR), 실시간 코드 반영 등 지원
2. 백엔드 서버
   • Node.js 기반 실제 서버
   • API 엔드포인트 제공
   • 데이터 처리 및 비즈니스 로직 수행

개발 vs 운영 환경 차이

개발 환경

클라이언트 <-> Vite 개발 서버 (localhost:3000)
                    ↕
             백엔드 서버 (localhost:4000)

프로덕션 환경

클라이언트 <-> 웹 서버(Nginx 등) <- 정적 파일(빌드된 프론트엔드)
                    ↕
             백엔드 서버

2. 프로젝트 구조 및 목적

프로젝트 구조

프로젝트 루트/
├── package.json (메인)
├── react-shop/
│   ├── package.json (프론트엔드)
│   └── src/
└── react-shop-server/
    ├── package.json (백엔드)
    └── server.js

목적

1. 개발 효율성: 프론트엔드와 백엔드를 하나의 명령어로 동시 실행
2. 실제 환경 시뮬레이션: 프론트엔드-백엔드 통신 테스트
3. 통합 개발 환경: 단일 프로젝트에서 전체 스택 관리

3. 메인 package.json 역할

{
    "name": "react-shop-test",
    "scripts": {
        "start:frontend": "cd react-shop && npm run dev",
        "start:backend": "cd react-shop-server && node server.js",
        "start": "concurrently \"npm run start:frontend\" \"npm run start:backend\""
    },
    "devDependencies": {
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/react": "^16.3.0",
        "@testing-library/user-event": "^14.6.1",
        "concurrently": "^8.0.0",
        "jest": "^29.7.0"
    }
}

스크립트 설명

1. start:frontend
   • 프론트엔드 폴더로 이동 후 개발 서버 실행
   • Vite 기반 React 앱 실행 (일반적으로 3000번 포트)
2. start:backend
   • 백엔드 폴더로 이동 후 Node.js 서버 실행
   • API 서버 구동 (일반적으로 4000번 포트)
3. start
   • concurrently를 사용해 두 환경 동시 실행

개발 의존성 역할

• 테스트 관련: jest-dom, react, user-event
• 환경 관리: concurrently로 다중 프로세스 실행

4. 실행 프로세스

초기 설정

# 1. 메인 프로젝트 설정
npm install

# 2. 프론트엔드 설정
cd react-shop
npm install

# 3. 백엔드 설정
cd react-shop-server
npm install

실행 방법

1. 전체 환경 실행

npm start

2. 개별 실행

# 프론트엔드만
npm run start:frontend

# 백엔드만
npm run start:backend

5. 실행 흐름 설명

프론트엔드 실행 시

npm run start:frontend
↓
cd react-shop
↓
npm run dev (Vite 개발 서버)
↓
http://localhost:3000 접속 가능

백엔드 실행 시

npm run start:backend
↓
cd react-shop-server
↓
node server.js
↓
http://localhost:4000 API 서버 활성화

6. 주의사항

포트 설정

• 프론트엔드: 기본 3000번 포트
• 백엔드: 기본 4000번 포트
• 포트 충돌 주의

의존성 관리

• 각 폴더별 package.json 확인
• 필요한 의존성 모두 설치

환경 변수

• 각 서버의 .env 파일 설정
• API 주소, 포트 번호 등 확인

7. 장점

1. 통합 개발 환경 제공
2. 단일 명령어로 전체 환경 실행
3. 효율적인 개발 워크플로우
4. 테스트 환경 구축 용이

8. 문제 해결

• 포트 충돌 시: 환경 변수로 포트 변경
• 의존성 오류: 각 폴더에서 npm install 재실행
• 실행 오류: 각 폴더의 package.json 스크립트 확인

이 설정을 통해 프론트엔드 개발 환경과 백엔드 서버를 효율적으로 관리하고 개발할 수 있습니다.