[React] 2. React App 생성

Feb 11, 2026

Contents

1. vite로 프로젝트 생성하기

우선 vite로 프로젝트를 생성하기 위해 다음과 같은 코드를 터미널에 입력한다.


npm ceate vite@latest

vite 패키지가 설치되어있지 않은 경우라면 설치해도 되는지 물어보는 단계가 나온다. y를 입력해서 설치를 진행해준다.

만일 vite가 이미 설치되어있다면 다음과 같은 단계는 생략된다.

그런 다음에는 프로젝트 이름을 설정하는 단계가 나오는데, 현재는 실습중이니 section04로 입력한다. 이 때 아무것도 입력하지 않는다면 vite-project라는 디폴트 네임으로 설정된다.

다음으로는 프레임워크를 선택하는 단계가 나오는데 방향키를 사용해서 react를 선택해주고 엔터를 눌러 다음 단계로 넘어갈 수 있다.

다음 단계로는 리액트의 여러 버전들 중에 어떤 버전의 리액트 프레임워크를 사용할건지 물어보는 단계가 나온다.

현재 진행하는 프로젝트는 타입스크립트나 SWC를 사용하지 않기 때문에 자바스크립트를 선택하여 다음 단계로 넘어가주자.

기본적인 설정이 완료된 리액트 앱 생성 완료!

💡

jpg, png, svg, mp3, avi, ttf 등 이미지나 영상, 폰트 등 코드가 아닌 정적인 파일들을 보관하는 곳

💡

source의 약자로 실제로 우리가 만든 코드를 넣어두는 곳,

package.json 에서 스크립트를 확인해보면 앱을 실행할 수 있는 여러 명령어를 확인할 수 있는데, 개발 과정에서에서 실행할 때는 dev 를 사용할 수 있다.


npm run dev

로컬에서 서버가 정상적으로 실행되는 것을 확인할 수 있다.

서버가 실행 중일 때 이를 조작할 수 있는 명령어는 다음에서 살펴보자.

앱을 실행하게 되면 press h + enter 라는 메세지가 나타나는걸 확인할 수 있다.

h를 입력해보면 사용할 수 있는 여러 명령어가 나온다.

이미지에 보이는 순으로 차례대로 살펴보면 다음과 같다.