더 많이 실패하기

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

개념정리/웹 프로그래밍

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

김발자~ 2024. 10. 13. 10:15
반응형

 

 

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

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
  "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"
    ]
  }
}
 
 cs

 

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

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

1
npm install react-router-dom
 cs

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

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

 

 

 

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

1
npm install react-router-dom --save
 cs

 

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
  "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"
    ]
  }
}
 
 cs

 

이렇게 해야 서버에 반영했을 때나 나중에 한번에 설치가 필요할 때(버전이 오래되었을 때 등) npm install 만으로 업데이트 및 설치가 가능해진다

 

반응형

'개념정리 > 웹 프로그래밍' 카테고리의 다른 글

[Spring] postconstruct predestroy resource cannot be resolved to a type spring  (0) 2023.10.20
[Thymleaf] spelevaluationexception: property or field 'name' cannot be found on null  (0) 2023.09.16
[Spring/JPA] java.lang.IllegalArgumentException: Unknown return value type: java.lang.Integer  (0) 2023.08.16
[JPA] java.lang.IllegalArgumentException: Could not locate named parameter [name], expecting one of []  (0) 2023.07.16
[cafe24 웹 호스팅/spring] cafe24 MariaDB 연결 시 한글 깨짐  (0) 2023.07.09
'개념정리/웹 프로그래밍' Related Articles more
Comments