devDependency 와 dependency의 정확한 차이가 궁금합니다.

Question

어떤 라이브러리는 개발 의존성으로 설치하고, 어떤 라이브러리는 일반 의존성으로 설치하라고 합니다.그 기준을 모르겠어서 찾아보면, 이렇게 설명합니다.개발 과정에서 사용되는 것은 devDependency, 프로덕션 과정에서 사용되는 것은 dependency대표적인 개발 의존성으로 설치하는 라이브러리인 lint, prettier 등은 간단히 이해됩니다.다만 &#34;프로덕션 과정&#34;에 대한 정확한 이해가 부족한 것 같습니다.저는 React로 생성한 프로젝트를 빌드하면 생성되는 정적 html, css, js파일을 만들기 직전까지가 개발 과정이라고 생각했습니다.이후 해당 정적파일을 배포하는 것이 프로덕션 과정이라고 생각합니다.그렇다면 react, styled-components, react-router-dom 등 모든 라이브러리가 동작하는 방식이 js로 변환되어 포함이 됐을텐데, 이후 런타임 환경에서 동작하는 라이브러리(dependency에 설치한 라이브러리)가 존재한다는 것이 이해가 잘 되지 않습니다.https://okky.kr/questions/663318저와 비슷한 질문글이 있어서 공유합니다.제가 A프로젝트를 생성한 후 빌드한 build파일과, 동일한 프로젝트에 'styled-components'를 일반의존성으로 설치한 build파일의 크기가 동일해서 라이브러리가 런타임에 어떤 영향을 미치는지, 빌드된 파일의 크기가 왜 늘어나지 않는지도 잘 모르겠습니다.

Clickin · Answer

빌드과정에 대한 이해가 필요한 것 같습니다Dependency 와 devDependency는 최종 결과물에 포함되느냐 마느냐입니다.자바스크립트는 일반적으로 번들링이라고 표현하는데요이 번들링 과정에서 dev는 트리 쉐이킹이나 기타 방법을 통해 최종 결과물에 포함되지 않고런타임에 사용되어야하는 디펜던시는 합쳐진 번들링 js 파일에 포함되니 당연히 크기가 같은겁니다.디펜던시로 라이브러리를 사용한다는 건 원하는 동작을 해당 라이브러리에게 위임한다는 의미를 내포하는데런타임에 라이브러리가 포함되지 않는다면 당연히 그 동작을 해줄 코드가 포함되지 않았으니 원하는 동작이 실행되지 않을겁니다.

세브라이드 · Answer

정확한 표현은 dependency: 런타임 시점에도 필요한 라이브러리 devDependency, peerDependency...: 그 외 입니다. 런타임때 괜히 포함되어서 번들 파일 용량 늘리기 싫을때 devDependency에 넣으면 됩니다. 옛날은 저렇게 해줘야 제외가 되었어서 저런 문법이 필요했는데 요새는 런타임시에 필요하지 않으면 알아서 번들 파일에서 제외됩니다. ㅋ 그래서 해외에서는 크게 구분 안해요. 해외 레포들 보면 lint, prettier도 dependency에 있고 그렇습니다.

devDependency 와 dependency의 정확한 차이가 궁금합니다.

2개의 답변

Q&A 목록