[React] 리액트 시작하기(Vite + React + TypeScript)

이번에 회사에서 새로운 프로젝트에 참여하게 되었는데 리액트를 처음,, 해보았다,,, 

gpt가 없었다면 아마 무사히 끝내지 못했을거다. 

똥멍청이가 되지 않기 위해선. AI 공부법으로. 공부를. 하는.것. 이겠지. 

gpt가 알려준 꿀팁들을 정리 및 공부하기 위해 일단 리액트 프로젝트 생성부터 하나하나 정리할것이다 

.⠀⢰⠒⠒⠒⢲⠆⠀⠀⢀⠤⢤⡀⠀⡴⠀⠀⢀⣀⣀⣰⣀⣀⡀⠀⠀⠀⠀⠀
⠀⠀⣎⣀⣀⣀⡜⠀⠀⢰⠃⠀⢠⠇⢰⠓⠂⠀⢀⠔⠒⠒⠲⡄⠀⠀⠀⠀⠀⠀
⠤⠤⠤⣤⠤⠤⠤⠄⠀⣇⠀⢀⠞⢀⡯⠤⠀⠀⠹⠤⡤⠤⠞⠁⠀⢠⠔⢤⣀⠆
 ⠀⠀⢀⡏⠀⠀⠀⠀⠀⠈⠉⠁⠀⡸⠀⠀⠠⠤⠤⠴⠧⠤⠤⠄⠀⠀⠀⠀⠀

 

1. Node JS 설치 

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

 

2. 프로젝트 생성 

리액트 프로젝트 생성 시, 두가지 방법이 있는데 CRA와 Vite 이 두개의 차이점을 gpt 찬슈로 간단하게 정리하였다.

비교항목	CRA (Create React App)	Vite
번들러	Webpack 사용	Rollup 사용 (빌드), 개발 서버는 ESM 기반
개발 서버 속도	느림 (파일 전체를 번들링)	빠름 (ESM 기반, 필요한 파일만 변환)
핫 리로드 (HMR)	느림 (Webpack 의존)	매우 빠름 (네이티브 ES 모듈 사용)
빌드 속도	비교적 느림	최적화된 Rollup 사용, 빠름

 

2-1. CRA

npx create-react-app [프로젝트 이름]

 

1) OK to proceed? (y) : y 입력

 

2) 프로젝트 생성 완료

 

- npm start : 프로젝트 실행

- npm run build : 프로젝트 빌드

 

3) 프로젝트 폴더 구조

2-2. Vite

npm create vite@latest my-app --template react

 

- TypeScript 로 설치

npm create vite@latest my-app --template react-ts

 

1) 프레임워크 선택 (나는 React)

 

2) 언어 및 빌드 방식 (나는 Typescript)

 

* SWC : JavaScript와 TypeScript를 빠르게 트랜스파일링(변환)하는 컴파일러

SWC 사용 유무 차이점을 gpt 찬슈로 간단하게 정리하였다.

 

• JavaScript (Babel):
  • 최신 JavaScript 코드가 필요한 경우.
  • 다양한 플러그인과 유연성이 필요한 프로젝트에서 적합
• JavaScript + SWC:
  • 빠른 빌드 속도가 중요한 경우.
  • 빌드 시간이 중요한 대규모 프로젝트에서 적합
• TypeScript (Babel):
  • 유연성과 다양한 플러그인 지원이 필요한 경우.
  • 타입 검사는 별도로 tsc를 사용해도 괜찮다면 적합
  • 속도가 그렇게 중요하지 않은 작은 규모의 프로젝트에서 유용
• TypeScript + SWC:
  • 빠른 빌드 성능이 중요한 경우.
  • 대규모 TypeScript 프로젝트에서 유리
  • 타입 검사가 별도로 필요하지만, SWC의 트랜스파일링 성능이 중요한 경우 사용

 

3) 프로젝트 생성 완료

 

 

- cd my-app-vite : 프로젝트 폴더 위치로 이동

- npm install : 관련 모듈 설치 (필수)
- npm run dev : 프로젝트 실행

 

4) 프로젝트 폴더 구조

npm install 안하면 node_modules 가 없다. 무조건 npm install 해줘야한다.

npm install 전 폴더 구조

 

npm install 후 폴더 구조(node_modules 폴더 생성)