[npm/yarn] package.json 스크립트 명령어 예시

들어가며

package.json의 scripts 필드는 단순한 명령어 모음이 아닌, 개발 생산성을 크게 높여주는 강력한 도구입니다.
오늘은 실무에서 바로 활용할 수 있는 유용한 스크립트 팁들을 알아볼게요. 😊

기본적인 스크립트 활용

1. 기본 스크립트 구조

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

실용적인 스크립트 팁들 🚀

1. 병렬 실행과 순차 실행

{
  "scripts": {
    // 순차 실행 (&&)
    "build:sequence": "npm run clean && npm run build:css && npm run build:js",

    // 병렬 실행 (&)
    "dev": "npm run watch:css & npm run watch:js",

    // cross-env 활용
    "build:prod": "cross-env NODE_ENV=production npm run build"
  }
}

2. 환경별 설정 관리

{
  "scripts": {
    "start:dev": "cross-env NODE_ENV=development nodemon server.js",
    "start:prod": "cross-env NODE_ENV=production node server.js",
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  }
}

3. 유용한 유틸리티 스크립트

{
  "scripts": {
    // 의존성 최신화
    "update:deps": "npm update && npm outdated",

    // 캐시 클리어
    "clean": "rm -rf node_modules/.cache dist",

    // 의존성 문제 해결
    "reset": "rm -rf node_modules package-lock.json && npm install",

    // 타입 체크와 린트 실행
    "check": "tsc --noEmit && eslint src/**/*.ts"
  }
}

4. pre/post 훅 활용

{
  "scripts": {
    "prebuild": "npm run clean && npm run test",
    "build": "webpack",
    "postbuild": "echo '빌드 완료!' && npm run notify",

    "precommit": "lint-staged",
    "prepare": "husky install"
  }
}

5. 커스텀 스크립트 조합

{
  "scripts": {
    // 개발 환경 셋업
    "setup": "npm install && npm run prepare && npm run init:env",
    "init:env": "cp .env.example .env",

    // 배포 프로세스
    "deploy": "npm run test && npm run build && npm run upload",
    "upload": "aws s3 sync dist/ s3://my-bucket/",

    // Docker 관련
    "docker:build": "docker build -t my-app .",
    "docker:run": "docker run -p 3000:3000 my-app"
  }
}

고급 활용 팁 💡

1. 동적 인자 전달

{
  "scripts": {
    // $npm run create:component MyButton
    "create:component": "node scripts/create-component.js",

    // $npm run test:file auth.test.js
    "test:file": "jest"
  }
}

2. npm-run-all 활용

{
  "scripts": {
    // 병렬 실행 최적화
    "dev": "npm-run-all --parallel watch:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",

    // 순차 실행 최적화
    "build": "npm-run-all clean lint:* build:*",
    "lint:js": "eslint src",
    "lint:css": "stylelint src/**/*.scss"
  }
}

3. 조건부 스크립트

{
  "scripts": {
    // Windows와 Unix 호환
    "clean": "rimraf dist",

    // 환경에 따른 조건부 실행
    "start": "node scripts/start.js",
    "start:windows": "set NODE_ENV=development && npm start",
    "start:unix": "NODE_ENV=development npm start"
  }
}

실전 예시: 풀스택 프로젝트 설정 ⚡️

{
  "scripts": {
    // 개발 환경
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon server/index.js",
    "dev:client": "vite",

    // 테스트
    "test": "npm-run-all --parallel test:*",
    "test:unit": "jest",
    "test:e2e": "cypress run",
    "test:coverage": "jest --coverage",

    // 린트 및 포맷
    "lint": "npm-run-all lint:* format",
    "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:css": "stylelint **/*.{css,scss}",
    "format": "prettier --write .",

    // 빌드 및 배포
    "build": "npm-run-all clean lint build:*",
    "build:server": "tsc -p tsconfig.server.json",
    "build:client": "vite build",

    // 유틸리티
    "clean": "rimraf dist coverage",
    "prepare": "husky install",
    "analyze": "source-map-explorer dist/**/*.js"
  }
}

유용한 패키지 추천 📦

{
  "devDependencies": {
    "npm-run-all": "병렬/순차 실행",
    "cross-env": "크로스 플랫폼 환경변수",
    "rimraf": "크로스 플랫폼 파일 삭제",
    "husky": "Git 훅 관리",
    "lint-staged": "스테이징된 파일만 린트"
  }
}

마치며

잘 구성된 npm 스크립트는 개발 워크플로우를 획기적으로 개선할 수 있어요.
처음에는 간단하게 시작하고, 점진적으로 팀의 필요에 맞게 확장해나가는 것을 추천드립니다!

기억하세요:

• 스크립트는 재사용 가능하게 작성하기
• 명확한 네이밍 규칙 사용하기
• 문서화를 통해 팀원들과 공유하기

즐거운 코딩 되세요! 🚀