프론트(web)의 package.json

 

 

웹프론트를 작업하게 되면 node.js를 사용하게 된다.

Node.js 사이트에서 node를 직접 다운로드하게 되면 추가적으로 설치되는 npm이란게 있다.

npm은 대충 리눅스의 apt 정도로만 생각하고 있었는데 package.json 을 알아보기 위해 npm에 대해 조금 짚고 넘어갈 필요가 있다!

 

 

 

---

 

NPM(Node Package Manager)

npm은 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하고 있다.

• node.js를 위한 패키지 매니저
• node.js를 위한 오픈소스 생태계

 

npm이 생겨난 이유는 Isaac Z. Schlueter라는 사람이 작업 중 모듈 패키징이 엉망으로 되는 것을 확인하여 만들게 되었다고 한다.

 

 

 

---

 

 

 

package.json

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

( SpringBoot의 build.gradle과 비슷한 역할을 하는 것 같다 )

• 자신의 프로젝트가 의존하는 패키지의 리스트
• 자신의 프로젝트의 버전을 명시
• 다른 환경에서도 빌드를 재생할 수 있음
• 속성-값의 쌍으로 이루어져있음

 

 

 

 

---

 

 

 

 

 

 

생성 방법

// 프로젝트명, 설명 등 작성할 내용이 있을 경우
> npm init

// 입력할 내용없이 package.json 생성
> npm init -y

 

 

---

 

 

package.json 내부

{
     "name" : "web-test",
     "version" : "1.0.0",
     "description" : "",
     "main" : "index.js",
     "private": true,
     "dependencies" : {
         "react" : "^17.0.2",
     },
     "scripts" : {
         "test" : "echo \"Error: no test specified\" && exit 1",
         "start": "react-app-rewired start",
     },
     "keywords": [],
     "author" : "",
     "license" : "ISC"
}

 

* 는 필수 필드

필드명	설명
*name	패키지의 이름    - 소문자로 작성되어야 한다    - 한 단어로 작성되어야 한다    - -(하이픈)이나 _(언더스코어)를 포함할 수 있다.
*version	패키지의 버전    - [Major].[Minor].[Patch] 형태로 작성
description	패키지에 대한 설명
main	패키지의 진입점(entry point)이 되는 모듈의 ID    - 패키지 root의 상대 경로로 지정 (ex. 사용자가 foo라는 이름의 패키지를 설치하고, require("foo")를 통해 모듈을 import하면, "main"으로 지정한 모듈의 exports 객체가 반환됨 정의하지 않은 경우, root 폴더의 index.js로 기본값이 설정된다.)
private	true 로 설정할 경우 publish 명령을 거부함 (기본:false)
dependencies	배포 환경에 필요한 의존성 목록
devDependencies	개발 환경에 필요한 의존성 목록
browserslist	브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구
scripts	자주 사용할 command를 alias(별칭)을 통해 지정해 둘 수 있는 dictionary (ex. 위 예문의 경우 npm start 명령어를 입력하면 react-app-rewired start 로 자동 실행)
keywords	키워드를 문자열 배열로 설명
author	패키지 주인    - 배포자 한 사람을 위한 field로, 다수의 사람을 표시하기 위해서는 “contributors” field로 작성해야 한다.
license	패키지 사용자가 패키지를 사용하는데 어떤 권한과 제한 사항이 있는지 명시
babel	ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환시켜줌

 

 

---

 

 

dependencies와 devDependencies의 차이점

 

"npm install 패키지명" 을 통해 패키지를 설치할 때, 뒤에 --save 옵션을 줄 경우 dependencies 항목에 자동으로 추가된다.

만약 --save-dev 옵션을 줄 경우 devDependencies에 저장되며, 줄여서 -D로 주어 사용할 수도 있다.

 

dependencies가 분리되어 있는 이유는 가시성을 위한 것 뿐 아니라,

배포 환경에서 굳이 개발 환경에서만 필요한 의존성을 가져올 필요가 없다.

 

이 때문에 나누어 정의하여 "npm i --production"를 통해 운용에 필요한 의존성만을 받아와 더욱 빠른 빌드가 가능하다.

 

 

이 외에도 peerDependencies라는 항목이 있다.
peerDependencies는 필수 의존성만을 기입하는데, 만약에 A의 버전 3.0.0 으로 기입되어 있다면
A@3.0.0이 설치되지 않는 상태에서는 프로젝트 실행이 불가능하다.
( npm 버전 7부터는 의존성 충돌이 일어나면 peerDependencies 항목에 있는 의존성을 자동으로 설치함 )

 

 

 

---

 

 

 

browserslist

 

package.json에 정의하는 것이 아닌 .browserslistrc 파일 안에 정의하는 방법도 있다.

예제	설명
ie 10	인터넷익스플로러(IE) 버전 10 지원
ie 6-9	인터넷익스플로러(IE) 버전 6-9 지원
not ie 6-10	인터넷익스플로러(IE) 버전 6-10 지원하지 않음
not ie <= 10	인터넷익스플로러(IE) 버전 10 이하는 지원하지 않음
> 2%	전 세계 점유율 2% 이상의 브라우저만 지원
> 2% in KR  > 2% in alt-AS	한국에서 점유율 2% 이상인 브라우저만 지원 아시아 지역 전체의 점유율 2% 이상인 브라우저만 지원
last 2 versions	최근 2개 버전의 브라우저만 지원
last 2 Chrome versions  last 2 Firefox versions	크롬의 최근 2개 버전만 지원 파이어폭스의 최근 2개 버전만 지원
not dead	지원이 중단된 브라우저 제외
not op_mini all	opera-mini는 지원하지 않음
> 1%, last 1 versions	점유율 1% 이상 또는 가장 최신 버전을 지원 ( ,는 or을 뜻함)
> 1% and last 1 versions	점유율 1% 이상이면서 가장 최신 버전을 지원

 

 

※ 적용된 설정에 대응되는 브라우저 목록 확인 방법

> npx browserslist

 

 

 

---

 

 

 

버전 기입 방법

 

기입 방법	설명	예제
original	특정 버전을 지정	"react" : "17.0.2"
~version	마이너 버전이 명시되어 있는 경우 Patch 버전만 변경	"react" : "~17.0.2" (ex. 17.0.2인 경우 17.0.9 까지 갱신)
^version	정식버전에서 Minor 버전과 Patch 버전만 변경	"react" : "^17.0.2" (ex. ^17.0.2인 경우, 17.9.9까지 버전을 갱신 ^0일 경우는 0.0.0부터 0.0.9.까지 버전을 갱신)

현재 설치된 패키지 버전 확인하는 방법
> npm show [패키지명] version

 

npm 버전 검색은 아래 사이트를 통해 검색하면 된다.

https://www.npmjs.com/

npm

 

 

 

 

 

---

 

 

 

 

 

package.json 파일을 이용해 의존성 자동 추가하는 방법은 그냥 루트경로에서 install 하면 된다!

> npm install

 

위처럼 install 시도 시 아래와 같은 오류가 발생하였다.

기존에 python 설치가 안되어있었고, 설치해도 똑같은 오류가 발생하였다.

 

npm ERR! code 1
npm ERR! path C:\Users\dbkim\Desktop\TestProject\node_modules\node-sass
npm ERR! command failed
...
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python
...
npm ERR! gyp verb could not find "python". checking python launcher
npm ERR! gyp verb could not find "python". guessing location

 

해결 방법은 아래와 같다.

 

1. node-sass 지우기

> npm uninstall node-sass

 

2. node-modules 폴더 지우기

 

3. node-sass 재설치

> npm install node-sass

 

 

 

 

---

 

 

 

 

💡 TIPS!

 

ERR_OSSL_EVP_UNSUPPORTED 에러

      ...
      opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
      library: 'digital envelope routines',
      reason: 'unsupported',
      code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

겨우 겨우 실행 시켰더니 위와 같은 오류가 발생했다.

이 오류는 node 버전이 맞지 않는 문제로, 나의 경우 프로젝트에서는 실행될 수 없는 최신 Node.js 여서 발생한 에러였다.

따라서 18.16.1 -> 14.21.4 로 다운그레이드가 필요했다.

 

 

1. 제어판에서 Node.js 삭제

 

2. 아래 경로에 폴더가 있다면 삭제

C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\{{유저이름}}\AppData\Roaming\npm
C:\Users\{{유저이름}}\AppData\Roaming\npm-cache

 

3. 아래 사이트에서 원하는 버전 다운로드
https://nodejs.org/en/download/releases

 

 

 

 

 

 

---

참고사이트

알고 쓰자 package.json

Node.js - package.json이란?

browserslist / browserslistrc 사용법

[NodeJS] 모두 알지만 모두 모르는 package.json