dependencies와 devDependencies 차이점과 이유

npm 설치

--save-prod

npm i jquery --save-prod

우리는 보통 "--save-prod"는 생략하고 npm을 설치한다. 생략을 하고 설치해도 자동으로 "--save-prod"가 붙기 때문에 생략해도 된다.

이렇게 설치한 라이브러리, 패키지는 package.json의 "dependencies"에 저장이된다.

 

--save-dev(-D)

npm install jquery --save-dev
npm i jquery -D

개발을 하다보면 가끔 "--save-dev"나 "-D"를 붙여서 설치하는 경우가 있었다. 하지만 이것이 어떠한 역할을 하는지는 잘 몰랐다.

우선 위에 있는 코드는 모두 같은 코드이다. "--save-dev" 대신 "-D"를 써도 되는 것이다. 

이렇게 설치한 라이브러리, 패키지는 package.json의 "devDependencies"에 저장이된다.

"dependencies" vs "devDependencies"

"dependencies"(배포용)

이곳에는 웹 화면에 영향을 끼치는 라이브러리, 패키지들을 설치해야한다. 

ex) react, vue, angular 등

"devDependencies"(개발용)

이곳에는 웹 화면에 영향을 주지 않고 개발을 도와주는 개발 보조 라이브러리, 패키지들을 설치해야한다.

ex) webpack, sass 등

2개로 나눠서 구분하는 이유

모든 라이브러리, 패키지를 dependencies(배포용)에 설치해도 문제는 안된다. 하지만 너무 많은 라이브러리, 패키지가 배포용에 있다면 빌드하는 과정에서 많은 시간을 소모할 것이다. 따라서 웹 화면에 영향을 끼치지 않는 개발 보조 라이브러리, 패키지들은 devDependencies(개발용)에 설치하는 것이 좋다.