[React] vite 사용하여 react 개발환경 시작하기

최근들어 `CRA`보다 `vite`를 선호한다는 소식을 들어 이번 코드잇 강의를 수강할 때 사용해볼까 하는 마음으로 알아보았다. 강의 내에서 제작하는 프로젝트들을 `vite`를 사용하여 사용하려 한다.

1. Vite 란?

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

https://ko.vitejs.dev/ (기본적으로 node.js가 설치되어있어야 하니 주의)

Vite

 

React 만들 때 CRA(create react-app: 리액트 프로젝트를 시작할 때 필요한 개발 환경을 세팅 해주는 도구) 을 사용하였는데, 자바스크립트는 interpreted 언어이기 때문에 처리해야 할 코드 양이 방대한 경우 CRA를 사용하면 느리게 느껴질 수 있다고 한다. 

이에 개발자들은 esbuild와 같은 빠른 속도를 가지고 있는 자바스크립트 빌드 툴을 더 선호하게 되었는데,

`vite`는  esbuild를 기반으로 한 프론트엔드 빌드툴이다. 

 

 

---

프로젝트 생성

npm, yarn, npm으로 프로젝트 생성이 가능하다. 이전부터 npm을 사용하였기에, npm을 이용하여 프로젝트를 생성했다.

npm init vite

생성을 하게 되면 아래와 같은 vite를이용하여 진행하겠습니까? 라는 맥락이 나타나며 `y`를 입력하여 다음으로 넘어간다.

아래와 같은 방식으로도 생성할 수 있다. 사용가능한 언어 확인하기

npm create vite@latest [프로젝트명] --template [사용할 언어]

 

프로젝트 이름과 패키지 이름을 정하고 사용할 프레임워크를 선택한다.

모자이크 한 부분은 컴퓨터의 root 부분인 유저이름 저장위치 입니다

언어도 선택하여야 하는데, SWC를 자세히 몰라 아래의 내용을 참고하였다. 우선은 JavaScript + SWC를 선택해보았다.

https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/

모두 선택하게 되면 아래와 같은 명령어를 입력하여 시작한다. 파일 이름을 codit_foodEat으로 지었기에 `cd`를 이용하여 파일 위치를 변경하여주고, npm 명령어를 통해 react 프로젝트를 실행한다.

 

아래와 같이 실행되는데 해당 local 주소로 이동하면 react 프로젝트의 페이지가 열린다.

해당 작업을 그만두려면 `ctrl+C`를 입력하면 작업을 끝낼 수 있다.

 

 

💬참고문서

• 왜 Create React App 대신 Vite일까
• swc 웹 공식 문서