package.json의 dependencies와 devDependencies의 차이
150
3 asked
강의 잘 듣고 있습니다. 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 3
0
devDependencies도 npm i를 할 때 전부다 설치됩니다. 빌드 시점에는 설치된 패키지 중에 사용하는 것만 번들링하는 것이겠죠.
dependencies와 devDependencies의 차이는 일반적으로는 느끼기 어렵고 라이브러리를 개발할 때만 유효합니다.
A라는 라이브러리가 있고, 그걸 B라는 서비스가 쓰고 있으면 B는 A의 devDependencies는 설치하지 않습니다. 그런데 지금 처음끝님은 B의 devDependencies가 왜 설치되는지 궁금하신 것인데요. 라이브러리가 아니라 현재 프로젝트라서 그렇습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 처음끝님, 좋은 질문 감사합니다.
먼저 dependencies와 devDependencies의 차이점을 명확히 이해하셔야 하는데요:
dependencies: 프로덕션에서 애플리케이션이 실행되는 동안 필요한 패키지들입니다. 즉, 최종 사용자에게 배포됐을 때도 필요합니다.devDependencies: 개발 환경에서만 필요한 패키지들로, 주로 코드 작성과 빌드에 필요한 도구들입니다. 테스트 라이브러리나 빌드 도구 등이 포함됩니다.
Vercel 배포와 Next.js 빌드 과정에서는, next build 명령어가 실행될 때 모든 필요한 의존성을 설치합니다. 이는 dependencies와 devDependencies 모두 포함하며, 결국 빌드된 결과물에는 런타임에 필요한 모든 코드가 포함됩니다. 이는 Next.js가 빌드 시 모든 자바스크립트 코드(런타임 의존성 포함)를 번들로 만들어 주기 때문입니다.
질문해 주신 부분에 대해 자세히 설명드리자면:
빌드 시점: Vercel이나 기타 호스팅 서비스에서 빌드를 할 때,
devDependencies도 설치되지만 프로덕션 번들에는 런타임에 필요한 코드만 포함됩니다. 그래서@tanstack/react-query처럼 런타임 의존성으로 동작하는 라이브러리도 문제없이 사용되는 것입니다.경계가 모호하게 느껴지는 이유: 이는 주로 빌드 도구와 배포 과정에서 어떻게 의존성이 해결되는지에 따라 다를 수 있습니다. Next.js처럼 번들링을 세부적으로 다루는 프레임워크에서는 이러한 경계가 모호할 수 있지만, 코드 관리 측면에서 여전히
dependencies와devDependencies를 구분하는 것이 좋습니다. 이는 프로젝트 명료성을 높이고, 나중에 모듈 크기 최적화 등에 도움이 됩니다.
이 질문도 유사한 맥락의 내용을 다루고 있으니 참고해 보세요:
위 링크에서는 npm i, npm i -D 명령어를 통해 각각 dependencies, devDependencies에 패키지를 추가하는 방법과 이들의 차이에 대해 간단한 설명을 제공하고 있습니다.
제가 설명드린 내용이 질문자님의 의문을 해소하는 데 도움이 되었으면 좋겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
79
2
깃에 소스코드를 찾을 수 없습니다.
0
116
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
100
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
113
2
css 라이브러리 추천 부탁드립니다
0
144
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
135
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
121
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
175
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
189
3
폴링이 필요없는 이유
0
96
2
next Request Memoization과 react cache
0
112
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
87
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
174
2
프레임워크 여론 파악법
0
127
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
106
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
106
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
69
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
134
2
next.js 에서 로그인에 관하여
0
141
1
Next의 route handler에 대한 질문이 있습니다.
0
102
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
102
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
87
2
vanilla-extract 못찾는 문제
0
233
2
fetch 캐싱과 revalidate 관련
0
89
2