[JS 스터디] npm

[hochan222]

주제 키워드는

자바스크립트의 패키지 관리자인

✨npm✨

입니다.

npm을 사용해 많은 일들을 할 수 있습니다. 같이 알아보아요!

☘️ 하위 주제 키워드

• package.json
• yarn
• package-lock.json
• yarn-lock.json
• npm scripts

⏳스레드에 각 페어당 소요시간 적어주세요!

(ex) holee 90분 소요

[hochan222]

공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆

[hochan222]

• https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87
• https://programmingsummaries.tistory.com/385

[yhshin0]

NodeJS

• NodeJS는 크롬 V8(자바스크립트 엔진)으로 빌드된 이벤트 기반의 자바스크립트 런타임으로, 웹 서버와 같이 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발을 위해 고안되었습니다.

특징

• Non-blocking I/O와 싱글 스레드 이벤트 루프를 통한 높은 처리 성능을 갖고 있습니다.
• 내장 HTTP 서버 라이브러리를 통해 HTTP 서버를 작성할 수 있습니다.

npm

npm은 Node Package Manager의 약자로 NodeJS의 패키지 매니저입니다.

www.npmjs.com 웹사이트에서 패키지들을 조회할 수 있습니다.

package.json

보통 npm init 명령어로 해당 폴더에 프로젝트를 생성합니다. 이때, 프로젝트에 관련된 사항들을 프롬프트에 입력하여 설정할 수 있도록 npm이 유도합니다. 그리고 여기 적힌 사항 또는 정보들이 package.json 파일 안에 작성됩니다.

또한 npm 패키지들을 해당 프로젝트에 설치하면 package.json 파일에 npm 패키지들이 dependencies 안에 작성됩니다.

즉, 나중에 프로젝트를 배포하고, 다른 사람이 해당 프로젝트를 받아 실행할 때, dependencies 안의 실행에 필요한 패키지들을 한번에 받을 수 있게 되는 것입니다.

다음은 package.json 파일의 한 예시입니다.

{
  "name": "nodevue",
  "version": "0.0.0",
  "description": "sample project for node and vue",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node",
    "vue"
  ],
  "author": "XP",
  "license": "ISC",
  "dependencies": {
    "bluebird": "^3.7.2",
    "body-parser": "^1.19.0",
    "crypto-js": "^4.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "hashmap": "^2.4.0",
    "mysql": "^2.18.1",
    "open-graph-scraper": "^4.8.2"
  }
}

package-lock.json

npm 패키지를 설치하다보면 모듈끼리 충돌이 일어나는 경우가 발생합니다.

이러한 충돌을 방지하기 위해 npm은 package-lock.json 파일을 두어 충돌을 방지하도록 유도합니다.

yarn

yarn-lock.json

npm scripts

---

출처:
https://ko.wikipedia.org/wiki/Node.js
https://velopert.com/133

[hochan222]

package.json으로 충분한것 같은데 package-lock.json 은 왜 필요한가요?

동일한 함수 package.json는 node_modules에 대해 언제든지 똑같은 트리를 생성해야한다. 일부 경우에서는 사실이지만, 다른 많은 경우 npm은 package.json 만으로는 언제든지 똑같은 트리를 생성할 수 없다. 그 이유는 링크 참고.

yarn

Yarn은 프로젝트의 의존성을 관리하는 JavaScript의 패키지 매니저이다. Facebook이 점차 거대해지는 프로젝트에서 npm을 사용하면서 일관적, 보안, 특히 성능에 대한 문제를 겪게 되었고 npm을 대체할 새로운 패키지 매니저를 개발했다. (하지만, 최근에 npm도 성능이 엄청 많이 향샹 되었다고한다.)

NPM vs. Yarn: Which Package Manager Should You Choose?

Yarn은 모든 패키지를 유저 디렉토리에 저장해 캐싱합니다.

-g option을 붙이면 전역으로 설치할 수 있으며 yarn global list 명령어로 리스트를 yarn global bin으로 바이너리 스크립트를 볼 수 있다.

• yarn init : package.json 파일 생성
  • yarn add lodash: 기본 패키지 설치
  • yarn add --dev eslint: devDependencies에 eslint 패키지 추가
  • yarn add lodash@1.2.3: 특정 버전 패키지 설치
  • yarn add lodash@https://github.com/lodash/lodash: github url로 설치
• yarn install / yarn: 로컬의 node_modules 폴더에 의존 패키지를 설치하거나 업데이트
• yarn install --force: 강제로 모든 패키지 다시 다운로드
• yarn install --frozen-lockfile: yarn.lock과 package.json이 동기화 되지 않은 상태에서 업데이트가 필요한 경우에는 설치를 실패하고 yarn.lock을 생성하지 않는다.
• yarn bin [name]: binary script 경로 출력
• yarn upgrade: 모든 의존 패키지를 package.json에 정의한 버전의 범위에서 업데이트하거나 삭제
  • yarn.lock 파일 재생성
  • package.json은 불변

  • 대규모의 프로젝트에서는 의존된 모든 패키지가 호환성을 보장하기 힘들기 때문에 이 명령을 통해 일괄적으로 패지키를 업데이트하는 것은 좋지 않다

  • yarn upgrade eslint@^4.0.0와 같이 하나씩 지정해 업데이트하는것을 추천
• yarn remove eslint: eslint 패키지를 프로젝트에서 제거
  • package.json에서 제거
  • yarn.lock에서 제거
• yarn check: 현재의 package.json이yarn.lock과 일치하는지 확인

package.json scripts

compress 명령 실행 전, 후에 명령을 실행시키고 싶다면 아래와 같이 'pre, post' 를 붙여서 가능하게 할 수 있다.

{
  "scripts" : { 
    "precompress" : "{{`compress` 스크립트 이전에 실행}}" , 
    "compress" : "{{파일을 압축하는 명령 실행}}" , 
    "postcompress" : "{{`compress` 스크립트 후에 실행}}" 
  }
}

• https://docs.npmjs.com/cli/v7/using-npm/scripts

[yechoi42]

yarn install --force cypress
yarn install v1.22.10
error `install` has been replaced with `add` to add new dependencies. Run "yarn add cypress" instead.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

install -> add 로 바뀌었다고 합니다!

[hochan222]

yarn install 은 package.json 에 명시돼있는 의존성을 다운받는 명령어이고

yarn add는 새로 받을 패키지에대한 명령어이여서

yarn install 는 되지만 yarn install cypress는 안됩니댜. 만약 cypress가 package.json dependency에 추가가 됐다면 한번 node_modules 폴더를 지우고 yarn install을 해보세요! package.json 기반으로 node_modules 폴더가 생성됩니댜

[yechoi42]

npm vs yarn

출처: https://ooeunz.tistory.com/19

npm

Node Pacackage Manager. 이하 npm은 이름 그대로 노드 패키지 매니저이다. 세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm이다. npm은 세계 최대 규모의 패키지들을 보유하고 있다. 이러한 패키지들은 노드의 생태계를 더욱 견고하게 만들었다.

npm에 업로드된 노드 모듈을 패키지라고 부른다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있다. 이러한 관계를 의존 관계라고 한다.

yarn

이와 별개로 yarn이라는 패키지 매니저가 있다. yarn은 facebook진영에서 만든 것으로 React나 React Native와 같은 facebook 진영의 framework를 사용할 때 종종 볼 수 있다. yarn은 npm서버에 비해 속도가 빠르고 사용법이 npm과 크게 다르지 않아 npm을 사용할 줄 안다면 yarn 또한 쉽게 사용할 수 있다. npm과 yarn 중 어떤 것을 사용할지는 여러분의 선택에 달렸지만, 양쪽 모두 장단점을 가지고 있다.

package.json

프로젝트에서 사용하는 외부 모듈이 많아지게 되면 관리하기가 번거로워지도 새로운 프로젝트를 진행하는 경우에 필요한 모듈이 많은 경우 패키지 수만큼 npm 명령을 사용해야하는 번거로움이 생깁니다.
이러한 경우 필요한 패키지들의 목록을 파일로 정리해놓고 목록 파일을 이용하여 단 한번의 명령어로 필요한 패키지들을 모두 설치할 수 있습니다. 이러한 패키지 정의 파일을 package.json 파일이라고 합니다.

package.json 파일을 만드는 방법

1. 프로젝트 경로로 이동
2. npm init 명령을 통해 package.json 파일을 생성
3. 만약 package.json 파일이 생성된 이후 외부 모듈을 다운로드 하는 경우 npm init 명령어에 --save 옵션을 주어 설치하면 자동으로 package.json 의 dependencies 목록에 추가

package.json으로 외부 모듈 다운로드

1. 프로젝트 경로에 원하는 모듈들이 정의 된 package.json
2. 해당 프로젝트 경로에서 npm install

npm scripts

NPM 스크립트는 스크립트입니다. 반복 작업을 자동화하기 위해 스크립트를 사용합니다. 예를 들어 프로젝트를 빌드하고 CSS (Cascading Style Sheets) 및 JS (JavaScript) 파일을 축소합니다. 스크립트는 임시 파일 및 폴더 등을 삭제하는데도 사용됩니다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. bash / batch 스크립트를 작성하거나 Gulp 또는 Grunt와 같은 작업 실행기를 사용할 수 있습니다. 그러나 많은 사람들이 단순성과 다양성을 위해 NPM 스크립트로 이동하고 있습니다. 또한 배우고, 사용하고, 추적 할 도구가 더 적을 가능성도 있습니다.

package.json의 스크립트 객체

다음은 샘플 package.json 파일입니다.

{   
    "name": "super-cool-package",   
    "version": "1.0.0",   
    "scripts": {    
        ...   
    }, 
    "dependencies": { 
        ...
    }    
    "devDependencies": {     
        ...   
    } 
}

다음은 아마도 가장 인기있는 NPM 스크립트입니다.

"scripts": {
    "start": "node index.js",
    ...
}

npm start를 간단히 입력하여 실행할 수 있습니다.

Pre&Post Scrips

scripts에 명시된 모든 스크립트에 대해 'pre', 'post' 스크립트를 생성할 수 있습니다.

{
  "scripts": {
    "precompress": "{{ executes BEFORE the `compress` script }}",
    "compress": "{{ run command to compress files }}",
    "postcompress": "{{ executes AFTER `compress` script }}"
  }
}

npm run compress를 입력하면 precompress, compress, postcompress를 모두 실행합니다.

life cycle scripts

특정 상황에서만 사용되는 라이프 사이클 스크립트도 있습니다. (스크립트에 대한 자세한 설명은 하단의 출처를 확인하세요.)

• prepare
• prepublishOnly
• prepack
• postpack

출처: https://docs.npmjs.com/cli/v7/using-npm/scripts