React | NPM과 NPX

 

NPM (Node Package Manager)

JavaScript 패키지의 설치, 배포, 관리를 도와주는 도구

 

 

JavaScript 패키지?

재사용 가능한 JavaScript 코드 묶음, npm에 배포된 패키지는 package.json 파일로 정보를 표시함

 

패키지를 사용해서 또 다른 패키지를 만들 수도 있음 -> 사용한 패키지에 대한 의존성이 생김

 

Npm을 사용하여 프로젝트에 패키지 사용하기

// 프로젝트 초기화 & package.json 파일 생성
npm init

// 패키지 설치
npm i 패키지이름
npm install 패키지이름

// 패키지 삭제
npm uni 패키지이름
npm uninstall 패키지이름

// 패키지 목록 확인
npm ls
npm list

 

 

- npm 사이트

npm | Home

 

- 사람들이 어떤 패키지를 많이 다운받았는지 확인하는 사이트 -> https://npmtrends.com/

 

 

package.json

개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게하기 위한 문서

해당 프로젝트에 대한 정보들이 들어있는 파일

 

node.js 프로젝트의 핵심 구성 파일로 의존성 관리, 프로젝트 정보, 스크립트 실행 등을 모두 제어하여 프로젝트를 일관성 있게 관리할 수 있도록 도와준다

 

• 프로젝트 이름, 버전, 필요한 라이브러리 명시
• 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 앱을 테스트할 때 사용할 스트립트 등이 명시되어 있음

필드명	역할
name	패키지 이름
version	패키지 버전 (업데이트 할 때마다 버전 올려주면 됨)
main	패키지의 진입점이 되는 모듈의 ID
type	commonJS(기본 값)과 module 중 하나 사용 가능 타입이 따로 정의되어 있지 않다면 commonJS로 처리 "type" : "module" - ES6 방법
scripts	패키지의 생명주기에서 다양한 타이밍에 자주 사용할 커맨드를 별칭을 통해 지정
description	문자열로 기술할 패키지에 대한 설명 글
license	ISC : 가져다쓰기 O, 사본 쓰기 O, 출처 표시 필수 X MIT : 가져다쓰기 O, 사본 쓰기 O, 출처 표시 필수 O
dependencies	필요한 라이브러리와 해당 라이브러리들의 버전 명시되어 있음
eslintConfig	소스 코드를 입력할 때 문법이나 코드 포맷을 체크해주는 것에 대한 설정 명시

 

JavaScript 모듈 사용법

	Common JS (Node.js 기본)	ES6 (브라우저 환경)
내보낼 때	module.exports	export default
가져올 때	require	import

 

 

---

NPX (Node Package eXecute)

npm 패키지를 실행하는 도구

npm 5.2.0 이후 버전 이상에서 포함된 도구, npm을 더 편하게 쓸 수 있게 해주는 도구

npx를 사용하면 로컬에 설치된 패키지 또는 원격 패키지를 간편하게 실행할 수 있다

 

NPX의 필요성

• 패키지를 일회성으로 사용하는 경우
• 프로젝트 환경을 구축하는 경우
  • 패키지를 npm으로 받아놓고 쓰면 버전이 고정되어 계속 같은 버전만을 쓰게된다
  • npx를 쓰면 가장 최신버전을 불러오기 때문에 버전을 신경쓰지 않아도 된다

 

npm으로 패키지를 한 번만 사용하려면?

1. 패키지를 다운 받는다

2. 패키지를 사용한다

3. 다 쓴 후 삭제한다

 

npx로 패키지를 한 번만 사용하려면?

1. npx로 패키지를 실행한다

 

따로 패키지 설치없이 결과만 나오는 것을 확인 할 수 있다!