npm-run-all: NPM 스크립트 효율적으로 관리하기

npm-run-all: NPM 스크립트 효율적으로 관리하기

npm-run-all은 여러 개의 npm 스크립트를 순차적으로 또는 병렬로 실행할 수 있도록 도와주는 강력한 도구입니다. 이 패키지는 복잡한 빌드 프로세스나 다양한 작업을 쉽게 관리할 수 있게 해줍니다.

이 글에서는 npm-run-all의 설치 방법, 주요 기능, 그리고 사용법을 코드 예제와 함께 살펴보겠습니다.

---

1. npm-run-all 설치하기

다음 명령어를 실행하여 npm-run-all을 개발 의존성으로 설치합니다:

npm install npm-run-all --save-dev

---

2. 주요 기능

2.1 순차 실행

npm-run-all의 기본 동작은 여러 스크립트를 순차적으로 실행하는 것입니다.

예를 들어, 다음과 같은 npm 스크립트를 package.json에 정의할 수 있습니다:

{
  "scripts": {
    "build": "npm-run-all clean lint test",
    "clean": "rimraf dist",
    "lint": "eslint src",
    "test": "jest"
  }
}

위 설정에서 npm run build를 실행하면 clean, lint, test 스크립트가 순서대로 실행됩니다.

npm run build

2.2 병렬 실행

--parallel 옵션을 사용하면 여러 스크립트를 동시에 실행할 수 있습니다.

예를 들어, 다음과 같은 설정을 추가할 수 있습니다:

{
  "scripts": {
    "build": "npm-run-all --parallel clean lint test",
    "clean": "rimraf dist",
    "lint": "eslint src",
    "test": "jest"
  }
}

위 설정에서 npm run build를 실행하면 clean, lint, test 스크립트가 동시에 실행됩니다.

npm run build

참고: 병렬 실행 시 로그가 뒤섞여 보일 수 있으므로, 작업 간 출력 구분이 필요하다면 추가 설정을 고려하세요.

2.3 특정 패턴 실행

npm-run-all은 패턴 매칭을 통해 특정 이름 패턴을 가진 스크립트를 실행할 수 있습니다.

다음과 같은 예를 보세요:

{
  "scripts": {
    "build": "npm-run-all --run build:*",
    "build:js": "webpack",
    "build:css": "sass src/styles.scss dist/styles.css"
  }
}

위 설정에서 npm run build를 실행하면 build:js와 build:css가 실행됩니다.

npm run build

---

3. 실전 예제

다음은 실제 프로젝트에서 자주 사용되는 예제입니다:

{
  "scripts": {
    "start": "npm-run-all --parallel server client",
    "server": "nodemon server.js",
    "client": "react-scripts start",
    "build": "npm-run-all clean lint build:*",
    "build:js": "webpack",
    "build:css": "sass src/styles.scss dist/styles.css",
    "clean": "rimraf dist",
    "lint": "eslint src"
  }
}

• npm run start: 백엔드(server.js)와 프론트엔드(react-scripts)를 동시에 실행합니다.
• npm run build: clean, lint, 그리고 build:js, build:css를 순차적으로 실행합니다.

---

4. 정리

npm-run-all은 다음과 같은 상황에서 특히 유용합니다:

• 여러 작업을 순차적으로 실행해야 할 때
• 병렬로 실행되는 작업을 관리해야 할 때
• 패턴을 기반으로 작업을 실행해야 할 때

이 도구를 사용하면 package.json의 스크립트를 더 깔끔하고 체계적으로 관리할 수 있습니다. 지금 바로 프로젝트에 적용해 보세요!