React - 프로젝트 생성

01. 리액트 프로젝트 생성 방법

 

(1) CRA(Create React App)

 

(1)-1. CRA란?

 

한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법

• React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많다!  WebPack, babel, eslint 등.
• 이러한 것들을 신경 쓰지 않아도 알아서 → 보일러플레이트

 

(1)-2. CRA로 리액트 프로젝트 셋업하기

윈도우는 git bash 또는 power shell에서 mac os는 터미널(zsh)에서 아래 코드를 입력. 참고로 power shell 은 윈도우 터미널 프로그램이고, git bash는 우리가 git을 설치했을 때 같이 설치되는 터미널 프로그램이다.

맥을 쓰면 맥 터미널을 사용!

프로젝트 셋업을 원하는 경로로 이동 후, CRA 명령어를 다음과 같이 입력.

yarn create react-app [원하는 프로젝트 이름]

 

이와 같이 성공 메시지를 확인 후, 하단에 있는 두 명령어를 통해 react 프로젝트를 실행.

cd react-cra-app
yarn start

 

 

(2) Vite

 

(2)-1. Vite란?

Vite 역시, CRA와 같이 리액트 프로젝트를 풀 세팅해주는 빌드 도구다. WebPack을 사용하는 CRA 대신 Esbuild를 사용하는 Vite는 어떤 장점이 있고, 왜 사용하는게 좋을지 함께 알아봅니다.

 

Vite는 프론트엔드 개발을 위한 새로운 빌드 도구로, Evan You (Vue.js의 창시자)에 의해 개발되었습니다. Vite는 원래 Vue.js 애플리케이션을 위해 만들어졌지만, 현재는 React, Svelte, Vanilla JS 등 다양한 프레임워크와 라이브러리를 지원한답니다.

 

(2)-2. 특징

 

• 빠른 콜드 스타트와 HMR(Hot Module Replacement)
• 속도 측면에서 기존 CRA와는 비교가 되지 않을 정도로 빠릅니다.

• CRA는 기본적으로 설정을 숨기지만, Vite는 사용자가 필요에 따라 설정을 더 쉽게 조정할 수 있습니다.
• Esbuild를 사용해요.

 

Go 언어 베이스의 자바스크립트 빌드 툴입니다. CRA가 채택하는 웹팩과 비교할 때, 말이 안되는 수준의 속도를 보여줘요.

 

 

(2)-3. Vite로 리액트 프로젝트 셋업하기

yarn create vite my-react-app --template react

cd my-react-app
yarn
yarn dev