[JavaScript] dependencies와 devDependencies의 차이 정리

package.json 속 dependencies와 devDependencies의 차이가 뭘까? 

 

리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다.

나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다.

그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다.

 

 

그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다.

 

헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다.

 

 

 

---

 

 

   dependencies   

 

는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다.

 

리액트 같은 프레임워크를 사용하여 라이브러리를 설치하면 주로 dependencies 에 추가되던 이유가 이 이유였던 것이다.

 

 

 

 

반대로

   devDependencies   

 

는 개발 의존성으로 개발 및 테스트를 할때 필요한 패키지들을 말하는 것이다.

 

이번 미션에서 사용했던 cypress 나 eslint 등이 여기에 포함되어 있던 것이다.

 

 

 

---

 

 

 

그렇다면  코멘트에 달아주셨던

 

`eslint-import-resolver-typescript`

 

은 eslint 설정이기 때문에 dependencies 가 아니라 devDependencies 에 포함되었어야 했던 것이었다.

 

 

 

---

 

🧐 그럼 어떤 것들이 정확히 dependencies 와 devDependencies 에 들어가는 걸까?

 

💡 devDependencies에 포함되는 것들!

1. 코드 검사 및 테스트 도구:
   예를 들어 Jest, Mocha, ESLint, Prettier 과 같은 코드 품질을 유지하고 테스트를 실행하는 데 사용되는 것들
   
   
2. 타입 정의 패키지(@types):
   TypeScript 프로젝트에서 사용되는 타입 정의 패키지들 같이 주로 개발 및 빌드 시에만 필요한 것들
   
   
3. 빌드 도구 및 프로세서:
   Babel, Webpack, Parcel 등의 빌드 도구 같은 개발 및 빌드 시에만 필요한 것들

 

💡Dependencies에 포함되는 것들!

1. 실행에 필요한 라이브러리:
   어플리케이션이 실행될 때 필요한 외부 의존성 라이브러리들은 dependencies에 포함된다.
   예를 들어 React, recoil, axios, atom 등이 여기에 해당되는 것이다!
   
   
2. 런타임 환경 의존성:
   앱이 실행될 때 필요한 모든 패키지들 또한 dependencies에 포함되어야 한다. 

 

 

 

이번 코드리뷰 코멘트 덕분에 dependencies 와 devDependencies 의 차이에 대해서 알게되었던거 같다.