프론트엔드와 백엔드 한 명령어로 실행 (도커 불필요)
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

프론트엔드와 백엔드를 한 명령어로 실행하는 방법 (도커 불필요)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 및 백엔드 개발자, 전통적인 터미널 관리가 번거로운 개발자

(초보자도 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+PRun TaskStart 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에 정의하여 팀 협업 시 일관된 개발 환경 제공.