npm 패키지 설치 시 -D는 개발용 의존성으로 설치하겠다는 의미를 가지고 있다. 만약 -D 유무에 따라 설치가 어떻게 달라지고 다루는 내용이 어떤 내용인지 정리해볼려고한다.
빌드 타임 도구는 원칙적으로 devDependencies에서 관리한다. 그리고 package.json은 npm install 시 "언제, 어떤 패키지가 필요한지"를 npm과 배포 환경에 알려주는 설계도다.
빌드 타임 도구 = devDependencies(개발 의존성) 이해 하기
빌드 타임 도구란 다음과 같은 특징을 가진다.
- 코드 작성 / 변환 / 검사 / 번들링에만 사용
- 브라우저나 서버 런타임에서는 직접 실행되지 않음
대표 예시
- tailwindcss
- postcss
- typescript
- eslint
- prettier
- vite, webpack
- @babel/*
👉 전부 devDependencies로 관리해주어야 한다.
dependencies란?
실행 중(Runtime)에 실제로 import 되어 사용하는 코드로
import { useState } from "react";
import { create } from "zustand";이런 라이브러들처럼 브라우저나 서버에 직접 실행되는 것들을 의미한다.
devDependencies vs dependencies 차이
📦 dependencies
- 서비스 실행에 반드시 필요한 패키지
- 실제 사용자에게 제공되는 코드에 포함됨
package.json에 보면
"dependencies": {
"react": "^19.0.0",
"next": "^16.0.0",
"zustand": "^5.0.0"
}👉런타임(브라우저 / 서버)에서 사용
🛠 devDependencies (-D)
- 개발·빌드·테스트용 도구
- 배포된 결과물에는 직접 포함되지 않음
"devDependencies": {
"tailwindcss": "^4.1.0",
"postcss": "^8.4.0",
"eslint": "^9.0.0",
"typescript": "^5.0.0"
}👉 개발 환경에서만 필요
이때,
개발할 때만 쓰는 도구는 개발 환경, 배포 환경을 의미하는게 아닌 빌드 과정에서 개발자를 돕는 도구라는 의미이다.
package.json의 진짜 역할
package.json은 단순한 설치 목록이 아닌 개발 환경과 배포 환경에서 어떤 의존성이 필요한지를 정의하는 계약서다.
- 개발 환경: dependencies + devDependencies
- 빌드 환경(CI / 배포 과정): dependencies + devDependencies
- 런타임 환경(실제 서비스 실행): dependencies만 필요
이 구분을 통해 불필요한 의존성을 줄이고, 환경에 맞는 패키지 설치가 가능해진다.
빌드 타임 도구는 왜 devDependencies로 관리할까?
이는 실행 단계에 필요가 없기 때문이다.
빌드 타임 도구는 말 그대로 코드를 "만드는 과정"에서만 사용되고 만들어진 결과물이 생성될 때는 필요가 없기 때문이다.
Tailwind, TypeScript, ESLint는 브라우저와 서버에서 실행되지 않고 빌드가 끝나면 역할이 종료된다. 이런 도구들을 dependencies로 관리해주면 "런타임에 필요한 코드"처럼 오해를 만들어서 의존성이 깨지기 때문에 devDependencies에서 관리해준다.
그리고 빌드 타임 도구를 분리함으로써 런타임 환경을 가볍게 유지하고, 배포 파이프라인과 의존성의 의미를 명확히 할 수 있어서 프로젝트의 구조와 유지보수성에 크게 기여한다.
