1) Node.js 설치확인
node --version
2) yarn
- 반드시 Node.js가 설치된 상태에서 진행
npm install -g yarn
3) visual studio code 도움되는 extension
| Color Highlight | 색상 코드 값을 실제 그 색상으로 강조한다 |
| ESLint | Javascript 구문 검사 기능 터미널에서 npm install -g eslint 수행 필요. |
| Image preview | 이미지 파일을 소스코드 줄번호 옆에 미리보기 표시함 |
| npm Intellisense | import 할 모듈의 이름이나 경로에 대한 자동완성 제공 |
| Prettier - Code formatter | 코드의 줄바꿈, 들여쓰기등을 자동으로 정렬한다. 사용방법: Ctrl+Shift+P > Format Document 명령 선 택 |
| vscode-styled components | JS 구문안에서 사용될 SCSS구문을 인식할 수 있게 함 |
프로젝트 생성하기
1) 프로젝트 생성 및 초기화
- 프로젝트 이름은 영어 소문자만 사용 가능하다
yarn create react-app 프로젝트이름
2) yarn berry 버전으로 변경
- 프로젝트 폴더 안에서 명령프롬포트 실행후 명령어 순차적으로 실행
yarn set version berryyarn install
3) 설정파일 수정
.yarnc.yml
라이브러리를 node-mudules 에 보관하겠다
nodeLinker : pnp로 변경
package.json
- eslintConfig 블록을 인식 못하게 한다
<= vscode가 이 부분을 인식못하기 때문
- key값을 바꾸거나 블록을 지우거나 한다
- 변경사항을 반영하기 위해 다시 install
yarn install
4) git 관련 파일 삭제
rmdir /q /s .git
del .gitignore
5) 연결할 git 리포지토리 레벨에서
.gitignore 추가
node_modules/
.vscode/
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
6) 추가 패키지 설치
| 패키지 이름 | 설명 |
| react-router-dom | SPA앱 만들 때 사용 URL에 따라 실행할 JavaScript를 분기한다 |
| prop-types | props값의 데이터 타입을 설정한다 |
| react-helmet-async | <head> 태그 내의 SEO관련 태그를 설정한다 |
yarn add react-router-dom prop-types react-helmet-async한꺼번에 추가할 수 있다.
7) 프로젝트 폴더 위치에서
yarn startRouter 적용
▽ index.js
import { BrowserRouter } from 'react-router-dom';- index.js 에서 <React.StrictMode><App /></React.StrictMode> 을 <BrowserRouter><App /></BrowserRouter> 으로 변경
▽ App.js
import { Link, Routes, Route } from "react-router-dom";
반응형