2020-09-07
프론트엔드 개발환경 - NPM
정보
: 김정환님의 프론트엔드 개발환경의 이해와 실습을 공부하고 정리한 내용.
해당 내용은 김정환님의 블로그 내용을 토대로 재작성되었으며 내용을 추가하거나 일부 변경했습니다.
Node Package Manager로 Node.js를 설치할 때 함께 설치된다.
설치 경로 (Mac 기준)
Node.js :/usr/local/bin/node
NPM :/usr/local/bin/npm
npm의 명령어는 터미널에서 npm
을 입력하면 확인할 수 있다.
자주 사용하는 명령어는 init
, install
, run
, uninstall
, version
이 있다.
프로젝트를 시작해보자.
터미널에서 작업할 폴더로 이동 후 npm init
을 입력해보자.
프로젝트의 이름과 버전 등의 정보를 입력할 수 있으며 입력을 마치면 package.json
파일이 생성된다.
모두 기본값으로 사용한다면 npm init -y
로 입력하면 된다.
package.json
의 설정에 관해 확인해보자.
package.json
에서 “scripts”를 보면 다음과 같이 되어 있다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
터미널에서 npm test
를 입력하면 다음과 같은 결과를 얻는다.
$ npm test
> echo "Error: no test specified" && exit 1
Error: no test specified
npm ERR! Test failed. See above for more details.
이렇게 scripts
에 원하는 명령어와 실행 내용을 추가할 수 있다.
🚨 주의
npm에 등록되지 않은 명령어를 추가했을 때는 $ npm run 명령어로 실행해야 한다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 예시 : build 추가 "build": "echo \"build 명령어 추가\"" },
# run을 붙이지 않아도 정상적으로 작동한다.
$ npm test
> echo "Error: no test specified" && exit 1
Error: no test specified
npm ERR! Test failed. See above for more details.
# run을 붙이지 않으면 작동하지 않는다.
$ npm build
npm WARN build `npm build` called with no arguments.
# run을 붙이면 정상적으로 작동한다.
$ npm run build
> echo "build 명령어 추가"
build 명령어 추가
프로젝트 작업을 하면서 패키지를 설치하는 방법에 관해 알아보자.
npm install
을 이용하면 쉽게 라이브러리와 외부 패키지를 설치할 수 있다.
$ npm install react
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.
+ react@16.13.1
added 6 packages from 3 contributors and audited 6 packages in 0.583s
found 0 vulnerabilities
여기서는 최신 버전의 react
를 다운받았다.
NPM 공식 홈페이지에서 여러 패키지를 검색하고 다운로드할 수 있다.
그리고 다시 package.json
를 확인해보자.
"dependencies": {
"react": "^16.13.1"
}
“dependencies”에 react가 16.13.1 버전으로 설치된 것을 확인할 수 있다.
🏆 추가
npm install 뒤에 -D를 붙이면 개발 모드로 패키지를 설치할 수 있다.
$ npm install -D nodemon
> nodemon@2.0.4 postinstall /Users/davidyang/Documents/test/test2/node_modules/nodemon
> node bin/postinstall || exit 0
npm WARN test2@1.0.0 No description
npm WARN test2@1.0.0 No repository field.
+ nodemon@2.0.4
added 121 packages from 58 contributors and audited 127 packages in 3.265s
10 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
그리고 package.json
를 확인해보자.
"dependencies": {
"react": "^16.13.1"
}
"devDependencies": {
"nodemon": "^2.0.4"
}
“devDependencies”로 패키지가 추가된 것을 확인할 수 있다.
이렇게 하면 개발할 때만 해당 패키지를 사용하고 프로덕션에서는 패키지를 설치하지 않는다.
package.json
에서 각 패키지를 보면 버전에 대한 정보가 있다.
버전 정보 : (메이저 버전).(마이너 버전).(패치 버전)
"dependencies": {
"react": "~16.13.1"
}
"devDependencies": {
"nodemon": "^2.0.4"
}
틸드(~)와 캐럿(^)은 다음과 같은 뜻을 의미한다.
틸트(~) : 마이너 버전이 명시되어 있으면 패치 버전만 변경한다. 예를 들어 ~16.13.1 표기는 16.13.1 부터 16.14.0 미만까지를 포함한다. 마이너 버전이 없으면 마이너 버전을 갱신한다. ~0 표기는 0.0.0부터 1.0.0 미만까지를 포함한다.
캐럿(^) : 정식 버전에서 마이너와 패치 버전을 변경한다. 예를 들어 ^2.0.4 표기는 2.0.4부터 2.1.0 미만까지를 포함한다. 정식 버전 미만인 0.x 버전은 패치만 갱신한다. ^0 표기는 0.0.0부터 0.1.0 미만까지를 포함한다.
🏆 추가
기존 package.json의 각 패키지를 모두 최신 버전으로 업데이트하는 방법이 있다.
# ncu를 우선 설치한다.
$ npm install -g npm-check-updates
# ncu를 실행하면 업데이트할 수 있는 패키지가 무엇인지 알려준다.
$ ncu
# ncu -u를 실행하면 package.json 버전을 업데이트해 준다.
$ ncu -u
# 이제 npm install을 하여 실제 node_modules를 업데이트해 주자.
$ npm install
👋