Rsbuild 연동하기

Rsbuild 연동하기 (Usage with Rsbuild)

Rsbuild는 Rspack 기반의 빌드 도구예요. 이 글에서는 Rsbuild로 프로젝트를 만들고 antd를 가져와 사용하는 방법을 함께 따라 해볼게요.

출처: 문서

본문

Rsbuild는 Rspack이 구동하는 빌드 도구예요. 이 글에서는 Rsbuild로 프로젝트를 만들고 antd를 임포트하는 과정을 시도해 볼게요.

설치와 초기화

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

초기화 과정에서 create-rsbuild는 선택할 수 있는 여러 템플릿을 제공해요. 여기서는 React 템플릿을 선택해야 해요.

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

그다음 프로젝트 안으로 들어가서 실행해 볼게요.

$ cd demo
$ npm run dev

브라우저에서 http://localhost:3000 을 열어보면 Rsbuild with React라는 제목이 페이지에 렌더링되는 걸 볼 수 있어요. 여기까지 되면 성공이에요.

antd 가져오기

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

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

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

const App: React.FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

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

테마 커스터마이징

테마 커스터마이징 문서를 참고하세요. ConfigProvider로 테마를 이렇게 수정할 수 있어요:

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

const App: React.FC = () => (
  <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
    <MyApp />
  </ConfigProvider>
);

export default App;

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

Rsbuild 연동하기