[React] material-ui 템플릿 사용해보기 (npm-check-updates)

koozzi·2020년 7월 26일
0

소마 프로젝트를 하면서 A부터 Z까지 하나하나 디자인하기에는 시간이 부족하다고 느껴서 Material-UI의 힘을 빌리고자 한다.

내가 직접 하나하나 만드는 것보다 쌉고수가 만들 걸 쓰는 게 백만배 천만배 더 낫다. ㅋ

1. 마음에 드는 템플릿 다운로드

테스트를 해보고 나중에 적용하기 위해 연습하는 단계이므로 무료 버전을 찾아 다운로드를 해보겠다.

Git Clone

# git clone https://github.com/devias-io/react-material-dashboard.git

'react-material-dashboard'에 복제합니다...
remote: Enumerating objects: 923, done.
remote: Total 923 (delta 0), reused 0 (delta 0), pack-reused 923
오브젝트를 받는 중: 100% (923/923), 3.12 MiB | 1.43 MiB/s, 완료.
델타를 알아내는 중: 100% (322/322), 완료.

2. 설치되어 있는 Module들 Upgrade하기

아마 템플릿을 제작했을 때랑 지금이랑 각종 Module의 Version이 다를 것이다. 사용하기 전에 최신 Version으로 업데이트를 하자.

그리고 업데이트하기 전에 또 다른 Module을 설치하자

# npm i -g npm-check-updates

npm공식 홈페이지에서 설명하는 npm-check-updates 내용을 한 번 살펴보자.

npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.
...
only modifies package.json file. Run npm install to update your installed packages and package-lock.json.
...

대충 해석해보면 package.jsondependencies에 있는 모듈들을 최신 Version으로 Upgrade 시켜준다는 말이다. 그리고 Upgrage해주는 다는 게 Local에서 실제로 Upgrade해준다는 말이 아니라 package.json파일 안의 내용만 고쳐준다는 뜻. 그래서 Local에 실제로 Upgrade하기 위해서는 npm install명령어를 입력해야한다.

나중에 잘 Upgrade 되었는지 비교하기 위해 package.jsondependencies를 한 번 살펴보자.

package.json
...
  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/styles": "^4.2.1",
    "chart.js": "^2.8.0",
    "clsx": "^1.0.4",
    "history": "^4.9.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-chartjs-2": "^2.7.6",
    "react-dom": "^16.8.6",
    "react-perfect-scrollbar": "^1.5.3",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.0.1",
    "recompose": "^0.30.0",
    "underscore": "^1.9.1",
    "uuid": "^3.3.2",
    "validate.js": "^0.13.1"
  },
  "devDependencies": {
    "eslint": "5.16.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.17.1",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^4.7.1",
    "typescript": "^3.5.1"
  }
...

그리고 npm 공식 홈페이지의 설명을 따라 npm-check-updates을 한 번 사용해보자.

// Checking package.json
# ncu
[====================] 26/26 100%

 @material-ui/core         ^4.2.1  →   ^4.11.0 
 @material-ui/icons        ^4.2.1  →    ^4.9.1 
 @material-ui/styles       ^4.2.1  →   ^4.10.0 
 chart.js                  ^2.8.0  →    ^2.9.3 
 clsx                      ^1.0.4  →    ^1.1.1 
 history                   ^4.9.0  →    ^5.0.0 
 moment                   ^2.24.0  →   ^2.27.0 
 node-sass                ^4.12.0  →   ^4.14.1 
 react                    ^16.8.6  →  ^16.13.1 
 react-chartjs-2           ^2.7.6  →    ^2.9.0 
 react-dom                ^16.8.6  →  ^16.13.1 
 react-perfect-scrollbar   ^1.5.3  →    ^1.5.8 
 react-router-dom          ^5.0.1  →    ^5.2.0 
 react-scripts             ^3.0.1  →    ^3.4.1 
 underscore                ^1.9.1  →   ^1.10.2 
 uuid                      ^3.3.2  →    ^8.2.0 
 eslint                    5.16.0  →     7.5.0 
 eslint-plugin-prettier    ^3.0.1  →    ^3.1.4 
 eslint-plugin-react      ^7.12.4  →   ^7.20.3 
 prettier                 ^1.17.1  →    ^2.0.5 
 prettier-eslint           ^8.8.2  →   ^11.0.0 
 prettier-eslint-cli       ^4.7.1  →    ^5.0.0 
 typescript                ^3.5.1  →    ^3.9.7 

Run ncu -u to upgrade package.json



// Upgrading package.json
# ncu -u
Upgrading /Users/chihunkoo/Desktop/test/react-material-dashboard/package.json
[====================] 26/26 100%

 @material-ui/core         ^4.2.1  →   ^4.11.0 
 @material-ui/icons        ^4.2.1  →    ^4.9.1 
 @material-ui/styles       ^4.2.1  →   ^4.10.0 
 chart.js                  ^2.8.0  →    ^2.9.3 
 clsx                      ^1.0.4  →    ^1.1.1 
 history                   ^4.9.0  →    ^5.0.0 
 moment                   ^2.24.0  →   ^2.27.0 
 node-sass                ^4.12.0  →   ^4.14.1 
 react                    ^16.8.6  →  ^16.13.1 
 react-chartjs-2           ^2.7.6  →    ^2.9.0 
 react-dom                ^16.8.6  →  ^16.13.1 
 react-perfect-scrollbar   ^1.5.3  →    ^1.5.8 
 react-router-dom          ^5.0.1  →    ^5.2.0 
 react-scripts             ^3.0.1  →    ^3.4.1 
 underscore                ^1.9.1  →   ^1.10.2 
 uuid                      ^3.3.2  →    ^8.2.0 
 eslint                    5.16.0  →     7.5.0 
 eslint-plugin-prettier    ^3.0.1  →    ^3.1.4 
 eslint-plugin-react      ^7.12.4  →   ^7.20.3 
 prettier                 ^1.17.1  →    ^2.0.5 
 prettier-eslint           ^8.8.2  →   ^11.0.0 
 prettier-eslint-cli       ^4.7.1  →    ^5.0.0 
 typescript                ^3.5.1  →    ^3.9.7 

Run npm install to install new versions.

npm install을 하기 전에 우선 package.json이 변경되었는지 확인해보자.

package.json
...
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.10.0",
    "chart.js": "^2.9.3",
    "clsx": "^1.1.1",
    "history": "^5.0.0",
    "moment": "^2.27.0",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.13.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "recompose": "^0.30.0",
    "underscore": "^1.10.2",
    "uuid": "^8.2.0",
    "validate.js": "^0.13.1"
  },
  "devDependencies": {
    "eslint": "7.5.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "prettier": "^2.0.5",
    "prettier-eslint": "^11.0.0",
    "prettier-eslint-cli": "^5.0.0",
    "typescript": "^3.9.7"
  }
...

npm 공식 문서에 따르면 지금까지 우리가 한 것은 upgrade할 수 있는 것들을 확인하고 package.json 파일에서만 Upgrade한 것이다. 그러면 실제 로컬에 package.json 파일에 명시되어 있는 Module들을 설치해보자.

# npm install

3. npm start 오류

사실 이렇게 Version만 Upgrade해주면 아무런 문제가 없을 줄 알았다. 그런데 npm start 명령어를 입력했을 때 아주 아주 긴 오류 Message가 떴다. 그리고 해결하는 방법까지 같이 명시되어 있는데 그 해결책을 한 번 살펴보자!

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/chihunkoo/Desktop/test/react-material-dashboard/node_modules/eslint (version: 7.5.0) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.
... 

project dependency tree에 문제가 있다고 한다. 이 문제를 해결하는 방법을 밑에 알려주고 있다. 따라해보자.

package-lock.json 파일 삭제하고, node_module디렉토리 삭제하고, package.json에서 "eslint" 삭제하고, 마지막으로 npm install.

다시 npm start

# npm start
Compiled successfully!

You can now view react-material-dashboard in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.68.222:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

성공이다!!

사실 마지막에 npm start을 했을 때, uuid관련 오류가 떴다. 프로젝트 내 모든
import uuid from 'uuid/v1';import {v1 as uuid} from "uuid";로 바꿔주니까 해결되었다.

0개의 댓글