package.json의 dependencies와 devDependencies는 어떤 기준으로 나누나요?

이렇게 답해 보세요 (핵심 답변)

dependencies는 패키지가 실제 런타임에 실행될 때 필요한 패키지(예: react, axios)를 적는 곳이고, devDependencies는 코드 작성·트랜스파일·번들링·린트·테스트처럼 개발 및 빌드 과정에만 필요한 도구(예: typescript, eslint, vitest, webpack)를 적는 곳입니다. 라이브러리를 npm에 배포할 때는 소비자가 그 라이브러리를 설치할 때 dependencies만 함께 설치되고 devDependencies는 설치되지 않으므로 이 구분이 매우 중요합니다. 반면 일반 프론트엔드 웹 앱에서는 최종 브라우저 번들에 무엇이 포함되는지가 package.json의 위치가 아니라 코드의 실제 import 그래프와 번들러 설정으로 결정된다는 점도 함께 기억해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 라이브러리 배포 환경이나 서버의 npm ci --omit=dev 실행 환경에서는 devDependencies가 제외되므로 런타임 필수 패키지가 빠지면 장애가 납니다.
2. 반대로 서버 컨테이너 이미지나 CI 단계에서 프로덕션 빌드를 수행해야 한다면 빌드 시점에는 devDependencies의 빌드 도구가 설치되어 있어야 합니다.

면접에서 자주 하는 실수

컴포넌트 코드에서 실제로 import해서 쓰고 있는 무거운 라이브러리를 단지 devDependencies로 옮겨 적는다고 해서 브라우저 번들에서 자동으로 빠지는 것은 아닙니다.