Vite 연동하기

Vite 연동하기 (Usage with Vite)

Vite는 React 애플리케이션을 개발하기 가장 좋은 도구 중 하나예요. 이 글에서는 Vite 안에서 antd를 함께 사용하는 방법을 따라 해볼게요.

출처: 문서

본문

Vite는 가장 좋은 React 애플리케이션 개발 도구 중 하나예요. antd를 그 안에서 사용해 봅시다.

설치와 초기화

시작하기 전에 먼저 yarn이나 pnpm 또는 bun을 설치해 두어야 해요.

이 도구는 환경과 의존성을 자동으로 만들고 초기화해 줘요. 네트워크 오류가 발생하면 프록시 설정을 바꾸거나 다른 npm 레지스트리를 이용해 보세요.

그다음 antd-demo 안으로 들어가서 의존성을 설치하고 실행해 볼게요.

$ cd antd-demo
$ npm install
$ npm run dev

브라우저에서 http://localhost:5173/ 을 열면 Vite + React라는 헤더가 페이지에 렌더링되는 걸 볼 수 있어요.

antd 가져오기

아래는 기본 디렉터리 구조예요.

├── public
│   └── vite.svg
├── src
│   └── assets
│       └── react.svg
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── main.js
│   └── logo.svg
├── index.html
├── package.json
└── vite.config.ts

이제 yarn이나 npm, pnpm, bun으로 antd를 설치할게요.

src/App.js를 수정해서 antd에서 Button 컴포넌트를 가져와 봅시다.

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

이제 페이지에 파란색 primary 버튼이 표시되는 걸 확인할 수 있을 거예요. 이제 antd의 어떤 컴포넌트든 선택해서 여러분의 애플리케이션을 개발하면 돼요. Vite의 다른 워크플로우는 사용자 가이드에서 확인할 수 있어요.

이제 antd 컴포넌트를 성공적으로 실행했어요. 여러분만의 애플리케이션을 만들어 보세요!

Vite 연동하기