프론트엔드와 백엔드를 한 명령어로 실행하는 방법 (도커 불필요)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 및 백엔드 개발자, 전통적인 터미널 관리가 번거로운 개발자
(초보자도 VS Code 기반 방법은 쉽게 적용 가능)
핵심 요약
- 한 번의 명령어로 프론트엔드와 백엔드 서버 실행
run-dev.bat
스크립트: Windows 전용, 외부 터미널 실행.vscode/tasks.json
: VS Code 내부 터미널에서 병렬 실행 (크로스 플랫폼)npm-run-all
: CLI 기반, 플랫폼 독립적- 핵심 명령어 강조
npm install npm-run-all --save-dev
npm run start:dev
run-p frontend backend
(npm-run-all의 병렬 실행 명령)- 아키텍처 패턴
- 모듈화된 프로젝트 구조 (
frontend/
,backend/
) - 병렬 처리를 통한 개발 효율성 향상
섹션별 세부 요약
1. 문제 정의 및 배경
- 전통적인 방식: 프론트엔드(React/Vue)와 백엔드(Node.js/FastAPI) 서버를 별도 터미널로 실행해야 함
- 반복적인 작업의 불편함: 매일 두 터미널 열기 → 개발 생산성 저하
- 핵심 이슈: 도커 사용 없이 간단한 방법으로 병렬 실행 필요
2. Windows 기반 `.bat` 스크립트
run-dev.bat
파일 생성:
```bat
@echo off
echo Starting both frontend and backend development servers...
start cmd /k "cd frontend && npm run dev"
start cmd /k "cd backend && npm run start:dev"
```
- 특징:
start cmd /k
: 새로운 터미널 열기 및 유지npm run dev
: 프론트엔드 실행,npm run start:dev
: 백엔드 실행- 제한사항: Windows 전용, 외부 터미널 창 생성
3. VS Code 내부 터미널 기반 설정
.vscode/tasks.json
파일 생성:
```json
{
"version": "2.0.0",
"tasks": [
{
"label": "Frontend",
"type": "shell",
"command": "cd frontend; npm run dev"
},
{
"label": "Backend",
"type": "shell",
"command": "cd backend; npm run start:dev"
},
{
"label": "Start Development",
"dependsOrder": "parallel",
"dependsOn": ["Frontend", "Backend"]
}
]
}
```
- 사용법:
Ctrl+Shift+P
→Run Task
→Start Development
선택- 장점:
- 크로스 플랫폼 (Windows, macOS, Linux)
- VS Code 내부 터미널 관리
4. 플랫폼 독립적 `npm-run-all` 방법
- 설치:
```bash
npm install npm-run-all --save-dev
```
package.json
설정:
```json
"scripts": {
"frontend": "cd frontend && npm run dev",
"backend": "cd backend && npm run start:dev",
"start:dev": "run-p frontend backend"
}
```
- 실행:
```bash
npm run start:dev
```
- 핵심 명령어:
run-p
: 병렬 실행 명령 (npm-run-all의 핵심 기능)- 장점:
- CLI 기반, OS 또는 IDE와 무관
- 단일 명령어로 실행 가능
결론
- 권장사항:
- Windows 사용자 → .bat
스크립트
- VS Code 사용자 → .vscode/tasks.json
설정
- 플랫폼 독립적 환경 → npm-run-all
+ run-p
- 실무 팁: 프로젝트 구조를
frontend/
,backend/
로 분리하고 병렬 실행 명령을package.json
에 정의하여 팀 협업 시 일관된 개발 환경 제공.