[Vite] TypeScript 기반 React 프로젝트 시작하기

개요

이번 블로그 포스트에서는 Vite를 사용하여 TypeScript 기반 React 프로젝트를 생성하는 방법에 대해서 알아보도록 하겠습니다. 또한, 생성된 프로젝트의 폴더 구조와 역할에 대해서 알아봅시다.

Vite: https://vitejs.dev/

Webpack 설정을 통해 React를 시작하는 방법이나, create-react-app, Next.js를 사용하여 React 프로젝트를 생성하는 방법에 대해서는 이전 블로그 포스트를 확인해 주시기 바랍니다.

블로그 시리즈

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Vite의 시리즈 리스트입니다.

[Vite] TypeScript 기반 React 프로젝트 시작하기
[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기
[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기
[Vite] TypeScript 기반 React 프로젝트에 Stylelint(CSS-in-JS) 추가하기

Vite의 템플릿 사용하기

Vite는 이미 만들어진 템플릿을 사용하여 간단하게 프로젝트를 생성할 수 있도록 지원하고 있습니다. 다음 명령어를 사용하면 TypeScript 기반 React 프로젝트를 생성할 수 있습니다.

npm create vite [PROJECT_NAME]

# yarn
yarn create vite [PROJECT_NAME]

# pnpm
pnpm create vite [PROJECT_NAME]

# bun
bunx create-vite [PROJECT_NAME]

그럼 다음과 같이 프로젝트 이름을 입력하는 질문이 나타납니다. 기본값으로 명령어를 실행할 때, PROJECT_NAME이 설정되어 있습니다. 이름을 변경할 필요가 없다면 Enter 키를 눌러 진행합니다.

? Package name: › PROJECT_NAME

그 다음 프로젝트에서 사용할 프레임워크를 선택하는 질문이 나타납니다. 여기서는 React를 선택합니다.

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

프레임워크를 선택하면 다음과 같이 프로젝트에서 TypeScript를 사용할지 JavaScript를 사용할지 선택하는 질문이 나타납니다. 여기서는 TypeScript를 선택합니다.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

모든 질문에 답변을 완료하면 다음과 같이 TypeScript 기반 React 프로젝트가 생성되는 것을 확인할 수 있습니다.

Done. Now run:

  cd [PROJECT_NAME]
  yarn
  yarn dev

프로젝트 구조

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트의 폴더와 파일을 살펴보면 다음과 같습니다.

├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

중요 파일은 다음과 같습니다.

index.html: React 애플리케이션의 진입점입니다.
package.json: 프로젝트의 의존성과 스크립트를 정의한 파일입니다.
public: 정적 파일을 저장하는 디렉토리입니다.
src: React 애플리케이션의 소스코드를 저장하는 디렉토리입니다.
src/main.tsx: React 애플리케이션의 진입점입니다.
src/vite-env.d.ts: Vite 환경에서 사용하는 TypeScript 설정 파일입니다.
tsconfig.json: TypeScript 설정 파일입니다.
tsconfig.node.json: Node.js 환경에서 사용하는 TypeScript 설정 파일입니다.
vite.config.ts: Vite 설정 파일입니다.

프로젝트 실행

Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에서 package.json 파일을 열면 다음과 같이 프로젝트에서 사용할 수 있는 명령어를 확인할 수 있습니다.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
},

다음은 Vite를 사용하여 생성한 TypeScript 기반 React 프로젝트에서 사용할 수 있는 명령어입니다.

dev: 프로젝트를 개발 모드로 실행합니다.
build: 프로젝트를 빌드합니다.
lint: 프로젝트의 코드를 검사합니다.
preview: 빌드된 프로젝트를 미리 볼 수 있습니다.

프로젝트를 생성하고 실행하기 위해서는 우선 다음의 명령어를 실행하여 프로젝트의 의존성을 설치합니다.

npm install
# yarn install

그리고 다음 명령어를 실행하여 프로젝트를 개발 모드로 실행합니다.

npm run dev
# yarn dev

그럼 다음과 같이 개발 서버가 실행된 것을 확인할 수 있습니다.

  VITE v5.0.12  ready in 140 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

이제 브라우저를 열고 http://localhost:5173/로 접속하면 다음과 같이 화면이 표시됩니다.

완료

이것으로 Vite를 사용하여 TypeScript 기반 React 프로젝트를 시작하는 방법에 대해서 알아보았습니다. 여러분도 Vite의 템플릿을 사용하여 간단하게 프로젝트를 생성해 보시기 바랍니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기

[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통

쿠팡: 구매하기
yes24: 구매하기
교보문고: 구매하기
알라딘: 구매하기