[React] 프로젝트 생성방법 vite, CRA

 

 

 

Create React Aap

 

 

React 프로젝트 생성방법

React 프로젝트는 create react app 또는 vite를 이용한 생성방법과, NextJS를 통한 생성방법 2가지가 있습니다.

이 글은 vite를 이용한 react 프로젝트 생성방법입니다.

 

 

 

1. Node.js 다운로드

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js 홈페이지에 접속하여 다운로드 해줍니다.

 

 

React를 하는데 Node.js를 다운받는 이유?

브라우저에서 돌아가는 웹 ❌
Node.js에서 돌아가는 빌드 프로그램 ⭕

 

CRA는 ‘웹사이트’가 아니라, ‘Node.js 위에서 실행되는 프로그램’이기 때문에 Node가 반드시 필요합니다.

 

 

2. React 프로젝트 생성하기

npm create vite

npx create-react-app

 

두가지 중 원하는 명령어를 터미널에 입력하여 프로젝트 생성하면 됩니다.

요즘은 CRA보다 vite를 대부분 사용하기 때문에 vite를 사용하도록 하겠습니다.

create 명령어를 입력하면 프로젝트 이름을 정하라고 합니다.

create-vite-course라고 이름지었습니다.

이후 framework선택에서 React선택 후, variant는 javascript를 선택해줍니다.

 

rolldown-vite는 아직 에러가 많다고 하니 no를 선택합니다.

npm은 필요하니 yes로 선택합니다.

 

 

 

3. 개발서버 접속

설치가 완료되고 나면 로컬서버 주소가 나옵니다.

웹브라우저를 통해 접속해보면 화면이 보인답니다.