[Node.js] NPM (Node Package Manger) 패키지 관리 시작 / 설치 / 삭제

 

[Node.js] Node.js란? / 개발 환경 세팅 / Node.js 설치

여기서 말 하는 패키지는 html에서 가져와서 사용하던 라이브러리를 생각하시면 되는데요.

다들 첫 번째 웹 프론트엔드 프로젝트 때 Swiper를 그렇게 많이 사용했잖아요. 그런 라이브러리랑 비슷한건데,

Node.js Package는 마치 택배를 받는 것처럼 도서관에서 빌리는게 아니라 직접 컴퓨터에 설치하여 사용합니다!

 

 

이렇게나 많은 패키지가 존재한다고 하는데,

바로 이러한 패키지를 관리하는 것이 NPM (Node Package Manger) 입니다.

 

프로젝트를 위해 어떤 패키지를 설치해야 할까요? 패키지 버전에 따라 충돌이 발생할 수 있지 않을까요?

이러한 문제를 하나의 JSON 파일로 관리해준답니다. (JSON 파일은 차차 아래에서 설명하도록 할게요.)

 

 

NPM은 Node Package Manger의 약어로 우리가 자바스크립트로

어떠한 애플리케이션을 개발할 때 다양한 모듈이 필요한데요. 

NPM은 이러한 모듈을 쉽게 다운받을 수 있도록 해주는 도구입니다.

 

 

예를 들어서, 우리 애플리케이션에 '2023년 3월 7일' 이라는 날짜를 표시한다고 가정해볼게요.

그러면 자바스크립트로 이렇게 코딩을 함으로써 아래와 같이 표현할 수 있습니다. 

 

 

하지만  '2023년 3월 7일 15시 23분 9초' 이러한 포맷을 해야한다면,

자바스크립트 코드는 아래와 같이 길어지겠죠.

 

 

만약에 포맷의 종류가 '2022년 3월 7일', '2022년 3월 7일 15시 24분 22초', '2022/03/06', '2022. 3. 6'

이런식으로 또  다양하다면, 단순히 날짜를 표현하는 기능이라고 할지라도 그 복잡도는 더더욱 증가할 것입니다.

그리고 매번 프로젝트를 진행할 때마다 같은 코드를 반복해야 한다면, 매우 비효율적이겠죠.

 

 

그래서 개발자들은 자주 사용하는 이러한 기능을 모듈화 한 후 이러한 모듈을 다른 프로젝트에서

편하게 다운받아 사용할 수 있도록 모듈 저장소 라는 공간에 공유를 하는 것입니다.

 

 

그리고 우리는 이러한 모듈을 그때 그때 다운받아 사용하는 것입니다.

 

 

이 때, 이러한 모듈을 쉽게 다운받을 수 있도록 도와주는 도구가 바로 npm, 노드 패키지 매니저!

참고로 언급드리면, 모듈 = 라이브러리 = 패키지 이러한 용어는 큰 의미에서 같은 용어라고 보시면 될 것 같아요.

 

 

[Node.js] Node.js란? / 개발 환경 세팅 / Node.js 설치

 

 

자, 그러면 이제 본격적으로 npm 사용법에 대해서 알려드릴게요. npm을 사용하려면, 우선 설치부터 해야겠죠.

npm은 Node.js 설치 시 자동으로 설치가 됩니다. (이전 포스팅 참고) 따라서 npm을 사용하기 위해서는 Node.js를 설치해야해요!

 

 

Node.js는 자바스크립트 런타임 환경입니다. 우리가 자바스크립트를 이미 배웠지요.

자바스크립트는 웹브라우저에서 실행하게 되면, 이것은 웹 애플리케이션이 되는 것이고,

자바스크립트를 Node.js 환경으로 실행하게 되면, 이것은 백엔드 애플리케이션이에요.

이렇게 Node.js는 자바스크립트 런타임 환경이라고 보시면 될 것 같습니다.

 

 

Node.js 설치가 잘 되었는지 터미널로 가셔서 node -v 입력하여 확인 한 번 해주시고,

마찬가지로 npm -v 를 하게 되면, npm version이 위와 같이 잘 나오는 것을 확인할 수 있습니다!

 

 

그리고 VS Code 툴에서도 한 번 버전을 출력을 해보겠습니다. 버전이 잘 나오는 것이 확인이 돼요.

그러면 npm으로 라이브러리, 즉 모듈을 어떻게 다운로드 하고 이 프로젝트를 관리하는지 바로 실습해볼게요.

 

 

저는 실습을 하기 위해서 LEARN-NPM 이라는 디렉토리를 생성을 했구요. 그 안에다가 package.json 이라는

파일을 생성해주세요. 그리고 안에 위와 같이 입력해줍니다. 그리고 날짜 표현을 쉽게 도와주는 패키지를 설치해볼게요.

 

 

패키지 라이브러리 모듈 다 동일한 말이죠! npm install dayjs 이렇게 패키지 명을 입력해주면 됩니다.

그러면 지금 node_modules라는 폴더가 자동으로 생성이 되었고, package-lock.json 그리

 

 

package.json 안에 dependencies 라는 속성으로 dayjs 라이브러리가 이렇게 표시가 된 것을 확인할 수 있습니다.

이러한 속성이나 파일과 같은 것들은 잠시 후에 살펴보기로 할거고, 라이브러리를 검색해서 다운받을 수 있는 사이트가 있어요!

 

npm

 

npmjs.com 이라는 사이트인데요. 이 사이트는 npm 라이브러리를 공유해놓은 사이트에요.

여기서 dayjs 라는 라이브러리를 검색해보면 이 라이브러리에 대한 정보가 상세하게 나오고 있습니다.

 

 

그리고 우측에 보시면 설치 명령어도 나오고 있답니다. 저기서 i 는 install을 줄여서 표현한 것 입니다.그리고 라이브러리에 대한 깃 리포지토리, 홈페이지, 그리고 주간 다운로드 수, 버전 등 다양한 정보를 확인할 수 있어요!

 

 

그리고 day.js.org 홈페이지를 클릭해서 라이브러리를 어떻게 사용하는지 잠깐 살펴보도록 할게요.GET STARTED 를 클릭하고, Installation 화면이 뜨는데 우리가 설치는 진행했기 때문에,바로 표시하는 법을 사용해보도록 할게요. Display → Format 클릭해줘요.

 

 

라이브러리를 가져온 후에 음영 친 포맷으로 라이브러리를 사용할 수 있는데요.index.js 를 생성해주고, 일단 라이브러리를 가져와보도록 하겠습니다.

 

 

require 해서 dayjs 가져오면 됩니다. 그리고 방금 복사한 것을 console.log에 붙여넣기 하여 바로 출력해봅니다.실행은 node index.js 파일을 실행해주니 위와 같이 이렇게 출력이 되는 것을 확인할 수 있습니다.

 

 

다른 포맷으로도 한 번 출력을 해볼게요. 오늘 날짜로 해보기 위해 dayjs() 이렇게 공란을 줬고요.아래와 같이 날짜가 오늘 날짜로 잘 출력이 되는 것을 확인할 수 있습니다.

 

 

require로 해서 모듈로 가져오실 때 그냥 이렇게 dayjs 입력하게 되면, node_modules 디렉토리를 참고한다.

node_modules 디렉토리를 이렇게 열어보시면 다운로드 받은 라이브러리(dayjs)가 이렇게 안에 있는걸 확인할 수 있답니다!

require에서 이렇게 다이렉트로 dayjs 라이브러리 접근하게 되면, 디폴트로 node_modules 디렉토리를 참고하는겁니다.

 

 

---

 

package.json / node_modules 디렉토리 / package-lock.json

 

---

 

package.json

 

우선 package.json 은 npm으로 프로젝트를 관리할 때 반드시 필요한 필수 파일인데요.

프로젝트를 위해 어떤 패키지를 설치 하냐에 따라, 패키지 버전에 따라 충돌이 발생할 수 있잖아요.

이러한 문제를 하나의 JSON 파일로 관리해주는 것인데요.

 

package.json 파일은 프로젝트에 대한 정보를 갖고 있는 파일입니다.

그리고 dependencies와 같은 속성을 활용하여 프로젝트에 의존하는 라이브러리를 관리할 수 있습니다.

 

그리고 이러한 파일은 조금전에 직접 작성한 것처럼 직접 생성할 수도 있고,

npm init 명령어를 통하여 자동으로 생성할 수 있답니다. 한 번 npm init 명령어를 통해서 자동 생성 해볼게요!

 

 

모든 파일을 이렇게 다 지워주시구요.

 

 

npm init 하고 Enter를 클릭하게 되면, 프로젝트 명을 이렇게 입력하라고 나옵니다. (package name: (learn-npm) l

그리고 차례대로 Enter를 쭉 쭉 눌러주니, version, dexcription 등 프로젝트 정보를 입력하라는 명령어가 나오는데요.

 

 

위와 같이 계속해서 입력 해보도록 하겠습니다. "description"에 "npm 실습 프로젝트" 라고 입력해주고,

그리고 다 기본적으로 디폴트 설정으로 Enter를 클릭해보도록 하겠습니다. 그러면, 아까와 같이

package.json 파일이 생성된 것을 확인할 수 있습니다. 파일을 클릭하니 기본 정보도 저렇게 다 노출되어 있지요.

 

 

마찬가지로 터미널에 npm install dayjs 쳐서 dayjs 라는 라이브러리를 설치 해볼게요.

그러면 아까와 마찬가지로 dependencies에 이러한 라이브러리 파일이 잘 설치가 되었다는 것을 확인할 수 있습니다.

( * 패키지 삭제는 npm uninstall dayjs 라고 입력하시면 됩니다.)

 

 

출처: https://youtu.be/wQ-KLcIX6l4

 

간단히 속성을 설명 드리자면, 위와 같은데요. 부가적으로 더 설명을 얹자면,

 

version에서 '주로 3단계 버전을 사용한다.' 라는 뜻은

1.0.0 이런 식으로 사용한다는 소리 입니다. 숫자가 3개 있지요.

description 에는 알기 쉽게 서술해놓으면, 이 패키지가 어떤 패키지인지 한 눈에 파악할 수 있겠죠.private 속성은 이 소스를 공유 안하겠다는 소리 입니다.

 

scripts는 프로젝트에서 자주 실행하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능한데,이 부분은 엄청 자주 사용하기 때문에 한 번 실습을 해볼게요.

 

 

npm run 하고 "test" 라는 이 key를 입력해주시고, 그 다음 뒤에 있는 스크립트문이 실행이 됩니다.그러면 똑같이 잘 출력이 되는 것을 확인할 수 있습니다.

 

 

echo는 터미널에 문자열을 출력하는 그런 명령어라고 보시면 될 것 같구요.echo hello world 한 번 출력을 해보니 이렇게 'hello world'가 잘 출력이 됩니다.'

 

 

예를 들어서 우리 프로젝트에서 이런 명령어를 자주 사용한다고 가정해보고 새로 입력해볼게요.그러면 npm run start 하게 되면, 이렇게 명령어가 잘 출력이 되는 것을 확인할 수 있답니다.이러한 명령어는 프로젝트를 실행하거나 빌드할 때 자주 사용하기 때문에 잘 알아두시면 좋을 것 같습니다.

 

 

그리고 start 명령어 같은 경우에는 npm start 를 이렇게 바로 실행할 수 있습니다.start는 좀 특이한 명령어 입니다. 그러면 이렇게 실행이 잘 되는걸 확인할 수 있습니다.

 

그리고 package.json 에서 정말 중요한 두 가지 속성, dependencies / devDependencies !devDependncies 같은 경우에는 개발할 때만 사용하는 모듈이에요.

 

예를 들어, A B C D E 라는 모듈이 있어요. 그런데, E 라는 모듈을 개발할 때만 사용하고,

우리가 실제로 운영할 때는 필요가 없어요. 그러면 굳이 이 E 라는 모듈까지 배포할 필요가 없겠죠.

나머지 4개만 배포하며 되겠죠. 그 때, E라는 모듈은 devDependncies에 기술을 하구요.

A B C D 실제로 운영할 때도 사용한 모듈은 dependencies 라는 속성에 기술을 합니다.

 

 

이 부분을 한 번 알아보도록 할게요. 몇가지 더 설치를 진행해 볼건데요.

같은 날짜 관련 라이브러리인 moment를 설치해보도록 하겠습니다. npm i moment

그러면 이렇게 라이브러리가 설치된 것을 확인할 수 있습니다.

 

 

그리고 nodemon 이라는 라이브러리가 있는데요. 이 라이브러리는 개발할 때만 사용할거기 때문에,

devDependncies에다 설치를 해보도록 하겠습니다. npm install --save-dev nodemon

이렇게 --save-dev 라는 옵션을 입력하니, devDependncies에 이렇게 자동으로 기술이 된 것을 확인할 수 있습니다.

 

이렇게 우리가 개발할 때 필요한 라이브러리는 devDependncies 그리고,

운영할 때도 필요한 라이브러리는 dependencies 이러한 속성에 기술함으로써

개발과 운영에 필요한 라이브러리를 나눌 수 있습니다. 

 

https://docs.npmjs.com/cli/v9/configuring-npm/package-json

package.json | npm Docs

 

속성은 이러한 속성 말고도 다양한 속성이 있는데요. npmjs 공식 홈페이지를 보시면,

다양한 속성들이 있기 때문에 만약에 더 알고 싶으신 분들은 이 사이트를 참고하시면 될 것 같습니다!

 

---

node_modules 디렉토리 (폴더)

 

node_modules 디렉토리에는 package.json에 설치된 모듈 뿐만 아니라,package.json에 있는 모듈이 의존하고 있는 (package-lock.json) 모듈 전부가 설치된 디렉토리이다.

 

 

이번에는 node_modules 폴더를 살펴보도록 하겠습니다. node_modules는 방금 전에 보셨던 것처럼

우리가 사용할 라이브러리가 실제로 설치된 폴더라고 보시면 됩니다. 지금 실제로 우리가 설치한 라이브러리는

dayjs, moment, nodemon 이렇게 3개인데 엄청나게 많은 라이브러리들이 있는게 보이시죠.

node_modules는 이 프로그램에서 필요로 하는 라이브러리가 설치된 경로라고 보시면 될 것 같습니다.

 

 

---

package-lock.json

 

그리고 package-lock.json 이 파일은 프로젝트에 설치된 모듈들의 의존성 트리를 기록하고 있으며,이게 어떤 말이냐 하면 예를 들어 우리가 A라는 프로젝트를 개발하려고 합니다. (A 라는 사이트)

 

여기에서는 a.js 이런 라이브러리가 필요하고, 그리고 b.js 이런 라이브러리가 필요합니다.그런데, b.js 라는 라이브러리에서는 또 다른 라이브러리를 사용하고 있어요.예를 들어, b-1, b-2 그리고 b-2 라이브러리에는 또 다른 라이브러리인 c-1, c-2 등등을 사용할 수 있겠죠.

 

이렇게 라이브러리들 간에는 의존관계를 가지고 있어요.의존관계 라는 것은 b.js가 실행되기 위해서는 b-1이 있어야 된다는거에요.의존이 되어있기 때문에 반드시 A 프로젝트에서 b.js 라는 라이브러리를 사용하기 위해서는b-1, b-2, c-1, c-2 이 라이브러리를 모두 갖고 있어야 합니다.

 

 

이렇게 의존성 정보를 갖고있는 그러한 파일을 package-lock.json 이라고 보시면 될 것 같습니다.안에 내용물들을 한 번 보시면, 굉장히 많이 들어있지요.

 

 

require 로 검색을 해보면, 예를 들어 이러한 http-timer 모듈에는"defer-to-connect": "^1.0.1" 이러한 라이브러리가 필요하다는 것을 알 수 있습니다.

그렇기 때문에 모든 라이브러리가 node_modules 디렉토리에 같이 설치가 된 것입니다.

 

그래서 다시 한 번 말씀드리면 package-lock.json은 프로젝트의 설치된 모듈들의 의존성 트리를 기록하고 있으며,

package-lock.json 파일을 참고하여 node_modules 디렉토리 안에 모듈을 다운받습니다.