01. NPM 개요

NPM(Node Package Manager)
전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리

패키지: 누군가 만들어놓은 기능을 우리의 프로젝트에 연결하여 완성할 수 있다.
ex) Material Icons, Lodash, GSAP, SWIPER

링크태그, 스크립트 태그로 원시적으로 연결하는 것도 포함됨
npm으로 각 패키지들을 직접 설치하고 관리하면서 동작시켜주면서 방법을 이해하고 공부해야함
학습의 난도 증가, 구성이 복잡 → 관리 효율 증가, 손쉬은 기능 고도화

02. NPM 프로젝트 시작, package.json

💡 터미널 명령 다 지우는 방법

maxOS: Cmd + K 단축키
Windows: 터미널에서 clear 혹은 cls 입력

프로젝트 초기화

npm init

아래에서 묻는 기본적인 질문을 생략하고 package.json을 생성할 수 있음

npm init -y

package name: (현재 폴더명)

그대로 엔터를 치면 현재 폴더명으로 프로젝트가 생성되고 새로운 이름을 만들고 싶다면 입력하면 된다.

version: (1.0.0): 으로 시작할 건지 묻는 의미, 다른 버전으로 시작하고 싶다면 입력

description: 프로젝트 설명

entry point: (index.js): 진입점, 우리가 프로젝트를 외부에 공개하는 용도로 사용하지 않을 것이라 엔트리 포인트가 필요하지 않아서 그냥 엔터

나머지 그냥 다 넘어감

생성할 것인지 묻는데 엔터치면 됨

그러면 package.json 파일이 입력된 값에 맞게 생성된다.

외부 패키지 설치해보기

npm install [설치할 패키지]

자동으로 node_modules와 package-lock.json이 생성되고 package.json 파일에는 자동으로 dependencies라는 옵션으로 lodash 버전이 표시된다.

node_modules폴더 안에는 lodash관련 파일이 설치된다.

npm install [설치할 패키지] --save-dev(-D(대문자)로 축약할 수 있음)

parcel: lodash같은 여러가지 패키지들을 웹사이트에 올라갈 수 있는 구조로 하나로 묶어주는 역할을 한다.

이것을 번들러(Bundler)라고 한다. 이것은 웹사이트에서 실제로 동작하는 것은 아니기 때문에 --save-dev라는 플래그를 붙여서 개발용으로만 설치해야한다.

dependencies는 패키지에 의존해서 프로젝트가 동작하고 있다는 의미

dependencies: 일반 의존성

devDependencies: 개발용 의존성 (개발 의존성)

package-lock.json 파일은 설치한 패키지가 의존하고 있는 또 다른 패키지 등 서로의 연결관계를 모두 기록해놓은 파일

node_modules 폴더는 지워져도 package.json과 package-lock.json 파일을 통해서 다시 설치할 수 있다. 따라서, package.json과 package-lock.json은 지워지지 않도록 주의해야함. 특히, package.json