프로젝트 생성 방법
1. Create React App
2. VITE
1. CRA : Create React App
https://create-react-app.dev/
npx create-react-app {project_name} --template typescript
boiler-plate라고 하는 기본 소스 코드를 내려 받고 node_module을 설치하고
프로젝트에서 사용하는 react, react-dom, react-script도구를 함께 설치한다.
설치가 완료된 후 프로젝트를 조작하는 가이드를 안내한다.
npm run
프로젝트에서 사용할 수 있는 명령어
npm run start
개발 서버를 실행시키는 명령어
2. VITE
https://ko.vitejs.dev/guide/
npm create vite@latest book-store-v -- --template react-ts
npm i
프로젝트에 필요한 파일 및 라이브러리 설치
npm run
프로젝트에서 사용할 수 있는 명령어
- CRA와는 다르게
dev명령어를 사용하여 프로젝트를 실행
npm run dev
비교
package.json 차이
비교표
| 항목 | Create React App (CRA) | Vite |
|---|---|---|
| 개요 | 초기 설정과 구성을 자동화하여 리액트 앱을 빠르게 생성할 수 있도록 지원 | 빠른 속도와 효율성을 강조하며 최신 개발 환경을 제공 |
| 개발 언어 | Node.js | Golang |
| 번들러 | Webpack과 Babel을 사용하여 코드 컴파일 및 압축 처리 | ESBuild와 Rollup을 사용하여 모듈 빌드, 빠른 속도 |
| 개발 서버 | Express 서버 | Koa 서버 |
| 빌드 방식 | 전체 소스를 빌드하여 결과물을 생성 | 모듈 단위 빌드로 필요한 모듈만 빠르게 빌드 |
| 환경 변수 사용 | process.env.KEY 형식으로 환경 변수 관리 | import.meta.env.KEY 형식으로 환경 변수 관리 |
| HMR (Hot Module Replacement) | HMR을 지원하여 코드 변경 사항을 즉시 반영 | 더욱 빠른 HMR을 지원, 변경 사항을 모듈 단위로 즉시 반영 |
| 타입스크립트 지원 | Babel을 통해 TypeScript 코드를 브라우저에서 동작하도록 컴파일 | ESBuild를 통해 빠르게 TypeScript를 지원 |
| 기타 특징 | CRA는 전통적인 Webpack 기반으로 모든 코드를 한 번에 빌드하고 압축함 | Vite는 ESM 기반으로 필요한 모듈만 빠르게 로드하여 성능이 우수 |
프로젝트 테스트
App.tsx는 book store라는 텍스트를 렌더링한다.
테스트 코드에서 npm run test명령어를 사용하여 book store를 테스트하면
테스트가 성공되어 표시하는 PASS라는 문구를 확인할 수 있다.
프로젝트 구조
프로젝트 폴더(디렉토리) 구조
- pages - 라우트에 대응하는 페이지 컴포넌트(컨테이너)
- components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
- utils - 유틸리티
- hooks - 리액트 훅
- model - 모델(타입)
- api - api 연동을 위한 fetcher 등
컴포넌트 생성
기본적인 컴포넌트 생성 예시
book store라는 텍스트가 적힌 컴포넌트를Home이라는 네임으로 생성- 외부 모듈에서
Home이라는 네임으로 호출할 수 있도록 내보내기 설정
Home컴포넌트가 위치한 물리적 경로를 명시- 페이지 호출 시
Home컴포넌트를 응답
- 테스트
- 화면 확인
✅ React 컴포넌트에서 하나의 Element만 return
대표 Element가 없다면
<> </> (Fragment)로 감싸줄 수 있다.
- 예시
1. pages
📌 라우트에 대응하는 페이지 컴포넌트(컨테이너)
각 라우트(URL 경로)에 대응하는 페이지 컴포넌트가 위치하는 폴더
예시:
- /home, /about, /login 등의 경로에 맞는 HomePage, AboutPage, LoginPage 등의 컴포넌트가 이 폴더에 위치
2. components
📌 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
여러 페이지에서 재사용되는 공통 UI 컴포넌트들이 위치하는 폴더
버튼, 입력 필드, 모달 같은 UI 요소는 이 폴더에 두어 재사용성을 높임
각 라우트(URL 경로)에 대응하는 페이지 컴포넌트가 위치하는 폴더
3. utils
📌 유틸리티 함수 및 도구 모음
페이지나 컴포넌트에서 공통적으로 사용될 수 있는 순수 함수 및 도구 함수들을 모아둔 폴더
예시:
날짜 형식 변환 함수: formatDate(date: Date): string숫자 포맷팅 함수: formatNumber(number: number): string로컬 스토리지 관리 함수: getFromLocalStorage(key: string): any
4. hooks
📌 사용자 정의 훅
리액트에서 반복적인 로직이나 상태 관리를 캡슐화하여 재사용 가능한 형태로 만든 사용자 정의 훅들이 위치하는 폴더
--- 사용자 정의 리액트 훅(Custom Hooks)
5. model
📌 데이터 구조와 타입 정의
프로젝트에서 사용하는 데이터 구조와 타입을 정의한 파일이 위치하는 폴더
예시:
User 타입 정의: interface User { id: number; name: string; email: string }Product 타입 정의: interface Product { id: number; name: string; price: number }
6. api
📌 비즈리스 로직
외부 API와의 연동을 담당하는 Fetcher 함수 및 관련 설정이 위치하는 폴더
axios 설정이나, 특정 API를 호출하는 함수가 정의되어 여러 컴포넌트에서 쉽게 사용
CLI
package.json
npm run start
- 개발 서버를 실행
- npm start 명령어를 통해 프로젝트를 로컬에서 테스트
npm run build
- 컴파일되어 빌드된 폴더
- 해시된 파일들
- 타입 스크립트로 작성된 앱을 자바 스크립트로 컴파일, 번들링된 파일들
build 폴더 이하의 static 폴더를 포함한 기타 파일들을
static hoisting을 이용하여 배포하면
React SPA앱을 바로 실행할 수 있다.
npm run test
- 프로젝트에 작성된 테스트 코드를 실행
- 기본적으로 jest를 사용하여 테스트를 수행
npm run eject
- CRA의 기본 설정을 외부로 꺼내 사용자 정의가 가능
- 한 번 실행하면 되돌릴 수 없으므로 주의
- webpack이 기존에 만든 설정을 탈출하는 것
CLI를 이용한 Type Check
- 타입 스크립트를 사용하기 때문에, 상시 타입 체크가 필요
- 편집기에서 기본적으로 체크하지만 좀 더 엄격히(strict) 체크
- 이상이 없는 경우
- 타입의 오류가 발생한 경우
- 타입이 정의되어 있지 않다고 알림
- 타입이 정의되어 있지 않다고 알림
"typecheck": "tsc --noEmit --skipLibCheck"
tsc: type script compilenoEmit: 출력하는 부분을 비활성화(타입 체크로만 사용하기 때문)skipLibCheck: 외부 라이브러리의 타입 체크를 생략
tsconfig.json
-
타입 스크립트는 브라우저에서 작동하지 않기에 컴파일이 필요.
-
컴파일에 대한 설정
"targer":"es5"
ES5버전에 맞게 컴파일 하는 것"lib":{...}
컴파일러가 참조할 라이브러리
