<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/"><span itemprop="name">Home</span></a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react"><span itemprop="name">react</span></a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/react/vite/react-typescript/start/"><span itemprop="name">[Vite] TypeScript 기반 React 프로젝트 시작하기</span></a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#%EB%AA%A9%EC%B0%A8">목차</a></li><li><a href="#%EA%B0%9C%EC%9A%94">개요</a></li><li><a href="#%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88">블로그 시리즈</a></li><li><a href="#vite%EC%9D%98-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">Vite의 템플릿 사용하기</a></li><li><a href="#%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0">프로젝트 구조</a></li><li><a href="#%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%A4%ED%96%89">프로젝트 실행</a></li><li><a href="#%EC%99%84%EB%A3%8C">완료</a></li></ul></div><h2 id="개요">개요</h2><p>이번 블로그 포스트에서는 <code>Vite</code>를 사용하여 <code>TypeScript</code> 기반 <code>React</code> 프로젝트를 생성하는 방법에 대해서 알아보도록 하겠습니다. 또한, 생성된 프로젝트의 폴더 구조와 역할에 대해서 알아봅시다.</p><ul><li>Vite: <a href="https://vitejs.dev/" rel="noopener" target="\_blank">https://vitejs.dev/</a></li></ul><p><code>Webpack</code> 설정을 통해 React를 시작하는 방법이나, <code>create-react-app</code>, <code>Next.js</code>를 사용하여 React 프로젝트를 생성하는 방법에 대해서는 이전 블로그 포스트를 확인해 주시기 바랍니다.</p><ul><li><a href="https://deku.posstree.com/ko/react/start/" target="\_blank">Webpack으로 React 시작하기</a></li><li><a href="https://deku.posstree.com/ko/react/create-react-app/start/" target="\_blank">create-react-app</a></li><li><a href="https://deku.posstree.com/ko/react/nextjs/start/" target="\_blank">NextJS</a></li></ul><h2 id="블로그-시리즈">블로그 시리즈</h2><p>이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 <code>Vite</code>의 시리즈 리스트입니다.</p><ul><li>[Vite] TypeScript 기반 React 프로젝트 시작하기</li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/test/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 테스트 환경 구성하기</a></li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/prettier/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 Prettier 추가하기</a></li><li><a href="https://deku.posstree.com/ko/react/vite/react-typescript/stylelint/" target="\_blank">[Vite] TypeScript 기반 React 프로젝트에 Stylelint(CSS-in-JS) 추가하기</a></li></ul><h2 id="vite의-템플릿-사용하기">Vite의 템플릿 사용하기</h2><p><code>Vite</code>는 이미 만들어진 템플릿을 사용하여 간단하게 프로젝트를 생성할 수 있도록 지원하고 있습니다. 다음 명령어를 사용하면 <code>TypeScript</code> 기반 <code>React</code> 프로젝트를 생성할 수 있습니다.</p><div><pre><code>npm create vite <span>[</span>PROJECT_NAME]

<span># yarn</span>
yarn create vite <span>[</span>PROJECT_NAME]

<span># pnpm</span>
pnpm create vite <span>[</span>PROJECT_NAME]

<span># bun</span>
bunx create-vite <span>[</span>PROJECT_NAME]
</code></pre></div><p>그럼 다음과 같이 프로젝트 이름을 입력하는 질문이 나타납니다. 기본값으로 명령어를 실행할 때, <code>PROJECT_NAME</code>이 설정되어 있습니다. 이름을 변경할 필요가 없다면 <code>Enter</code> 키를 눌러 진행합니다.</p><div><pre><code>? Package name: › PROJECT_NAME
</code></pre></div><p>그 다음 프로젝트에서 사용할 프레임워크를 선택하는 질문이 나타납니다. 여기서는 <code>React</code>를 선택합니다.</p><div><pre><code>? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
</code></pre></div><p>프레임워크를 선택하면 다음과 같이 프로젝트에서 <code>TypeScript</code>를 사용할지 <code>JavaScript</code>를 사용할지 선택하는 질문이 나타납니다. 여기서는 <code>TypeScript</code>를 선택합니다.</p><div><pre><code>? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
</code></pre></div><p>모든 질문에 답변을 완료하면 다음과 같이 <code>TypeScript</code> 기반 <code>React</code> 프로젝트가 생성되는 것을 확인할 수 있습니다.</p><div><pre><code>Done. Now run:

  <span>cd</span> <span>[</span>PROJECT_NAME]
  yarn
  yarn dev
</code></pre></div><h2 id="프로젝트-구조">프로젝트 구조</h2><p><code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트의 폴더와 파일을 살펴보면 다음과 같습니다.</p><div><pre><code>├── 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
</code></pre></div><p>중요 파일은 다음과 같습니다.</p><ul><li><code>index.html</code>: React 애플리케이션의 진입점입니다.</li><li><code>package.json</code>: 프로젝트의 의존성과 스크립트를 정의한 파일입니다.</li><li><code>public</code>: 정적 파일을 저장하는 디렉토리입니다.</li><li><code>src</code>: React 애플리케이션의 소스코드를 저장하는 디렉토리입니다.</li><li><code>src/main.tsx</code>: React 애플리케이션의 진입점입니다.</li><li><code>src/vite-env.d.ts</code>: Vite 환경에서 사용하는 TypeScript 설정 파일입니다.</li><li><code>tsconfig.json</code>: TypeScript 설정 파일입니다.</li><li><code>tsconfig.node.json</code>: Node.js 환경에서 사용하는 TypeScript 설정 파일입니다.</li><li><code>vite.config.ts</code>: Vite 설정 파일입니다.</li></ul><h2 id="프로젝트-실행">프로젝트 실행</h2><p><code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에서 <code>package.json</code> 파일을 열면 다음과 같이 프로젝트에서 사용할 수 있는 명령어를 확인할 수 있습니다.</p><div><pre><code><span>"scripts"</span><span>:</span><span> </span><span>{</span><span>
  </span><span>"dev"</span><span>:</span><span> </span><span>"vite"</span><span>,</span><span>
  </span><span>"build"</span><span>:</span><span> </span><span>"tsc &amp;&amp; vite build"</span><span>,</span><span>
  </span><span>"lint"</span><span>:</span><span> </span><span>"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"</span><span>,</span><span>
  </span><span>"preview"</span><span>:</span><span> </span><span>"vite preview"</span><span>
</span><span>}</span><span>,</span><span>
</span></code></pre></div><p>다음은 <code>Vite</code>를 사용하여 생성한 <code>TypeScript</code> 기반 <code>React</code> 프로젝트에서 사용할 수 있는 명령어입니다.</p><ul><li><code>dev</code>: 프로젝트를 개발 모드로 실행합니다.</li><li><code>build</code>: 프로젝트를 빌드합니다.</li><li><code>lint</code>: 프로젝트의 코드를 검사합니다.</li><li><code>preview</code>: 빌드된 프로젝트를 미리 볼 수 있습니다.</li></ul><p>프로젝트를 생성하고 실행하기 위해서는 우선 다음의 명령어를 실행하여 프로젝트의 의존성을 설치합니다.</p><div><pre><code>npm <span>install</span>
<span># yarn install</span>
</code></pre></div><p>그리고 다음 명령어를 실행하여 프로젝트를 개발 모드로 실행합니다.</p><p>그럼 다음과 같이 개발 서버가 실행된 것을 확인할 수 있습니다.</p><div><pre><code>  VITE v5.0.12  ready <span>in </span>140 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use <span>--host</span> to expose
  ➜  press h + enter to show <span>help</span>
</code></pre></div><p>이제 브라우저를 열고 <code>http://localhost:5173/</code>로 접속하면 다음과 같이 화면이 표시됩니다.</p><picture><source srcset="/assets/images/category/react/vite/start/react-app-based-typescript.avif" type="image/avif"><source srcset="/assets/images/category/react/vite/start/react-app-based-typescript.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/react/vite/start/react-app-based-typescript.png" alt="Vite - React app based TypeScript"></picture><h2 id="완료">완료</h2><p>이것으로 <code>Vite</code>를 사용하여 <code>TypeScript</code> 기반 <code>React</code> 프로젝트를 시작하는 방법에 대해서 알아보았습니다. 여러분도 <code>Vite</code>의 템플릿을 사용하여 간단하게 프로젝트를 생성해 보시기 바랍니다.</p><p><code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code></p><h2>앱 홍보</h2><div><p> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요.<br><code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다.</p><p> 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</p></div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Vite를 사용하여 TypeScript 기반 React 프로젝트를 시작하는 방법에 대해서 알아보도록 하겠습니다.