Node Package Manager?
npm은 노드의 라이브러리등의 패키지들을 매니징 하기위한 툴이라고 보시면 됩니다. 설치 제거 부터 업데이트, 버전 관리, 패키지 실행 등 다양한 것들을 할수있는 툴입니다.
기본적으로 node를 설치하면 같이 설치되기 때문에 따로 설치는 필요 없지만 몇가지 스크립트는 알아두셔야 됩니다.
Package.json?
리액트나 익스프레스 등을 접해보신 분이라면(뷰는 제가 해보진 않아서 제외했습니다.) 프로젝트 내부에 package.json의 이름을 가진 파일을 보셧고, 수정을 해보신 분들도 있을겁니다.
내부에는 디펜던시 관리 하는거 같은 부분도 있고, 커스텀으로 스크립트 작성등 다양한 것들이 정보로 있다는 것을 보신 분들이 있을것입니다.
{
"name": "game2048",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"lodash": "^4.17.20",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}CRA했을때의 초기 package.json
위의 예제를 보고 하나씩 살펴 보겠습니다.
name
"name": "game2048"name은 프로젝트의 이름입니다.
npm에서 각 패키지의 고유성은 name과 버전으로 판별하기때문에 패키지(프로젝트)에서 제일 중요하다고 생각하시면 됩니다. 하지만 토이프로젝트나 빈번하게 사용된는 것은 아니기에 경시되는 경향이 있다고 생각합니다.
version
"version": "0.1.0",version도 name과 마찬가지로 패키지의 고유성을 판별하는 척도가 됩니다. npmjs에 들어가서 보면 여러가지 업데이트를 버전을 확인할수 있는데 이 버전이 명시되어있는것입니다.
회사 내부에서 사용하는 것이라면 하나의 버전으로 명시해도 문제는 없지만 버저닝을 위해서 package.json에도 버전 명시를 해두는게 어떨까요?
버저닝 넘버링은 노드에서는 유의적 버전을 따르는데 16.12.0 일경우 16은 주버전 12는 부버전 0은 수버전이 됩니다. 기준은 아래와 같으나 권장사항 및 약속이라서 내부사용용도라면 지키지 않아도 큰 문제는 없습니다.
다만 아래 디펜던시 부분에서 외부 사람들이 사용할때 ~,^를 사용할때는 큰문제가 될수 있기때문에 지키지 않으면 사용자들에게 문제가 될수있는 여지가 있습니다.
주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우
부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우
수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우
private
"private": true이부분은 패키지의 비공개 여부를 알려주는 곳입니다.
dependencies,devDependencies,peerDependencies
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"lodash": "^4.17.20",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},프로젝트를 진행하게 되면 많은 패키지들을사용하게 되는데 이것들의 버전들을 모아서 관리해주는 곳입니다.
키값은 패키지 명이고 뒤에 넘버링은 위의 버전입니다.
여기서 버전의 범위를 정할수 있습니다
1.2.3 -> 1.2.3 버전만 쓰겠다.
부등호
>1.2.3 -> 1.2.3 위의 버전만 쓰겠다.
>= 1.2.3 -> 1.2.3 이상의 버전을 쓰겠다
<1.2.3 -> 1.2.3 아래버전만 쓰겠다.
<= 1.2.3 -> 1.2.3 이하의 버전만 쓰겠다
틸드
~1.2.3 -> 1.2.3 의 마이너부분까지 쓰고 수버전은 최신버전을 쓰겠다. (ex. 1.2.39 )
캐럿
^1.2.3 -> 1.2.3 의 메이저버전까지 쓰고 마이너 버전부터는 최신버전을 쓰겠다. (ex. 1.2.39, 1.4.0)보통은 업데이트가 되어도 문제없는 캐럿을 사용하지만 가끔 문제가 있는경우도 있으니 확인 잘 해보시길 바랍니다.
script
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},기본 npm 의 명령어에는 여러가지가 있습니다 .
Usage: npm <command>
where <command> is one of:
access, adduser, audit, bin, bugs, c, cache, ci, cit,
clean-install, clean-install-test, completion, config,
create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
edit, explore, get, help, help-search, hook, i, init,
install, install-ci-test, install-test, it, link, list, ln,
login, logout, ls, org, outdated, owner, pack, ping, prefix,
profile, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, team, test, token, tst, un,
uninstall, unpublish, unstar, up, update, v, version, view,
whoami위의 명령어 이외에 추가적인 명령어를 넣고 싶을때는 스크립트부분에 넣어주면 명령어에 있는대로 실행이 됩니다.
eslintConfig
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},이부분은 eslint 할때 설정부분에 같이 다루겠습니다.
browserslist
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}브라우저 선택하는 옵션만 따로 선택하는 뽑아놓은 곳입니다. 브라우저 지원을 어떻게 할것인지에 따라서 이 곳을 조정하면 된다고합니다.
자체만으로는 특별한 기능이 없지만 다른프로그램에서 활용하기 위한 도구입니다. 프레임워크나 빌드 도구, 바벨 등 에서 이용합니다.
쿼리로써 이용이 가능한데 ie 10 의 경우는 ie 10버전을 의미합니다 ie 6-9 는 ie 6~9버전을 의미하고
not ie 6~10 이면 ie 6~10버전은 사용하지 않겠다는 말입니다.
not ie <= 10 을 쓰는게 권장되긴 합니다.
위에서 나온 >0.2% 는 세계 점유율 0.2프로만 지원하겠다는 소리입니다.
지역을 정할수도있습니다.
> 2% in KR 이라면 한국 2프로 이상 지원
> 2% in alt-AS 는 아시아 2프로 이상 지원 입니다.
위에 또 나온것중에 last!
last 1 version 최근 1개의 버전만 지원하겠다는 소리입니다.
last 1 chrome version 은 당연히 크롭 1개버전만 하겠다는 소리입니다.
not dead는 지원 중단되지 않은 (죽지않은) 브라우저 지원입니다.
not op_mini all 은 당연히 op_mini 전부를 지원하지 않겠다는 것이겠죠.
위에서 and, or 조건으로도 가능합니다. and는 띄어쓰기로 comma는 or로 사용가능합니다.
> 1%, last 1 chrome version 은 1프로 이상과 마지막 크롬 1개의 버전 둘다 지원하겠다는 말입니다.
> 1% last 1 chrome version 은 1프로 이상이면서 마지막 크롬 1개의 버전을 지원하겠다는 말입니다.
많이 사용하는 쿼리들에 대해서는 설명을 다했고,
추가적 쿼리에 대해서는 나중에 더알아보도록 하겠습니다
추가적으로 사용하는 것들
- description과 keywords 각각 설명과 키워드에 대해서 나온것입니다. 사람들이 패키지를 찾을 때 쉽게 검색할수 있도록 넣는 곳입니다.
- author, contributors 제작자의 정보가 들어가는 곳입니다. contributors에는 여러 사람을 배열로 지정이 가능합니다. 각각 이름을 포함하고 선택적으로 email과 url을 넣을수 있습니다. 아래 두개의 방법중에 하나로 택해서 넣어도 괜찮습니다.
"author": "SSul <syhwan88@gmail.com> (https://github.com/maintainker)","author": { "name" : "SSul", "email" : "syhwan88@gmail.com", "url" : "https://github.com/maintainker" }, - main 노드 어플리케이션의 경우 진입점 경로. 프론트엔드일경우 사용되지 않습니다. (webpack에서 html에 넣어주기 때문입니다.)
- license 라이센스 관련 내용입니다. 패키지 사용자들이 당신이 만든 패키지를 사용하기 위해 어떻게 권한을 얻는지, 또 어떤 금기 사항이 있는지 알게하기 위해 라이센스를 명시해야 합니다. 가장 간단한 방법은 MIT 나 BSD-3-Clause 같은 일반적 라이센스를 사용하는 것입니다. 비공개로 할때는 license : unlicensed로 해둬도 괜찮습니다.
- engines, os, cpu 패키지각 특정 환경에서만 동작하도록 하는 속성입니다.
- config script에서 환경변수로 사용이 가능합니다. 하지만 명령어로 덮어씌울수도 있습니다.
- hompage 프로젝트 홈페이지가 있을경우 이 항목에 입력합니다.
이외에도 많은 설정들이 있지만 자주 사용하거나 한번이상 봤던 것들 위주로 넣었습니다.
yarn?
yarn도 npm처럼 javascript package 매니저입니다.
하지만 npm은 하나가 완료되면 다음것을 설치하는 직렬적으로 설치하는데 반면 yarn은 병렬적으로 설치하게 해줘서 빠른 설치 속도가 장점입니다.
단점은 npm과는 다르게 별도로 설치해야된다? 등이 있고 장점들도 더 있지만 장단점 비교보다는 설명만 하고 넘어가겠습니다.
저는 yarn을 더 선호합니다..
NVM?
Node version manager
노드버전관리자?
처음 들어보신분들도 있고, 지금 많이 사용하시는 분들도 있을겁니다.
의존패키지들은 npm에서 관리하지만 그렇다면 계속 노드를 업데이트 한다면 어느순간에 node version이 달라진다면 과거의 프로젝트를 돌릴때 이슈가 생길수도 있습니다.
그리고 원하는 버전을 사용하여 프로젝트를 구성하고 싶을수도 있습니다.
그럴때 협업과 노드버전관리 등의 다양한 이유를 목적으로 사용하기도 합니다.
마무리
이번 블로깅은 다른 블로깅과 다르게 제 생각은 거의 배제된 정보의 전달로만 이뤄져 있습니다. 다소 지루할수도있으나 필요한 부분만 골라서 보시는걸 추천드립니다.
저도 이것을 정리하며 몰랐던 부분, 사용은 하고 있지만 더 깊이 알게된 부분이 있어 좋은 블로깅이었습니다.
Reference
