Velog에서 두 번째로 포스팅했던 글이 CRA로 리액트 시작하기 였습니다.
그러나 CRA가 deprecated 된지도 꽤 되었습니다.
React 공식문서를 확인해보면 풀스택 프레임워크로 사용할 때는 Next.js, Remix, Gatsby, Expo를 사용하는 방법을 알려줍니다.
그러나 React를 프레임워크 없이 사용하기 위해서 Vite(비트)를 사용하여 리액트를 시작하는 방법을 안내해보고자 합니다.
Vite 공식문서를 확인해보면 Vue.js를 시작하는 방법을 알려줍니다.
이는 Vite가 Vue 3와 함께 개발된 툴로써 Vue.js를 시작하는 방법을 안내하는 것으로 생각합니다. 그러나 Vite는 Vue.js를 비롯하여 React, Svelte, SolidJS 등 다양한 템플릿을 지원합니다.
그러면 Vite로 리액트 프로젝트 시작하는 방법을 안내하겠습니다.
Vite란?
Vite는 빠르고 간편한 프론트엔드 빌드 도구로, 개발 환경에서 즉각적인 HMR(Hot Module Replacement)을 제공하여 개발 속도를 향상시킵니다. Webpack보다 훨씬 가볍고 빠르게 리액트 프로젝트를 시작할 수 있습니다.
Vite로 리액트 프로젝트 생성하기
1. Node.js 설치 확인
Vite를 사용하려면 Node.js가 필요합니다. 다음 명령어를 입력하여 현재 설치된 Node.js 버전을 확인해보겠습니다.
node -v만약 설치되어 있지 않다면 Node.js 공식 사이트에서 LTS 버전을 다운로드하여 설치하세요.
저는 기존에 설치했었던 18.12.1 버전을 사용해보겠습니다.
2. Vite로 프로젝트 생성
터미널을 열고 다음 명령어를 실행하여 새로운 리액트 프로젝트를 생성합니다.
npm create vite@latest "프로젝트 이름" -- --template react위 명령어에서 "프로젝트 이름" 부분에 원하는 이름으로 변경하시면 프로젝트 폴더 이름으로 설정됩니다.
그리고 npm v7 이상에서는 -- 를 반드시 붙여야 템플릿이 적용됩니다.
3. 프로젝트 폴더로 이동
cd "프로젝트 이름"4. 패키지 설치
npm install패키지 설치까지 완료하고, 프로젝트를 확인하기 쉽게 code . 을 사용하여 vscode를 실행해주었습니다. vscode 단축키 control + shift + ₩ 을 사용하면 터미널을 실행할 수 있습니다.
5. 개발 서버 실행
다음 명령어를 실행하면 로컬 개발 서버가 시작됩니다.
npm run dev
이제 브라우저에서 http://localhost:5173 주소로 접속하여 리액트 애플리케이션을 확인할 수 있습니다.
프로젝트 구조
제가 Vite로 생성된 프로젝트의 기본 폴더 구조는 다음과 같습니다.
vite-react-test/
├── node_modules/
├── public/
│ ├── vite.svg
├── src/
│ ├── assets/
│ │ ├── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── vite.config.js각 파일의 역할은 다음과 같습니다.
src/폴더: 리액트 컴포넌트가 위치하는 곳public/폴더: 정적 파일이 위치하는 곳index.html: 애플리케이션의 진입점vite.config.js: Vite 관련 설정 파일eslint.config.js: ESLint 관련 설정 파일
결론
deprecated된 CRA를 대신해 Vite를 사용하여 리액트 프로젝트를 시작하는 방법을 알아보았습니다. 이 다음 단계로는 상태 관리 라이브러리, 스타일링 도구 등을 추가하여 프로젝트를 확장할 수 있습니다.
