[React] 프로젝트 생성하기 - Vite

y1nlog·2025년 1월 21일

CRA(Create React App) 메소드보다 더 빠른 셋업을 지원하는 Vite버전으로 기록해보려 한다.

리액트 프로젝트 생성

터미널 zsh 환경

  1. cd "원하는 디렉토리"
  2. 아래 코드스니펫 실행
yarn create vite (프로젝트명) --template react

그러면 1.30초만에 리액트 프로젝트 생성이
일단 완료된다.

아래 문구를 보면, Now run:으로 지정해준 코드들을 실행해주면 되겠다.

여기서부터 나는 VScode로 이동하여 작업.

VScode 환경

새롭게 생긴 내 'counter-app' 폴더로 이동해 주자.

이제 vscode에서 터미널 열기.

MacOS기준
터미널 단축키 : ctrl + shift + ₩ (` 혹은 ~)

터미널 창에서 할 일 3가지.

  1. cd counter-app
  2. yarn
  3. yarn dev

vscode에서 디렉토리를 지정해 열어 준 지금은, 1번 skip하고 진행 가능하다.

이렇게 실행해주면 6.59초라는 짧은 시간 내에
모든 리액트 프로젝트 셋업 과정이 끝난다.

이제 리액트로 생성한 결과 브라우저는 Local 링크에서 확인할 수 있다.

profile
FE / Data Science

0개의 댓글