[React] Vite로 React 프로젝트 생성

wldud·2024년 7월 19일

React

목록 보기
1/8
post-thumbnail

코치님의 쇼핑몰 만들기 프로젝트를 다시 만들어보면서 시간이 걸리더라도 코드를 하나씩 뜯어보며 공부해야겠다..!
vite를 이용해서 React 프로젝트를 생성해주었다.

vite란?

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다.
node.js가 기본적으로 설치되어 있어야 한다.

여태까지 CRA로만 react프로젝트를 생성해왔었는데 vite는 신기했다.

CRA 대신 vite를 쓰는 이유는?

CRA는 javascript로 구성된 웹팩을 쓰는데 속도가 느린편이다. 그래서 Esbuild 기반으로 만들어진 빌드 툴인 vite를 사용한다. Esbuild는 속도가 빠르다.

vite로 react프로젝트 생성하는 순서

  1. npm init vite
    를 실행하고 선택하여 셋팅해주면 된다.
  2. cd 프로젝트명
    프로젝트로 이동해서
  3. npm install
    node_modules가 자동으로 깔리지 않기 때문에 해줌

npm install은 왜 사용할까?
"현재 프로젝트에서 참조하도록한 npm 모듈들을 빌드한다."
현재 프로젝트의 package.json에 적힌 모든 패키지를 현재 경로내 node_modules 폴더에 설치한다.
참고블로그

  1. npm run dev해주면 실행된다. 밑에가 생성된 화면!

이렇게 해주면 vite로 react 프로젝트 생성하기 완료!
이제 코드만 잘 짜주면 된다..

0개의 댓글