풀스택 개발 워크플로우 최적화: 단일 명령으로 프론트엔드와 백엔드 서버 자동 실행

핵심 기술

이 콘텐츠는 프론트엔드와 백엔드 개발 서버를 각각 별도의 터미널에서 실행해야 하는 번거로움을 해소하기 위해, 단일 명령으로 두 서버를 동시에 시작하는 세 가지 방법을 제시합니다. 이를 통해 반복적인 개발 워크플로우를 자동화하고 생산성을 향상시키는 것을 목표로 합니다.

기술적 세부사항

• Windows 배치 스크립트 (.bat):

  • @echo off : 명령 실행 시 해당 명령 자체를 화면에 출력하지 않습니다.
  • start cmd /k "cd frontend && npm run dev" : 새로운 CMD 창을 열고, frontend 폴더로 이동하여 개발 서버(npm run dev)를 실행합니다. /k 옵션은 명령 실행 후에도 창을 유지합니다.
  • start cmd /k "cd backend && npm run start:dev" : 동일하게 새로운 CMD 창을 열고, backend 폴더로 이동하여 개발 서버(npm run start:dev)를 실행합니다.
  • 장점: Windows 사용자에게 간편하고 네이티브한 방식입니다.
  • 단점: Windows에 국한되며, 외부 터미널 창을 여러 개 열어 작업 공간을 산만하게 할 수 있습니다.

• VS Code Tasks (.vscode/tasks.json):

  • tasks.json 파일에 version, tasks 배열을 정의합니다.
  • 각 서버 실행을 위한 shell 타입의 태스크를 정의합니다 (Frontend, Backend). 각 태스크는 해당 디렉토리로 이동 후 서버를 실행하는 command를 포함합니다.
  • presentation 설정을 통해 각 태스크를 새로운 VS Code 통합 터미널에 표시하도록 합니다.
  • Start Development 태스크는 dependsOrder: "parallel" 및 dependsOn: ["Frontend", "Backend"]를 사용하여 두 서버 태스크를 병렬로 실행합니다.
  • 장점: Windows, macOS, Linux 등 크로스 플랫폼을 지원하며 VS Code 내에서 깔끔하게 관리됩니다.
  • 단점: VS Code 설정이 필요하며, 초보자에게는 다소 생소할 수 있습니다.

• npm-run-all 활용 (package.json):

  • npm install npm-run-all --save-dev : npm-run-all 패키지를 개발 종속성으로 설치합니다.
  • package.json의 scripts 섹션에 다음과 같이 정의:
    • "frontend": "cd frontend && npm run dev"
    • "backend": "cd backend && npm run start:dev"
    • "start:dev": "run-p frontend backend"
  • run-p는 npm-run-all에서 제공하는 명령으로, 여러 스크립트를 병렬로 실행합니다.
  • 실행 방법: npm run start:dev
  • 장점: VS Code나 OS 특정 설정 없이 순수하게 package.json만으로 플랫폼 독립적인 해결책을 제공합니다.
  • 단점: 별도의 패키지 설치가 필요합니다.

개발 임팩트

각 개발 서버를 시작하기 위해 여러 터미널을 열고 명령어를 입력하는 반복적인 작업을 자동화함으로써, 개발자는 설정 시간을 단축하고 실제 개발에 더 집중할 수 있습니다. 이는 특히 여러 프로젝트를 동시에 진행하거나, 매일 개발 환경을 설정해야 하는 경우 개발 경험을 크게 향상시킵니다.

커뮤니티 반응

(원문에 직접적인 커뮤니티 반응 언급은 없으나, 이와 같은 자동화 기법은 개발자들 사이에서 생산성 향상을 위한 일반적인 솔루션으로 공유되고 있습니다.)