[React] VS code에서 개발하기 ( + mui 사용하기)

■ node.js 설치

https://nodejs.org/ko

Node.js

■ vscode 설치

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

■ 개발하기

1. [파일] - [폴더 열기] 클릭

2. 해당 폴더 클릭

3. [터미널]에 아래 코드 입력

npx create-react-app 프로젝트명

4. Success! 가 떴다면 성공

5. [탐색기]에 파일이 생성 되었음

6. [login] - [login] - [src] - [App.js]가 메인 화면이며,

 

7. 만들어진 새 프로젝트에서 [login] - 우클릭 - [통합 터미널에서 열기] 클릭

 

8. 터미널 창에 아래 코드를 입력한다.

npm start

9. 성공 되면 react 메인 화면이 뜬다.

react 메인 화면

 

■ mui 사용하기 

https://mui.com/

MUI: The React component library you always wanted

1. 터미널에 아래 코드 입력

npm install @mui/material @emotion/react @emotion/styled

 

 

■ mui 커스텀 스타일 하기

https://mui.com/system/styles/basics/

1. 아래 코드 입력

npm install @mui/styles

 

2. 아래와 같은 에러가 뜬다면 

PS E:\2. 과제\login\login> npm install @mui/styles
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: login@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.11.13
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2023-03-31T02_13_22_900Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER\AppData\Local\npm-cache\_logs\2023-03-31T02_13_22_900Z-debug-0.log

아래 코드를 입력해 준다.

npm install --legacy-peer-deps

※ 참고 블로그

https://www.korecmblog.com/ERESOLVE-unable-to-resolve-dependency-tree/