첫 리액트 프로젝트 생성하기

프론트엔드 개발 툴 설치

리액트 프레임워크를 더 편하게 개발할 수 있도록 해주는 도구인 Vite를 설치하겠습니다.

Node.js가 설치되어 있다면 아래의 명령어를 명령 프롬프트나 터미널에 입력해서 Vite를 설치해주시면 됩니다.

npm install -g vite@latest

Vite를 이용해 리액트 프로젝트 생성하기

첫 번째 리액트 프로젝트를 생성하기 위해서는 명령 프롬프트에 아래와 같은 명령어를 작성해서 프로젝트를 생성해야 합니다.

npm create vite@latest

명령어를 실행하면 프로젝트의 이름, 프레임워크, 언어를 선택하는 화면이 나옵니다.

프로젝트 이름을 first-react-project, 프레임워크는 React, 언어는 JavaScript를 선택하시면 됩니다.

 

프로젝트 이름, 프레임워크, 언어 선택하셨다면 프로젝트 이름으로 새로운 폴더가 생성됩니다.

 

폴더에는 package.json을 포함한 여러가지 파일과 폴더들이 생성되게 됩니다.

 

 

 

 

 

 

 

 

리액트 프로젝트 실행하기

생성된 리액트 프로젝트를 실행하려면 먼저 생성된 폴더로 이동해야합니다. 아래의 명령어를 사용해서 생성된 폴더로 이동합니다.

cd first-react-project

그런 다음 아래의 명령어를 사용해서 package.json 파일에 정의된 라이브러리를 다운받습니다.

npm install

설치가 정상적으로 진행되었다면 아래의 명령어를 사용해 리액트 프로젝트를 개발자용으로 실행합니다.

npm run dev

서버가 정상적으로 실행되었다면 http://localhost:5173/ 으로 이동하면 구동되고 있는 리액트 프로젝트의 모습을 볼 수 있습니다.