[React] vite를 통해서 리액트 프로젝트 생성 및 실행

프로젝트 생성

우선 node.js가 설치되어있어야 한다.

필자의 node 버전은 22.14.0이다.

맥에서 Homebrew를 통해서 22버전을 다운로드하는 명령어는 아래와 같다.

brew install node@22

 

이후 프로젝트 폴더를 생성할 경로로 이동한다.

cd cd /Users/...

 

아래의 명령어를 입력한다.

npm create vite@latest

 

 

위와 같은 선택과정을 생략하려면 아래의 명령어를 입력한다.

npm create vite@latest my-react-app -- --template react

• npm create: npm을 사용해 새 프로젝트를 생성하는 명령어
• vite@latest: vite의 최신 버전을 사용
• my-react-app:생성할 프로젝트 폴더명
• --: 이후의 옵션들을 vite 명령어에 전달한다는 의미, npm과 vite 명령어의 옵션을 구분하는 구분자
• --template react: vite의 템플릿 옵션, react 템플릿을 사용하겠다는 의미, 다른 옵션들: react-ts(TypeScript), vue, vanilla 등

 

이렇게 하면 아래와 같이 프로젝트가 생성되었다.

 

라이브러리 다운로드

프로젝트를 생성했다고해서 바로 리액트를 이용할 수 있는 것은 아니다.

관련 라이브러리를 설치하지 않았기 때문이다.

필요 라이브러리 목록은 package.json에 적혀있다.

 

다시 이전에 생성한 first-project 경로로 이동한다.

 

이후 아래의 명령어를 통해서 라이브러리를 다운로드 받는다.

npm i

 

완료가 되었다면 아래와 같이 node_modules 라는 폴더가 생성되어있고, 안에 라이브러리들이 다운로드되어있는 것을 확인할 수 있다.

 

추가적으로 아래의 명령어로 필수적인 라이브러리를 다운로드 받는 것이 좋다.

npm install axios
npm install react-router-dom

• axios: 서버(API)와 통신하기 위한 도구로, GET, POST, PUT, DELETE 요청을 쉽게 보낼 수 있게 도와주는 라이브러리
• react-router-dom: react 애플리케이션에서 여러 페이지처럼 동작하게 만들기 위한 라우팅 기능을 제공하는 라이브러리

 

 

프로젝트 실행

프로젝트 실행 명령어는 3개이다.

• npm run dev: 로컬 개발 환경 시작(기본 포트 5173)(개발 서버 실행)
• npm run build: 코드를 최적화하여 배포용 파일 생성(프로덕션용 빌드)
• npm run preview: 빌드 후 생성된 dist 폴더의 내용을 로컬에서 실행(기본 포트 4173)(빌드된 결과물 미리보기)

 

npm run dev(개발 서버 실행)

• 로컬 개발 환경 시작 (기본 포트 5173)
• Hot Module Replacement (HMR) 지원
• 코드 수정시 실시간 반영
• 개발 중 디버깅에 최적화
• 예: http://localhost:5173

O + Enter를 누르면 브라우저에서 프로젝트가 실행된다.

 

npm run build(프로덕션용 빌드)

• 소스 코드를 최적화하여 배포용 파일 생성
• dist 폴더에 결과물 생성
• 코드 압축/최적화
• 불필요한 개발 코드 제거
• 성능 최적화

 

npm run preview(빌드된 결과물 미리보기)

• build 후 생성된 dist 폴더의 내용을 로컬에서 실행
• 실제 배포 전 최종 확인용
• 기본 포트 4173
• 예: http://localhost:4173

O + Enter를 누르면 브라우저에서 프로젝트가 실행된다.