설치 및 환경 설정

> nvm install --lts
> nvm use 16.18.0
// > nvm alias default 16.13.0

> npm i npx -g
> npm i yarn -g

reactbasic

> npx create-react-app reactbasic
// or with typescript
// > npx create-react-app reactbasic --template typescript

// @testing-library 함께 설치됨!

rbbasic (vite)

> yarn create vite rbvite --template react
// or with typescript
// > yarn create vite rbvite --template react-ts
// > npm init vite@latest rbvite

> cd rbvite
> yarn install // = npm i
> yarn build // = npm run build

위 명령으로 설치한 후 rbvite 디렉터리로 이동해 보면 아래와 같이 node_modules 폴더가 없다.

따라서 yarn insall 명령을 통해 package.json의 dependencies와 devDependencies에 있는 것들을 설치해주어야 한다.

리액트 서버 구동

reactbasic

> yarn start // default: 3000번 포트
> PORT=4000 yarn start // 4000번 포트로 실행

rbvite

> yarn dev // default: 5173 
> yarn dev --port 4001 --host 192.168....

다른 pc에서 접속할 수 있도록 하려면 --host 옵션을 사용한다.

마이그레이션

이미 vite를 사용하지 않고 진행중인 프로젝트에서 vite를 사용하고 싶다면?

reactbasic 프로젝트에 vite를 사용해보자. 먼저 폴더 구조를 맞춰줘야 할 것 같다.

폴더 구조 및 파일 위치 맞춰주기

vite.config.js

vite를 사용하는 프로젝트엔 vite.config.js라는 파일이 있다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()]
})

이 파일을 reactbasic 하위로 복사한다.

index.html

rbvite에 index.html 파일 위치는 public 하위가 아닌 rbvite 바로 하위에 위치한다. reactbasic은 public/index.html 이렇게 존재한다. 이미 존재하는 이 파일은 일단 놔두고 rbvite/index.html 파일을 reactbasic/index.html 로 복사한다.

App.js / index.js

vite를 사용하는 프로젝트의 확장자는 .jsx다. reactbasic/src 하위의 App.js와 index.js도 확장자를 jsx로 바꿔주자.

그리고 이전에 복사한 index.html 파일 내 <script 태그에 src 속성에서 main.jsx를 index.jsx로 바꿔줘야한다.

package.json

rbvite의 package.json 을 살펴보자.

빨간 박스 안에 있는 것들을 reactbasic 에서 설치해준다.

// reactbasic
> yarn add @types/react @types/react-dom @vitejs/plugin-react vite -D

그리고 scripts 내용도 아래와 같이 수정해주자.

끝! 이제 서버를 구동시켜 보자!

// reactbasic
> yarn dev

5174 포트로 열렸다. 이제 이 포트로 접속해보면 다음과 같은 화면이 나온다.

일단 성공적으로 첫 화면을 띄우긴 했지만 프로젝트를 진행하다보면 많은 오류를 만날 수도 있다. 그럴 때마다 하나씩 해결해보면 된다!