package.json 이 뭔데?

사용하고 있는 npm 패키지들을 관리하는 파일이다. 개발할 때 엄청 크고 무거운 node-modules를 공유할 필요 없이 package.json만 공유하면 동일한 환경에서 작업할 수 있다.

// 이런 모양으로 생겼다.
{
	"name": "[프로젝트 이름]",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"dev": "webpack-dev-server --hot"
	},
	"author": "[작성자]",
	"license": "ISC",
	"dependencies": {
		"react": "^16.10.2",
		"react-dom": "^16.10.2"
		// ...
	},
	"devDependencies": {
		"@babel/core": "^7.6.4",
		"webpack": "^4.41.0",
		"webpack-cli": "^3.3.9",
		"webpack-dev-server": "^3.8.2"
		// ...
	}
}

package.json 생성

터미널에 npm init 입력 후 필요한 정보들 입력하면 package.json이 만들어짐

귀찮으면 npm init -y (나중에 수정 가능)

npm init
npm init -y

패키지 설치하기

npm install [필요한 패키지 이름] 명령어로 필요한 패키지 추가할 수 있다.

npm install [패키지]
npm i [패키지]

// 특정 버전을 설치해야 하는 경우
npm i [패키지]/@[버전]

• dependency

  라이브러리나 프레임워크 같이 실제 프로덕트에서 사용되는 애들은 여기로

  npm install [패키지] —-save

  
  {
  	// ...
  	"dependencies": {
  		"react": "^16.10.2",
  		//...
  	},
  	"devDependencies": {
  		//...
  	}
  }

• devDependency

  개발을 편하게 해주는 도구들은 여기로

  npm install [패키지] —-save-dev
  npm i [패키지] -D

  {
  	// ...
  	"dependencies": {
  		// ...
  	},
  	"devDependencies": {
  		"@babel/core": "^7.6.4",
  		//...
  	}
  // ...
  }

패키지 삭제하기

npm uninstall [삭제하려는 패키지]

목록에 있는 패키지 다운받기

package.json만 있으면 해당 프로젝트에 필요한 모든 패키지 다운받을 수 있다! 자동으로 /node_modules에 필요한 패키지들이 차곡차곡 받아진다. 너무 편해👻

npm install
npm i

패키지 버전

기본적으로는 ^를 사용하여 버전이 명시된다.

• ^[MAJOR].[MINOR].[PATCH]: MINOR 버전까지 자동으로 업데이트
• ~[MAJOR].[MINOR].[PATCH]: PATCH 버전만 자동으로 업데이트
• >, >=, <, <=: 지정한 범위에 해당하는 경우에만 업데이트

{
	// ...
	"dependencies": {
		"react": "^16.10.2",
		"react-dom": "~16.10.2"
	},
	// ...
}

처음에는 버전이 업데이트 되면 무조건 좋은거 아닌가 하는 생각이 있었다. 그런데 아니다. 버전 업데이트로 인해 정말정말정말 생각지도 못했던 오류가 발생할 수도 있다. 바뀐 버전 때문인지 모르고 오류 해결하느라 며칠을 날린 적도 있다.😩 프로젝트 막바지라면 =으로 버전을 고정시키는 것도 나쁘지 않은 선택이다.

Scripts

자주 쓰는 명령어를 추가해서 엄청 긴 명령어도 npm run [어쩌구]만 하면 손쉽게 실행할 수 있다.

npm run [명령어]

// test와 start는 run을  쓰지 않아도 됨
npm test
npm start

{
	// ...
	"scripts": {
		"dev": "webpack-dev-server --hot"
	},
	// ...
}

package-lock.json

package-lock.json파일을 수정하면 자동으로 package-lock.json이라는 파일이 생성된다. 이 파일은 내가 사용하고 있는 패키지들의 의존성 트리에 대한 정보가 기록되어 있는 곳이다.

앞에도 말했지만, 동일한 코드여도 버전에 따라 예상치 못한 다른 결과가 나올 수 있기 때문에 이 파일도 함께 공유되어야 한다.