[week11] 프로젝트 : React(TypeScript) 기반의 동적 UI 개발 (1) - 03/27

지난 시간까지 타입스크립트와 리액트의 기초를 다루었고, 이번 시간부터는 리액트와 타입스크립트를 활용한 동적 UI 개발을 본격적으로 시작해보겠습니다.

리액트 프로젝트 생성 (CRA vs Vite)

리액트 프로젝트를 시작할 때 주로 CRA(Create React App)와 Vite 중 하나를 선택해요. 두 도구의 차이를 간단히 비교해볼게요.

CRA는 Webpack 기반으로 전체 소스를 한 번에 빌드해요. 환경 변수는 process.env.KEY 형태로 접근해요.

Vite는 ESBuild 기반으로 모듈 단위 빌드 방식을 채택해서 빌드 속도가 훨씬 빠르다는 장점이 있어요. 환경 변수는 import.meta.env.KEY 형태로 접근해요. 두 도구 모두 코드가 변경되면 화면에 즉시 반영되는 HMR(Hot Module Replacement)을 지원해요.

이번 프로젝트에서는 더 빠른 개발 환경을 위해 Vite를 사용했어요.

# CRA로 시작하기
npx create-react-app {프로젝트명} --template typescript

# Vite로 시작하기
npm create vite@latest {프로젝트명} -- --template react-ts

프로젝트 폴더 구조

프로젝트를 진행할 때 폴더 구조를 목적에 맞게 분리하는 것이 중요해요. 이번 프로젝트의 폴더 구조는 다음과 같이 구성했어요.

• components : 화면을 구성하는 UI 컴포넌트를 관리해요. 버튼, 리스트, 폼 등 재사용 가능한 컴포넌트를 이곳에 작성해요.
• hooks : 커스텀 훅을 관리해요. Redux의 useSelector, useDispatch를 래핑한 훅처럼 반복되는 로직을 재사용하기 위해 분리해요.
• store : Redux 관련 파일을 모아두는 폴더예요.
  • reducer : 각 슬라이스를 하나로 합친 루트 리듀서와 Store 설정 파일을 관리해요.
  • slices : createSlice()로 생성한 슬라이스 파일을 관리해요. 각 슬라이스에는 상태(state), 액션(action), 리듀서(reducer)가 함께 정의돼요.
• types : 프로젝트 전반에서 공통으로 사용하는 타입을 정의해요. 여러 컴포넌트에서 동일한 타입을 사용할 때 이곳에서 한 번만 정의하고 가져다 써요.

npm scripts

Vite로 프로젝트를 세팅하면 기본적으로 4가지 스크립트 명령어를 제공해요.

• dev : 로컬 개발 환경에서 프로젝트를 실행해요.
• build : 배포를 위해 프로젝트를 최적화하여 빌드해요. (tsc -b && vite build)
• lint : ESLint를 실행해 코드 품질을 검사해요.
• preview : 빌드된 결과물을 로컬에서 미리 확인해요.

기본 명령어 외에도 필요한 경우 직접 스크립트를 추가할 수 있어요. 예를 들어, 컴파일 없이 타입 검사만 수행하고 싶다면 아래와 같이 작성해 활용할 수 있어요.

"scripts": {
  "typecheck": "tsc --noEmit --skipLibCheck"
}