npm의 기초 ⭐

🎁 npm이란?

노드 패키지 매니저는 전 세계의 개발자들이 만든 다양한 기능(패키지)를 설치하고 관리하는 매니저다.

전 세계의 개발자들이 혼자, 팀 단위, 회사 차원에서 작업한 패키지를 npm 생태계에 업로드하는 구조로 원하는 패키지를 검색하여 npm install로 설치하는 것이다.

npm은 Node.js를 설치할 때 자동으로 같이 설치되므로 따로 설치할 필요는 없다.
이제 vscode에서 프로젝트 파일을 열고 터미널에서 다음을 순서대로 입력해보자.

1. npm init -y

터미널에서 npm init -y를 입력하면 package.json 파일이 생성된다.

package.json의 내용은 다음과 같다.

• name은 프로젝트의 이름을 명시하는 옵션이다.
• version은 프로젝트의 버전을 적는 옵션이다.
• description은 프로젝트에 관한 설명을 적는 옵션이다.
• main은 현재 프로젝트를 패키지로 만들어 npm 생태계에 업로드할 때 필요한 옵션으로 단순 웹사이트를 만들때는 삭제해도 된다.
• scripts는 현재 프로젝트 내부에서 사용할 수 있는 여러 스크립트 명령을 명시해놓는 옵션이다.
• keyword는 프로젝트와 관련된 키워드를 적는 옵션이다.
• author는 프로젝트의 소유주를 적는 옵션이다.
• license는 프로젝트의 라이센스를 명시하는 옵션이다.

2. npm install parcel-bundler -D

터미널에 npm install parcel-bundler -D를 입력하면 약간의 시간이 지나고 설치가 완료된다.

프로젝트 파일에 node_modules라는 폴더와 package-lock.json파일이 생성된다.

node_modules안에는 방금 설치한 parcel-bundler가 들어있다.

즉, npm install로 패키지를 설치하면 node_modules 폴더 안으로 들어가게 된다.

node_modules 안에 들어있는 모든 모듈은 하나의 패키지로 설치하지 않은 패키지들도 같이 들어있는 것을 볼 수 있는데 이는 parcel-bundler라는 패키지를 활용할 때 필요한 패키지들이기 때문이다.

parcel-bundler안에 있는 package.json에 들어가보면 dependencies옵션에 여러 패키지들이 명시돼 있다.

처음에 만들었던 package.json에 다시 들어가보면 devDependencies 옵션이 생성되고 parcel-bundler가 명시된 것을 볼 수 있다.

3. npm install lodash

터미널에 npm install lodash를 입력하면 package.json의 dependencies 옵션에 lodash가 명시된 것을 볼 수 있다.

즉, npm install을 하면 패키지가 설치되고 node_modules 폴더로 들어가는데 그 내역이 package.json의 dependencies 옵션에 명시되는 것이다.

혹시 node_modules 폴더를 실수로 삭제해도 package.json의 dependencies에는 내역이 그대로 남는다.

따라서 터미널에서 npm install (npm i)을 입력하면 package.json 내용을 바탕으로 다시 한 번에 node_modules를 설치할 수 있다.

특정 패키지를 설치하면 package-lock.json파일이 설치되는데 여기에는 package.json에 명시된 모듈들이 내부적으로 사용하는 또 다른 모듈 또는 패키지에 대한 정보가 자동으로 들어가게 된다.

이름에 lock이 있듯 내가 직접적으로 관리할 필요가 없다.

💥node_modules은 삭제해도 언제든 다시 설치할 수 있지만 package.json과 package-lock.json는 절대로 삭제되어서는 안된다.💥

🤔 -D는 뭐지?

설치할 때 뒤에 -D를 붙이면 devDependencies에 설치되고 붙이지 않으면 dependencies에 설치가 되는데 차이는 다음과 같다.

-D를 붙이면 개발용 의존성 패키지 설치로 나중에 웹브라우저에서는 필요하지 않다는 의미이다.

붙이지 않으면 일반 의존성 패키지로 실제 웹브라우저에서도 동작할 수 있음을 전제로 하는 것이다.

즉, 패키지를 설치할 때 개발할 때만 사용할 것인지 실제 웹사이트에서 동작하는 용도인지를 구분하여 설치해야 한다.

따라서 앞서 설치한 parcel-bundler는 개발용으로 설치한 것이고 lodash는 실제 웹사이트에서 동작시키는 용도라고 볼 수 있다.