vite로 react 설치하기

2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.

---

1. 폴더 생성

 

2. VSCode로 폴더 열기

 

3. 터미널 열기(Crtl + j) // git bash로 열어주세요.

 

4. Vite를 이용하여 프로젝트 생성

npm create vite@latest

vite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,
우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다.

 

5. 설치과정

Select a framework: React (리액트 사용할거니까)

Select a variant: TypeScript / TypeScript + SWC

둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Speedy Web Compiler의 약자로 코드를 빠르게 컴파일 할 수 있도록 도와주는 도구라고 생각하시면 됩니다.

 

6. 의존성 설치

npm install

npm install을 입력하여 필요한 의존성들을 설치해줍니다.

 

7. 5173포트에서 잘 돌아가는지 확인하기

vite에서 react를 실행시키면 5173포트에서 사용됩니다.

npm run dev

위의 명령어를 이용하여 실행시키고 잘 돌아가는지 확인해보세요.

Crtl을 누른상태로 Local의 주소를 클릭하면 다음과 같은 화면에서 확인할 수 있습니다.

위 단계들을 따르면 Vite와 TypeScript를 사용한 React 프로젝트를 쉽게 설정할 수 있습니다.

따라하시면서 잘 안되시는 분들은 댓글 남겨주시면 빠르게 확인후에 도와드리겠습니다.