--dev, -D 같은 devDependency를 왜 사용할까?

우리는 라이브러리를 설치할 때 -D 또는 --dev를 붙여서 설치하는 경우가 있습니다.

예를들어

yarn add -D @types/styled-components

 

왜 -D를 붙여서 설치하라고 권장할까?

 

그전에 우리는 빌드라는 것에 대해 알아야합니다.

리액트를 cra로 설치한 후

yarn build 또는 npm run build

라는 명령어를 입력하게 되면 가장 상위에 build라는 폴더가 생기는 것을 확인할 수 있습니다.

 

 

하지만 이 build라는 폴더는 node_modules처럼 기본적으로 .gitignore에 등록되어 깃허브에 올리지 않는 폴더로 구분되며 필요없어 보입니다.

 

하지만 개발한 프로젝트를 배포할 때 이 build라는 폴더는 없으면 안되는 중요한 녀석이 됩니다.

그 이유는 react가 없는 환경에서도 실행할 수 있는 js파일을 만들어주기 때문입니다.

 

build한 폴더의 js파일을 보면 한줄로 길게 늘어진 코드가 나오거나 들여쓰기가 안된 자바스크립트 코드가 보일 텐데요. 이는 번들러에 의해 uglyfy된 코드이기 때문입니다.

 

build 폴더에 있는 index.html파일을 열어보면

위와 같이 열리는 것을 볼 수 있습니다.

 

즉 react를 html,css,javascript파일로 변경 후 어디서든 열어볼 수 있도록 build하는 파일이라는 것을 확인할 수 있습니다.

 

 

 

 

다시 돌아가서 -D 또는 --dev를 사용하는 이유는 빌드 폴더에 라이브러리를 포함하지 않기 위해서입니다.

yarn add -D @types/styled-components를 예로 들어 설명했는데요.

개발할 때 typescript로 개발할 때 styled-components에서 제공하는 모듈을 사용하기 위해선 type들을 알아야하지만

배포하고 실행할 땐 이 type들은 필요없게 됩니다.

 

그렇다는 것은 필요없는 자원을 사용하는 것일테고 곧 성능저하와 관련이 있다고 합니다.

번들사이즈를 최소화하기 위해 배포할 때 필요없는 라이브러리들을 -D나 --dev를 붙여 설치한다고 합니다.

 

위와 같이 devDependencies와 dependencies 같이 나눠 package.json에 표시됩니다.