[ React ] 개인 프로젝트 리액트 개발환경 셋팅

Node.js 설치

Node.js (nodejs.org)

Node.js

 

Yarn 설치

Installation | Yarn (yarnpkg.com)

Yarn

 

Visual Studio Code 설치

Visual Studio Code - Code Editing. Redefined

Visual Studio Code - Code Editing. Redefined

 

Visual Studio Code Plug-in 설치

className Completion in CSS	CSS 자동완성
CSS Formatter	CSS 자동 줄맞춤
Doxygen Documentation Generator	함수 주석 자동 생성
Git History	Git 이력 표시
GitLens — Git supercharged	Git 사용 편의성
Guides	들여쓰기 가이드라인을 그려줍니다.
Korean(사용법) Language Pack for Visual Studio Code	한국어 언어팩
Prettier - Code formatter	코드 색 표시 및 정렬
React Extension Pack	리액트 편의 기능 모음 Reactjs code snippets, ESLint, npm, JavaScript (ES6) code snippets, Search node_modules, Npm Intellisense, Path Intellisense
Relative Path	상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구
Visual Studio IntelliCode	코드 자동완성 추천
vscode-js-import	import 기능
Reactjs code snippets	리엑트 코드 자동완성
ESLint	문법 검사
npm	npm 지원
JavaScript (ES6) code snippets	JavaScript (ES6) 코드 자동완성
Search node_modules	노드 모듈 검색
Npm Intellisense	import 패키지 자동완성
Path Intellisense	import 경로 자동완성

 

Visual Studio Code 설정

 

Chrome - Tool 설치

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko 

Redux DevTools

 

새 프로젝트 생성

npx create-react-app test

npx create-react-app test --template typescript

저는 C드라이브에 test 로 생성했습니다. 타입스크립트로 생성하려면 밑에 있는 코드를 실행하면 됩니다. 

 

VSCode로 해당 디렉토리를 열어보면 이렇게 보입니다. 

 

yarn start

VSCode에서 터미널을 열어서 yarn start를 입력해줍니다. 

 

이 화면이 뜨면 완료!

 

MUI 설치

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

https://mui.com/

MUI: The React component library you always wanted