[Week11] React(TypeScript) 기반의 동적 UI 개발(1)

지난 방학에 이어 새로운 리액트 프론트엔드 프로젝트를 시작해 볼게요.

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

리액트 프로젝트 생성을 도와주는 도구로는 크게 Create React App(CRA)과 Vite가 있어요. 두 도구의 주요 특징을 비교해 볼게요.

CRA는 Webpack과 Node.js 기반의 Express 서버를 사용하며, 전체 소스를 빌드하는 방식을 채택하고 있어요. 환경 변수는 process.env.KEY 형태로 접근해요.
반면 Vite는 ESBuild와 Golang 기반의 Koa 서버를 사용하며, 모듈 단위 빌드 방식을 채택해 빌드 속도가 훨씬 빠르다는 장점이 있어요. 환경 변수는 import.meta.env.KEY 형태로 접근해요. 두 도구 모두 코드가 변경되면 화면에 즉시 반영되는 HMR(Hot Module Replacement) 기능을 지원해요.

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

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

프로젝트 폴더 구조

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

• pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)들을 모아두는 곳이에요.
• components : 공통으로 사용되거나 페이지 내부에 종속된 컴포넌트들을 작성해요.
• utils : 프로젝트 전반에서 사용되는 유틸리티 함수들을 관리해요.
• hooks : 재사용 가능한 커스텀 리액트 훅 코드를 작성해요.
• model : 타입스크립트에서 사용하는 타입이나 데이터 모델을 정의해요.
• api : 서버와의 API 연동 로직과 페처(fetcher) 함수들을 모아두어요.

npm scripts

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

• start : 로컬 개발 환경에서 프로젝트를 실행해요.
• build : 배포를 위해 프로젝트를 최적화하여 빌드해요.
• test : 프로젝트에 작성된 테스트 코드를 실행해요.
• eject : 숨겨져 있는 웹팩, 바벨 등의 설정 파일을 프로젝트 외부로 추출해요. 설정을 직접 제어해야 하는 특수한 경우가 아니면 거의 사용하지 않아요.

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

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