프론트앤드 스터디에서 진행한 NPM에 대한 발표자료
NPM
우선, npm에 대해 설명하기 전에 모듈에 대해 좀 짚고 넘어갈 필요성이 있다.
모듈화
📂 모듈 : 애플리케이션을 구성하는 개별적 요소
모듈은 개별적으로 존재하다가 필요에 따라 명시적으로 모듈을 로드해서 사용 가능
→ 효율성, 유지보수성 ⬆️
NPM (Node Package Manager)
- 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리 역할
- npm으로 자신이 작성한 패키지를 배포해서 공개할 수도 있고 필요한 패키지들을 검색해서 사용할 수도 있다.
- 패키지 관리
- 패키지의 버전관리
NPM 설치
-
아마 프론트앤드 개발을 하면서 터미널에 가장 많이 작성한 키워드 중에 하나일 것.
-
node.js를 설치하면 자동으로 설치
NPM으로 모듈 다운로드하기
- 옵션을 별도로 지정하지 않으면 지역으로 설치되며, 프로젝트 루트 디렉터리에
node_modules안에 패키지가 설치된다. 지역으로 설치된 패키지는 해당 프로젝트 내에서만 사용할 수 있다.
지역설치 (default)
npm install [packageName]전역설치
전역으로 설치하면 모든 프로젝트에서 사용가능하다.
npm install -g [packageName]Package.json
npm init
- 프로젝트에서는 많은 패키지를 사용하게 되고 패키지의 버전도 빈번하게 업데이트되므로 프로젝트가 의존하고 있는 패키지를 일괄 관리할 필요가 있다.
npm은package.json파일을 통해서 프로젝트 정보와 패키지의 의존성(dependency)을 관리한다. 이미 작성된 package.json이 있다면 팀 내에 배포하여 동일한 개발 환경을 빠르게 구축할 수 있는 장점이 있다.
🧾 모듈들의 버전을 명시한 명세서
dependencies vs devDependencies
dependencies: 프로덕션 환경에서 응용 프로그램에 필요한 패키지.devDependencies: 로컬 개발 및 테스트에만 필요한 패키지.
package.json vs package.lock.json
package.json: version range (버전의 범위를 명시)
🌳 개발자들이 서로 같은 node_modules 트리를 갖도록 하는 역할
scripts
- 우리가
run명령어를 통해서 실행할 것들을 적어두는 것
"scripts": {
"start": "npm run dev",
"hello-world": "echo 'Hello World'",
"prettier": "prettier --write --config ./prettier.config.js './src/**/*.{ts,tsx}'",
"lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
"lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
},NPM 배포하기
- 배포가 가능한 패키지명인지 확인
npm info [packageName]- 필요한 정보 입력 (version, description...)
npm init- 로그인
npm login- npmignore
- 배포
npm publish- 버전관리 (
Semver: Semantic Versioning)
npm version major # package.json파일 version의 첫 번째 숫자 (v1.0.0 -> v2.0.0)
npm version minor # package.json파일 version의 두 번째 숫자 (v1.0.0 -> v1.1.0)
npm version patch # package.json파일 version의 세 번째 숫자 (v1.0.0 -> v1.0.1)NPM vs yarn
npm을 대응하는 오픈소스 라이브러리 중에는 여러가지가 있는데 그 중에 가장 유명하고 사람들이 많이 사용하는게 yarn
yarn과의 차이점
-
속도
→ yarn은 병렬 처리 -
보안
→ npm은 의존 관계를 가지는 다른 패키지들이 즉시 포함되도록 한다.
반면 yarn은 yarn.lock이나 package.json 파일에 있는 것들만 설치를 한다.