NPM이란?
javascript로 애플리케이션을 개발할 때 다양한 모듈이 필요하다. npm은 이러한 모듈을 쉽게 다운받을 수 있게 하는 도구이다.
예를들어 포맷별로 날짜를 출력하는 함수는 여러 프로젝트에서 다양하게 사용된다. 여러 포맷을 모두 표현 가능하게 하려면 소스의 복잡도가 늘어나는 것은 물론, 매번 프로젝트를 진행할 때마 동일한 js를 반복하여 생성해야 한다. 이러한 비효율적인 과정을 줄이기 위해 자주사용하는 js를 모듈화 한 후, 모듈 저장소에 공유해두면 필요할 때마다 다른 프로젝트에서 다운받아 사용할 수 있다. 이 때 모듈을 쉽게 다운받을 수 있도록 도와주는 도구가 바로 npm이다. (모듈, 라이브러리, 패키지는 비슷한 의미이다.)
NPM 설치
npm은 Node.js 설치시 자동으로 설치된다. http://node.js.org에서 Node.js를 설치할 수 있다. Node.js란 Chrome V8 Javasscript 엔진으로 빌드된 Javascript 런타임 환경이다. 우리가 javascript를 웹브라우저에서 실행하면 웹 애플리케이션이 되고, Node.js 환경에서 실행하게되면 백엔드 애플리케이션이 된다. 설치 완료 후 node와 npm 버전을 확인해본다.
~ % node -v
~ % npm -v
어떠한 모듈을 다운받고 싶을 때에는 아래와 같이 입력하면 된다. 설치된 후에는 package.json에 dependencies가 추가되며, 다운받은 모듈의 버전이 기재된다. 다운받은 모듈은 node_modules 경로 하위에 생성된다.
~ % npm install dayjs
다운받은 모듈을 사용하는 index.js를 node로 실행한다. require로 다이렉트로 모듈에 접근하게되면 default로 node_modules 경로를 조회한다.
/* index.js */
const dayjs = require('dayjs');
console.log(dayjs('2019-01-25').format('YYYYMMDD'); //20190125
~ % node index.js
package.json
{
"name": "learn_npm",
"version": "1.0.0"
}
npm으로 프로젝트를 관리할 때 필수 파일이다. 프로젝트에 대한 정보를 갖고 있는 파일이며, dependencies 속성을 활용하여 프로젝트에서 사용하는 (의존하는) 라이브러리를 관리할 수 있다. 이 json은 직접 작성할 수 도 있고 npm init 명령어를 통하여 자동으로 생성할 수 있다.
속성
- name : 프로젝트 이름 (필수)
- version : 프로젝트 버전 (주로 1.0.0 과 같은 3단계 버전을 사용) (필수)
- description : 프로젝트 설명 기술 (npm search 리스트에 표시됨)
- keywords : 프로젝트 검색할 때 참조되는 키워드 (npm search 리스트에 표시됨)
- private : true로 설정하면 npm 게시 거부 (개인 리포지토리가 실수로 게시되는 것을 방지)
- main : 프로그램 기본 진입점
- scripts : 프로젝트에서 자주 실행하는 명령어를 작성해두면 npm 명령어로 실행 가능
//package.json
{
~,
"scripts" : {
"start": "echo hihihihi hello hello",
"test": "echo \"Error: no test specified\" && exit 1"
},
~
}
~ % npm run test #echo \"Error: no test specified\" && exit 1 실행
~ % npm run start #echo hihihihi hello hello 실행
~ % npm start #echo hihihihi hello hello 실행
#start만 특별하게 run 없이 바로 실행 가능
- author : 프로그램 제작자
- license : 라이센스 지정 및 제한사항
- dependencies : 프로젝트에서 사용하는(의존하는) 모듈을 기술하는 부분
=> 애플리케이션 설치시 이 내용 참조하여 필요한 확장 모듈을 자동으로 설치
여기에 작성하면 운영, 개발 모두 사용됨 - devDependencies : 개발할 만 의존하는 모듈을 관리
여기에 작성하면 개발에서만 사용됨
~ % npm install --save-dev nodemon #--save-dev 옵션을 주면 devDependencies에 추가됨
//package.json
{
~,
"dependencies" : {
"dayjs": "^1.10.8"
},
"devDependencies" : {
"nodemon": "^2.0.15"
},
~
}
node_modules (설치 라이브러리 경로)
프로그램에서 필요로하는 라이브러리가 설치되는 경로(폴더)이다.
package-lock.json
프로젝트에 설치된 모듈들의 의존성 트리를 기록하고 있으며, 이 파일을 참고하여 node_modules 디렉토리 안에 모듈을 다운받는다. 내가 다운받고 싶어하는 모듈은 한가지여도, 해당 모듈이 또 다른 모듈에 의존하고 있다면 그 모듈까지 다운받아야 한다. 특정 모듈 안에 "requires" 속성으로 의존성을 갖는 모듈을 기록한다.
모듈 버전
기본적으로 버전은 [MAJOR, MINOR, PATCH] 로 구성되어있고, 시맨틱 버저닝(Semantic Versioning) 규칙을 따르고 있다.
MAJOR : 주요 변화, 기존 API 추가/변경/삭제 등 이전 버전과 호환이 안될 수 있음
MINOR : 기능 추가, 이전 버전과 호환됨
PATCH : 버그 수정, 이전 버전과 호환됨
이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.
[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의 | 짐코딩 - 인프
짐코딩 | 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., 백그라운드 지식을 확실히 알아야,진짜 프론트엔드 개발자가 될 수 있어요
www.inflearn.com
'JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 모듈 시스템 (0) | 2024.06.25 |
---|---|
[JavaScript] NPM 명령어 (0) | 2024.06.23 |
[JavaScript] Array API (배열 API) (0) | 2024.06.16 |
[JavaScript] 이벤트 캡쳐링 & 버블링 (0) | 2024.06.14 |
[JavaScript] 즉시 실행 함수 (IIFE) (0) | 2024.06.13 |