Farm 연동하기

Farm 연동하기 (Usage with Farm)

Farm은 Rust 기반의 웹 빌드 엔진으로, 웹 프로그램과 JavaScript 라이브러리를 더 편하게 만들 수 있게 도와줘요. 이 글에서는 Farm으로 프로젝트를 만들고 antd를 가져와 사용하는 방법을 함께 해볼게요.

출처: 문서

본문

Farm은 웹 프로그램과 JavaScript 라이브러리를 잘 만들도록 도와주는 Rust 기반 웹 빌드 엔진이에요. 이 글에서는 Farm으로 프로젝트를 만들고 antd를 임포트해 볼게요.

설치와 초기화

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

초기화 과정에서 farm은 선택 가능한 여러 템플릿을 제공해요. 여기서는 React 템플릿을 선택해야 해요.

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

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

$ cd farm-project
$ npm install
$ npm start

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

antd 가져오기

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

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

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

export function Main() {
  return (
    <div>
      <Button type="primary">Button</Button>
    </div>
  );
}

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

테마 커스터마이징

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

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

export function Main() {
  return (
    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
      <Button type="primary">Button</Button>
    </ConfigProvider>
  );
}

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

Farm 연동하기