can't resolve 'styled-components' (feat : npm --save)

Next.js프로젝트에 tailwind와 styled-components 설치 후 서버를 실행시켰더니

can't resolve 'styled-components'

can't not find modules 모듈을 찾을 수 없다는 에러발생.

typescript 사용중이라 처음에 이 명령어로 설치를 했는데

$ npm i --save-dev @types/styled-components

뭐지 순정버전으로도 깔아줘야되나 싶어서 또 아래 명령어로 설치했더니

$ npm i styled-compoments

에러만 잔뜩 띄워주고 안깔아줌.

---

--save를 붙여주니 해결되었다.

$ npm install --save styled-components

이 둘의 차이가 뭘까

npm install --save styled-components
npm i --save-dev @types/styled-components

npm이란?

npm은 JavaScript용 패키지 관리자로 npm을 사용하면 다른 개발자가 공유한 코드를 쉽게 재사용할 수 있다.

📌 npm install

패키지(plugin)을 ./node_modules 디렉터리에 저장한다.

※ npm 5버전부터는 --save옵션을 쓴 것과 똑같이 ./package.json 파일의 dependencies 항목에 패키지 정보가 저장된다.

📌 npm install --save

1. 패키지(plugin)을 ./node_modules 디렉터리에 저장
   + ./package.json 파일의 dependencies 항목에 패키지 정보가 저장
   
   
2. --production 빌드 시 해당 패키지가 포함
   
   
   ※ npm 5버전부터는 install까지만 입력해도 --save의 기능이 동작한다.
   npm install = npm install --save

📌 npm install --save-dev(= --save-D)

1. 패키지(plugin)을 ./node_modules 디렉터리에 저장
   + ./package.json 파일의 devDependencies 항목에 패키지 정보가 저장
   
   
2. --production 빌드 시 해당 패키지가 포함되지 X

📌 npm install -global(= -g)

패키지(plugin)을 프로젝트가 아닌 시스템의 node_modules에 추가

---

dependencies와 devDependencies의 차이

• dependencies : 애플리케이션 동작과 직접적으로 연관된 라이브러리 설치
• devDependencies : 개발시 필요한 라이브러리 설치
  ex) eslint, prettier, webpack 등

devDependencies에 포함된 라이브러리는 실제 배포할 때는 포함되지 않기 때문에 빌드 시간을 줄일 수 있다는 장점이 있다.