새로운 프로젝트를 시작하면서 React + Vite 기반으로 개발 환경을 구성하기로 결정했다.
이 글은 이후 비슷한 환경을 다시 세팅할 때 참고할 수 있도록, React + Vite 프로젝트 생성 방법을 정리한 기록이다.
또한 이번 프로젝트에서는 프론트엔드 생산성과 유지보수를 고려해
스타일링은 Tailwind CSS, 데이터 중심 UI는 AG Grid 또는 MUI Data Grid를 적용할 예정이다.
1. Vite 버전 확인 및 프로젝트 생성
# Vite 버전 확인
npx vite --version
# Vite 프로젝트 생성
npm create vite2. 프로젝트 이름 설정
프로젝트 생성 시 원하는 이름을 입력한다.
3. 프레임워크 및 라이브러리 선택
React 등 사용할 프레임워크를 선택한다.
4. 프로그래밍 언어 선택
TypeScript 또는 JavaScript 중 프로젝트에 맞는 언어를 선택한다.
5. 프로젝트 폴더 이동 및 패키지 설치
# 생성한 프로젝트 폴더로 이동
cd vite-project
# 의존성 패키지 설치
npm install6. 프로젝트 실행
프로젝트 루트 경로에서 package.json 파일을 확인하면
로컬 실행을 위한 스크립트를 확인할 수 있다.
일반적으로 Vite 프로젝트는 아래 명령어로 실행한다.
npm run dev해당 명령어를 실행하면 개발 서버가 실행되며,
터미널에 접속 가능한 로컬 주소가 함께 출력된다.
7. 접속
개발 서버 실행 후, 터미널에 출력된 주소(기본적으로 http://localhost:5173)로 접속하면
아래와 같이 Vite + React 기본 화면을 확인할 수 있다.
