package.json의 dependencies와 devDependencies의 차이

Question

강의 잘 듣고 있습니다. dependencies와 devDependencies의 차이에 대해서 궁금한데요, 둘의 차이점은 앱 배포 시 포함이 되느냐 안되느냐의 차이로 알고 있습니다.

그런데 tanstack-query나, date-fns를 devDependencies에 설치하고 vercel에 배포를 하더라도 배포된 프로덕션 환경에서 정상적으로 작동하는데요, 이에 대한 챗 gpt의 답변은 다음과 같습니다.

Vercel의 배포 프로세스
- Vercel은 next build를 실행하여 프로젝트를 빌드하고, 필요한 의존성을 설치합니다. 이때 dependencies와 devDependencies 모두가 설치됩니다.
- 배포 환경에서도 devDependencies의 패키지가 포함될 수 있는 이유는 Next.js의 빌드 시점에 이 패키지가 필요하기 때문입니다.
- 예를 들어, @tanstack/react-query는 런타임에 필요한 라이브러리인데, 이를 devDependencies에 넣어두었더라도 next build 과정에서 번들된 코드에 포함됩니다. 따라서 Vercel에서 배포 후에도 런타임에 사용 가능합니다.
React Query와 런타임 의존성
- @tanstack/react-query는 런타임에 작동해야 하는 의존성입니다. 따라서 빌드 결과물에 포함되며, devDependencies에 설치된 상태라도 번들링 과정에서 런타임에 필요한 모든 코드를 포함합니다.
- @tanstack/react-query-devtools는 개발 도구용이지만, 프로덕션 환경에서는 기본적으로 UI가 렌더링되지 않아 에러를 발생시키지 않습니다.
dependencies와 devDependencies의 차이
- dependencies: 런타임에 반드시 필요한 의존성.
- devDependencies: 개발 및 빌드 단계에서만 필요한 의존성.
- Next.js에서는 빌드 과정에서 사용하는 패키지든, 런타임에 사용하는 패키지든 모두 번들링되기 때문에 devDependencies에 패키지가 있어도 문제가 없는 것처럼 보일 수 있습니다.
Vercel이 에러 없이 작동하는 이유
- @tanstack/react-query는 devDependencies에 있지만, 빌드 과정에서 번들링되어 클라이언트 코드로 전달되었기 때문에 런타임에서 정상적으로 작동합니다.
- 프로덕션 환경에서 ReactQueryDevtools가 기본적으로 비활성화 상태라 에러가 뜨지 않습니다.

답변이 잘 이해가 안되어서 그러는데 빌드 시점에 dependencies와 devDependencies에 있는 모든 라이브러리가 설치되는건가요? 아니면 devDependencies에 있는 라이브러리라도 런타임 시점에 필요하다면 빌드 시에 설치가 되어 프로덕션 환경에 포함되는건가요?
제가 이해한 바로는, devDependencies에 있는 라이브러리더라도, 런타임 환경에서 필요한 라이브러리라면 알아서 분류하여 프로덕션 환경에 포함되도록 설치한다고 이해하였는데, 이렇게 된다면 dependencies와 devDependencies의 경계가 모호해지는 것 아닌가요?

처음끝 · Answer

감사합니다 명확하게 이해했습니다

제로초(조현영) · Answer

devDependencies도 npm i를 할 때 전부다 설치됩니다. 빌드 시점에는 설치된 패키지 중에 사용하는 것만 번들링하는 것이겠죠.

dependencies와 devDependencies의 차이는 일반적으로는 느끼기 어렵고 라이브러리를 개발할 때만 유효합니다.

A라는 라이브러리가 있고, 그걸 B라는 서비스가 쓰고 있으면 B는 A의 devDependencies는 설치하지 않습니다. 그런데 지금 처음끝님은 B의 devDependencies가 왜 설치되는지 궁금하신 것인데요. 라이브러리가 아니라 현재 프로젝트라서 그렇습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 처음끝님, 좋은 질문 감사합니다.

먼저 dependencies와 devDependencies의 차이점을 명확히 이해하셔야 하는데요:

dependencies: 프로덕션에서 애플리케이션이 실행되는 동안 필요한 패키지들입니다. 즉, 최종 사용자에게 배포됐을 때도 필요합니다.
devDependencies: 개발 환경에서만 필요한 패키지들로, 주로 코드 작성과 빌드에 필요한 도구들입니다. 테스트 라이브러리나 빌드 도구 등이 포함됩니다.

Vercel 배포와 Next.js 빌드 과정에서는, next build 명령어가 실행될 때 모든 필요한 의존성을 설치합니다. 이는 dependencies와 devDependencies 모두 포함하며, 결국 빌드된 결과물에는 런타임에 필요한 모든 코드가 포함됩니다. 이는 Next.js가 빌드 시 모든 자바스크립트 코드(런타임 의존성 포함)를 번들로 만들어 주기 때문입니다.

질문해 주신 부분에 대해 자세히 설명드리자면:

빌드 시점: Vercel이나 기타 호스팅 서비스에서 빌드를 할 때, devDependencies도 설치되지만 프로덕션 번들에는 런타임에 필요한 코드만 포함됩니다. 그래서 @tanstack/react-query처럼 런타임 의존성으로 동작하는 라이브러리도 문제없이 사용되는 것입니다.
경계가 모호하게 느껴지는 이유: 이는 주로 빌드 도구와 배포 과정에서 어떻게 의존성이 해결되는지에 따라 다를 수 있습니다. Next.js처럼 번들링을 세부적으로 다루는 프레임워크에서는 이러한 경계가 모호할 수 있지만, 코드 관리 측면에서 여전히 dependencies와 devDependencies를 구분하는 것이 좋습니다. 이는 프로젝트 명료성을 높이고, 나중에 모듈 크기 최적화 등에 도움이 됩니다.

이 질문도 유사한 맥락의 내용을 다루고 있으니 참고해 보세요:

package.json 관련해서 문의드립니다

위 링크에서는 npm i, npm i -D 명령어를 통해 각각 dependencies, devDependencies에 패키지를 추가하는 방법과 이들의 차이에 대해 간단한 설명을 제공하고 있습니다.

제가 설명드린 내용이 질문자님의 의문을 해소하는 데 도움이 되었으면 좋겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

package.json의 dependencies와 devDependencies의 차이