TIL_리액트 입문(12/30)

TIL [2024.12.30(화)]

 

리액트 프로젝트 생성 방법

리액트 프로젝트를 생성하는 3가지 방법에 대해 소개합니다. 왜 Vite를 사용해야 하는지 알아보았습니다.

 

1.CRA(Create React App)

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

CRA로 리액트 프로젝트 셋업하기

터미널에서

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

위 명령어 입력.

 

npx create-react-app first-react-app

원하는 프로젝트 이름 작성시 띄어쓰기 하면 오류난다 참고.

 

• 프로젝트 이름에 공백을 포함하지 마세요.
• 소문자와 숫자, 하이픈(-)만 사용하세요.

 

proceed?(y) 글짜를 보면 y글 치고 엔터 치면 설치 진행됨.

 

맥북 업데이트 후 드디어 깔린 리액트..

 

 

cd react-cra-app

yarn start

-> cd react-cra-app

-> yarn start

 둘중 하나의 명령어를 통해 프로젝트 실행 할수 있다.(꼭 하나만 복붙해서 실행하기.)

그럼 위 이미지 처럼 CRA를 활용한 리액트 웹이 잘 실행된걸 볼수 있다.(크롬에서)

 

2. Vite (두번째 리액트 생성 방법)

 

 

Vite로 리액트 프로젝트 셋업하기

yarn create vite [내프로젝트 파일 이름] --template react

위 명령어를 통해 프로젝트 생성한다.

yarn create vite [내프로젝트 파일 이름] --template react

 

 

프로젝트가 생성되었다고 터미널 명령어가 실행된다면(ex)내프로젝트파일이름 react-crt-app) 다음 명령어를 통해 프로젝트에 접근 및 실행한다.

cd my-react-app
yarn
yarn dev

 

• 프론트엔드 개발을 위한 빠르고 효율적인 빌드 도구.
• 원래 Vue.js용으로 개발되었으나 React, Svelte, Vanilla JS 등 다양한 프레임워크를 지원.
• CRA(Create React App)의 대안으로 주목받는 툴.

 

Vite의 주요 특징

1. 빠른 속도
   • Esbuild를 사용하여 초고속 빌드 속도 제공 (CRA의 WebPack 대비 월등히 빠름).
   • 빠른 콜드 스타트 및 HMR(Hot Module Replacement) 지원.
2. 설정의 유연성
   • CRA는 설정을 숨기는 반면, Vite는 사용자가 설정을 자유롭게 조정 가능.
3. Esbuild 기반
   • Go 언어로 개발된 빌드 툴.
   • CRA의 WebPack 대비 압도적인 빌드 성능과 속도.

결론

• Vite는 속도와 유연성 면에서 CRA보다 뛰어난 빌드 도구로, 최신 프론트엔드 개발에 적합합니다.
• 기본 개념보다 실제 사용을 통해 개발 경험을 쌓는 것이 중요.