npm이란?
npm은 Node Package Manager로 전 세계 노드 개발자들이 만든 기능(패키지, 모듈)을 사용할 수 있습니다.
npm은 node.js를 설치할 때 자동으로 설치가 됩니다.
- package.json
vscode 터미널에서
npm init -y라는 명령어를 사용하면package.json이라는 파일이 폴더에 생성된다. 이 파일은 사용자의 정보나 라이센스, 버전을 수정할 수 있습니다.
- npm install
npm install+설치할 패키지를 통해서 npm 생태계 안에서 다양한 패키지,모듈을 설치할 수 있다.
- parcel bundler
먼저
npm install parcel-bundler -D라는 명령어를 터미널에 입력하면 parcel bundler라는 패키지를 설치할 수 있습니다. 같이 설치되는 node_modules에 있는 폴들은 parcel bundler를 사용할 때 같이 필요한 패키지들이고, 자동으로 같이 설치가 됩니다.
💡 package.json 에 devDepndencies, Depndencies를 보면 설치된 패키지들을 볼 수 있습니다.
이렇게 설치된 파일을 볼 수 있을 때 장점은 node_modules 폴더가 삭제되어도 package.json에 있는 설치된 패키지 내역을 보고 npm install을 해주면 내역에 있는 모든 패키지들이 다시 설치가 됩니다. npm i 로 작성해도 됩니다. (install의 약어)
추가로 설치된 따로 설정을 하지 않아도 package-lock.json은 자동으로 관리됩니다.
- lodash
npm install lodash를 통해서 설치할 수 있습니다.
💡 여기서 parcel bundler를 설치할 때와 다르게 -D를 붙이지 않은 이유는?
- -D 가 붙어서 설치하는 패키지는 개발용 의존성 패키지입니다. 개발할 때만 필요하고 웹브라우저에서 동작할 때 필요하지 않습니다.
- -D 가 없이 설치하는 패키지는 일반 의존성 패키지입니다. 웹브라우저에 동작할 때 필요하다 라고 표시해주는 것 입니다.
- 서버 연결
1."dev"
이렇게 필요한 패키지들을 설치하고 나서
package.json안에"script"라는 항목이 있습니다. 여기에 있는"test"은 필요가 없으니 지워주시고,"dev": "parcel index.html"를 작성해 줍니다. 이렇게 작성해주면 우리 프로젝트 내부에서 이 명령이 동작하게 설정된다는 의미를 가지고 있고, 로컬 환경에서 개발용으로 프로젝트를 확인할 수 있습니다.
2."build"
package.json안에 있는"script"에"build": "parcel build index.html"를 작성해 주면, 사용자가 실제로 보는 용도로 출력을 할 수 있습니다.
💡 npm run build를 하면 코드파일들을 난독화로 만들어 줍니다. 왜냐하면 사용자에게 보여주는 용도라서 웹브라우저만 읽으면 되기 때문입니다.
3. 로컬 개발 서버
이렇게 모든 세팅이 완료가 된다면, 터미널을 통해서
npm run dev를 통해 실시간으로 프로젝트를 개발하면서 볼 수 있는 로컬 개발 서버를 열 수 있습니다.
