[로드맵] FrontEnd - Tools #3

Front-end 로드맵 중 Tools 부분 - 드림코딩

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