[React] npm install 및 package.json에 dependencies 추가

 

 

npm install로 dependencies 추가할 때  package.json에도 반영되게 해보자

 

 

react 프로젝트 생성 시 기본으로 만들어지는 package.json

{
  "name": "프로젝트명",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
 

 

여기에 필요한 dependencies를 설치해보자!

예시에서는 react-router-dom을 설치한다

npm install react-router-dom

터미널에 상기 명령어를 입력해주면 되는데, 보통 이런 식으로만 설치한다

하지만 이렇게 하면 package.json은 그대로다..

 

 

 

'--save'를 넣어서 package.json에 반영되도록 해주자

npm install react-router-dom --save

 

 

"react-router-dom": "^6.27.0", 줄이 추가된 걸 볼 수 있다

{
  "name": "프로젝트명",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0",     
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}