React 프로젝트를 생성할 때 가장 많이 사용되는 방법 2가지가 있습니다. 하나는 Create React App이고, 다른 하나는 Vite입니다.
현 시점에서 대부분의 사람들은 Vite를 추천하고, 이 글에서도 Vite로 프로젝트를 생성할 것입니다. 왜 Create React App이 아닌 Vite가 추천되는지 부터 살펴보도록 하겠습니다.
CRA(Create React App) vs Vite
ㆍVite의 개발 서버 시작 및 코드 변경 시 화면 갱신 속도가 훨씬 빠르다.
ㆍVite의 빌드 속도가 훨씬 빠르다.
ㆍVite는 복잡한 설정 없이 빠르게 프로젝트를 시작할 수 있다.
ㆍVite는 계속해서 발전 중이고, CRA는 개발이 중단되었다.
* 공식 사이트에 Create React App is deprecated. 라고 되어 있다. 이미 만들어져 있는 프로젝트는 모르겠지만 새로 시작하는 프로젝트는 CRA를 선택할 이유가 없다.
 |
| CRA 공식 홈페이지 |
Next.js나 Remix로 시작해야 하는 거 아닌가?
공식 문서에 보면 Next.js나 Remix같은 풀스택 React 프레임워크로 시작하는 걸 권장하고 있습니다. 고수들은 물론 그렇게 하는 게 좋겠지만 저같이 React도 제대로 모르는 입장에서는 일단 Vite를 이용해 순수 React 프로젝트로 시작하는 게 좋을 것 같습니다.
성능 때문에 Next.js를 걷어내는 경우도 있고, React -> Next.js로 전환할 수 있는 가이드도 잘되어 있다고 하니 처음부터 프레임워크 적용 문제로 고민하지는 않아도 될 것 같습니다.
Javascript 인터넷 강좌로 유명한 제로초님도 실제 개발한 서비스에서 안 썼다고 합니다. 아래 영상 한 번 보고 시작하는 것도 좋을 것 같습니다.
https://www.youtube.com/watch?v=XfuYV2JxVWk
0. Vite 공식 사이트 보기
사실 Vite 공식 사이트에 훨씬 자세하고 깔끔하게 잘나와 있습니다.
하지만 공식 사이트를 보기 어려워하시는 분들이 있을 수도 있고, 저도 공부하면서 정리를 해 놓고 싶기 때문에 제 방식대로 프로젝트 생성 과정을 정리해보겠습니다.
1. Node.js 설치
1. 터미널에서 node -v 명령어를 입력해서 설치 여부 및 버전 확인2. https://nodejs.org/ko 에서 다운로드 후 설치
※ Vite에서 요구하는 최소 node 버전이 있으므로 Vite 공식 사이트에서 확인해보는 것이 좋습니다.
2. 프로젝트 생성
1. 터미널 실행(윈도우 기준 명령 프롬프트 또는 Power Shell 또는 VSCode 등의 IDE에서 제공하는 터미널)
2. 프로젝트를 생성할 경로로 이동(프로젝트를 생성하면 자동으로 프로젝트 이름의 폴더가 생성됩니다.)
3. 아래 그림과 같이 따라하면 된다.
- npm create vite@latest 입력
- 프로젝트 이름 입력
- 프레임워크 선택(React 선택, 방향키로 선택 후 엔터)
- 추가 설정(Javascript 선택)
 |
| Vite로 React 프로젝트를 생성하는 전체 과정 |
② Typescript + SWC : 기본 문법으로 Typescript 사용하고, 빌드 시간을 단축 시키지만 추가적인 설정이 필요
④ Javascript + SWC : 기본 문법으로 Javascript 사용하고, 빌드 시간을 단축 시키지만 추가적인 설정이 필요
3. 의존성 설치 및 실행
1. 터미널에서 프로젝트 폴더로 이동
2. npm install 입력(의존성 설치)
3. npm run dev 입력(개발서버 실행)
4. 브라우저에서 http://localhost:5173 실행해서 테스트 페이지 제대로 뜨는지 확인
 |
| npm run dev 실행 후 |
