NPM 패키지 설치 방법

패키지 설치에 관한 정리입니다 🖐

혼동해서 사용하여 프로젝트를 같이하는 다른사람에게 피해가 가지 않도록 정리를 해봤습니다.

npm install vs npm install [패키지]

두개의 명령어는 비슷하게 생겼지만 다른 역할을 합니다.

• npm intstall
  • pakage.json에 명시되어있는 패키지들을 모두 설치
  • 프로젝트를 처음 내려받았을 때 의존성 패키지들을 모두 설치하려 할 때 사용.
• npm install [패키지명]
  • 명시한 특정 패키지를 설치
  • 프로젝트 개발에 필요한 패키지를 설치 할 때 사용.

npm install

dependencies, devDependencies에 명시된 패지키지만 설치합니다.

npm install 

npm install -production

dependencies에 명시된 패지키지만 설치합니다.

npm install -production

npm install [패키지] 옵션

패키지의 사용 범위에 따라서 옵션을 부여하여 설치가 가능합니다.

설명을 위해 react 프로젝트를 처음 생성했을 때 package.json 파일의 형태를 보면 아래와 같습니다. 패키지 설치는 많이 사용하는 eslint를 기준으로 설치를 해보겠습니다.

{
  "name": "auto-eslint-check",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }, <<<< (1)
  "scripts": {...},
  "browserslist": {...}
}

1. npm install [패키지명]

npm install eslint

or 

npm i eslint

실행결과

{
  "name": "auto-eslint-check",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "eslint": "^8.21.0", <<<<< 신규추가
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }, <<<< (1)
  "scripts": {...},
  "browserslist": {...}
}

실행 결과를 보면 "dependencies" 속성의 객체에 추가된 것을 확인 할 수 있습니다. dependencies 속성에 추가되는 패키지는 실제 배포되는 코드에 포함되며 앱 구동에 필요한 의존성 패키지들 입니다.

2. npm install -D [패키지명]

npm install -D eslint

or 

npm i -D eslint

실행결과

{
  "name": "auto-eslint-check",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "eslint": "^8.21.0", 
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }, <<<< (1)
  "scripts": {...},
  "browserslist": {...}
},
"devDependencies": { <<<<< 신규추가
  "eslint": "^8.21.0" <<<<< 신규추가
}

실행 결과를 보면 "devDependencies" 속성의 객체에 추가된 것을 확인 할 수 있습니다. devDependencies 속성에 추가되는 패키지는 실제 배포되는 코드에는 포함하지 않는 개발 단계에만 사용되는 의존성 패키지들 입니다.

3. npm install -g [패키지명]

npm install -g eslint

or 

npm i -g eslint

위의 코드는 실행하게되면 package.json에 추가되는 것이 아니라, 시스템 폴더에 전역패키지로 설치되게 됩니다. 전역패키지로 설치되면 패키지의 명령어를 실행할 때 경로없이 실행이 가능하며 다른 프로젝트에도 적용이 되기 때문에 편리한 점이 있지만, 전역패키지가 아닌 패키지를 설치 했을 때 충돌이나서 패키지를 삭제해야 하는 경우가 생길 수 있습니다.

글로벌 패키지 삭제 참고