728x90
반응형
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
Tools
2. Package Manager
🔎 npm & yarn
npm과 yarn은 Node.js 의 패키지 관리자로 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn 과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 그리고 명령 줄 인터페이스(CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다.
npm
npm 은 Node Package Manager의 줄임말로 노드를 설치할 떄 자동으로 설치되는 기본 패키지 관리자. 사람들이 노드 패키지를 만들고, 업로드하고, 공유할 수 있는 공간으로 누구나 온라인 플랫폼에 개시된 패키지를 사용할 수 있으며 CLI를 통 해 패키지 설치 및 제거가 가능하다.
yarn
yarn은 2016년 페이스북에서 개발한 패키지 관리자입니다. React와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발되었으며, 속도나 안정성 측면에서 npm 보다 향상 되었다.
npm vs yarn
- 속도
npm과 yarn의 주요 차이점 중 하나는 패키지 설치 프로세스를 처리하는 방법이다. npm은 패키지를 한번에 하나씩 순차적으로 설치하는 반면 yarn은 여러 패키지를 동시에 가져와 설치하도록 최적화 되어 있어 패키지 설치 속도 측면에서 yarn이 npm 보다 빠르다. - 보안
yarn은 보안 측면에서 npm보다 더 안전한 것으로 알려져 있다. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행한다. 이로 인해 보안 시스템에 몇 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있다. 반면에 yarn은 yarn.lock 또는 package.json 파일에 있는 파일만을 설치하기 때문에 더 보안 측면에서 안전하다. 그러나 npm도 최신 업데이트에서 보안 업데이트도 크게 향상되었다. - 명령어
| 동작 | npm | yarn |
| dependencies 설치 | npm install | yarn |
| 패키지 설치 | npm install [패키지명] | yarn add [패키지명] |
| dev 패키지 설치 | npm install --save-dev [패키지명] | yarn add --dev [패키지명] |
| 글로벌 패키지 설치 | npm install --global [패키지명] | yarn global add [패키지명] |
| 패키지 제거 | npm uninstall [패키지명] | yarn remove [패키지명] |
| dev 패키지 제거 | npm uninstall --save-dev [패키지명] | yarn remove [패키지명] |
| 글로벌 패키지 제거 | npm uninstall --global [패키지명] | yarn global remove [패키지명] |
| 업데이트 | npm update | yarn upgrade |
| 패키지 업데이트 | npm update [패키지명] | yarn upgrade [패키지명] |
package.json
Node.js 프로젝트에서 사용하는 많은 패키지의 의존성을 관리할 수 있는 파일로 이미 작성 된 package.json을 통해 동일한 개발 환경을 빠르게 구축할 수 있다.
{
"name": "emoji",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"node-emoji": "^1.10.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}| Key | Value |
| name | 프로젝트 이름으로, version과 함께 필수 항목이다. url로 사용되고, 설치할 때 디렉토리 이름이 되기 떄문에 url이나 디렉터리에서 쓸 수 없는 이름은 사용이 불가능하며 node나 js도 사용 불가. name은 214자보다 짧아야 하며 점(.)이나 밑줄(_)로 시작할 수 없다. 대문자를 포함해서는 안 되며, require() 함수의 인수로 사용되며 짧고 알기 쉬운 것으로 짓는것이 좋다. |
| version | 프로젝트 버전을 정의한다. 3단계 버전을 사용하며, - 로 태그 이름을 적을 수 있다. |
| description | 프로젝트 설명으로, 문자열로 기술한다. npm search로 검색된 리스트에 표시되기 때문에 사람들이 찾고 이해하는데 도움이 된다. |
| keywords | 프로젝트를 검색할 때 참조되는 키워드로 npm search로 검색된 리스트에 표시된다. |
| homepage | 프로젝트 홈페이지 주소로 url 항목과는 다르며, url을 설정하면 예상치 못한 움직임을 하게 되므로 주의가 필요하다. |
| author | 프로젝트 작성자 정보로, 한 사람만을 지정한다. |
| contributors | 프로젝트에 참여한 공헌자 정보로, 여러 사람을 배열로 지정할 수 있다. |
| repository | 프로젝트의 소스 코드를 저장한 저장소의 정보로 소스 코드에 참여하고자 하는 사람들에게 도움이 될 수 있다. 프로젝트의 홈페이지 url을 명시해서는 안 된다. |
| scripts | 프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능하다. |
| config | 소스 코드에서 config 필드에 있는 값을 환경 변수처럼 사용할 수 있다. |
| private | 이 값을 true로 작성하면 중앙 저장소로 저장하지 않는다. |
| dependencies | 서비스를 배포할 때 쓰이는 모듈을 관리하기 위한 부분. 일반적으로 package.json에서 가장 많은 정보가 입력되는 곳이다. 애플리케이션을 설치할 때 이 내용을 참조하여 필요한 확장 모듈을 자동으로 설치하고 때문에 개발한 애플리케이션이 특정한 확장 모듈을 사용한다면 여기에 꼭 명시 해줘야 한다. |
| devDependencies | 개발할 때만 사용하는 확장 모듈을 관리한다. |
| engine | 실행 가능한 노드 버전의 범위를 결정한다 |
참조
https://joshua1988.github.io/vue-camp/package-manager/npm-vs-yarn.html
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-노드-npmnode-package-manager
728x90
반응형
