React 프로젝트

---

비교	CRA	Vite
빌드	Webpack	ESBuild
언어	node.js	Golang
서버	express	koa
속도	느림 (소스 전체를 빌드)	빠름 (모듈 단위로 빌드)
환경변수	process.env.KEY	import.meta.env.KEY

공통
HMR (Hot Module Replacement) : 개발 시 코드변경 사항을 새로고침 없이 즉시 반영하면서 런타임에 업데이트 할 수 있는 기능입니다.

설치와 생성

---

CRA

create-react-app

cra 사이트에서 제공하는 방식을 참고하여 터미널에 입력하여 설치합니다.

타입스크립트 탬플릿으로 설치

npx create-react-app my-app --template typescript

npx create-react-app [프로젝트명] --template [사용할 탬플릿]

필요한 도구들도 함께 설치됩니다.

• 보일러플레이트(기본코드)
• 노드모듈
• 리액트
• 리액트 돔
• 리액트 스크립트

작업이 완료되면 생성한 프로젝트폴더로 이동합니다.

cd 프로젝트 폴더명		--- 프로젝트 폴더명으로 이동
npm run					--- 명령어 확인
npm run start 			--- 개발서버 실행 -> localhost:???? 으로 접속

Vite

Vite
Vite 사이트에서 제공하는 방식을 참고하여 터미널에 입력하여 설치합니다.

타입스크립트 탬플릿으로 설치

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

npm create vite@latest [프로젝트명] --[npm v7이상 부터 입력] --template [사용할 탬플릿]

cd my-app			--- 프로젝트 폴더명으로 이동
npm install			--- package.json에 있는 모든 의존성 설치
nvm install [버전]	--- node 버전이 지원되지 않는경우 지원하는 버전으로 설치
npm run dev			--- 개발서버 실행

프로젝트 폴더(디렉토리)구조

폴더명	역할
pages	라우트에 대응하는 페이지 컴포넌트(컨테이너)
components	공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
utils	유닐리티
hooks	리액트 훅
model	모델(타입)
api	api 연동을 위한 fetcher 등

more (gpt 답변)

기능별로 폴더를 나눠서 관리하면 프로젝트 구조가 확대되어도 유지보수에 용이.
React 프로젝트는 src 폴더를 중심으로 구성됨.

이름	설명
node_modules/	설치된 라이브러리들이 들어있는 폴더 (자동 생성됨)
public/	정적 파일들(html, 이미지 등) 보관. index.html이 여기 있음
src/	실제로 개발하는 모든 코드가 위치
└ assets/	이미지, 폰트 등 정적 자원 모음
└ components/	재사용 가능한 UI 컴포넌트들
└ pages/	라우팅 되는 페이지 단위 컴포넌트들 (예: Home.tsx, About.tsx)
└ hooks/	커스텀 훅(useSomething) 들을 모아둠
└ store/	Redux 또는 Zustand 등 상태관리 코드 위치
└ App.tsx	최상위 컴포넌트. 전체 앱 구조를 여기에 설정
└ main.tsx	진입점. ReactDOM.createRoot()로 App을 렌더링
└ index.css	글로벌 스타일
package.json	프로젝트 설정, 의존성 관리, 스크립트 설정 등
tsconfig.json	TypeScript 설정 파일 (TS 프로젝트일 경우)
vite.config.ts	Vite 빌드 도구 설정 파일
.gitignore	Git에 올리지 않을 파일들 설정
README.md	프로젝트 설명 문서