React 설치하기

패키지 관련 설명 및 주요 기능 참고 : 2024.08.21 - [CS] - NPM, NPX, YARN

 

※ 모든 과정은 명령 프롬포트(터미널)에서 진행

npm과 yarn 둘 중 선호하는 것으로 선택하여 설치하면 되며, 이후 라이브러리 등을 다운 받을 때는 선택한 패키지에 맞춰 진행하면 된다.

 

npm 설치

1. npm create vite@latest 프로젝트명  // 현재 폴더에 생성하고 싶은 경우 프로젝트명 대신  . (점) 입력
2. 프레임워크 선택 (React)
3. 사용할 언어 선택

SWC
3번에서 언어 선택 시 JS + SWC 혹은 TS + SWC 옵션이 있는데, 이 때 SWC란?
자바스크립트 프로젝트의 컴파일과 번들링에 모두 사용할 수 있는 rust 언어로 제작된 툴이다. 기존의 바벨(Babel)을 대체 할 수 있으며, Next.js 팀에서 권장하는 툴이기도 하다.

 

---

 

yarn 설치

yarn을 사용하기 위해서는 별도 설치 필요
npm install -g yarn 입력 및 엔터
   [실패 시]
    - winodw 환경: https://classic.yarnpkg.com/latest.msi 사이트에서 파일을 내려받아 직접 설치
    - macOS:  homebrew 사이트(https://brew.sh) 에서 아래 이미지에 있는 코드를 복사하여 터미널에 붙여놓고 엔터
                      설치가 완료되면 "brew install yarn"을 입력하여 yarn 설치

 

1. yarn create react-app 프로젝트명
2. (선택) yarn set version berry // 패키지 파일 용량 최적화
3. (2번 진행했을 경우) yarn install
4. (2번 진행했을 경우) .yarnrc.yml 파일의 1라인 node_modules를 pnp로 변경
5. typescript로 설치하고 싶을 경우 : yarn create react-app "폴더명" --template typescript