Flitter 설치하기

이 가이드에서는 프로젝트에 Flitter를 설치하는 과정을 안내합니다. 가장 일반적인 사용 사례인 React와 함께 Flitter를 설정하는 방법에 중점을 두겠습니다.

설치 단계

1. React 템플릿으로 새로운 Vite 프로젝트 생성하기:

   npm create vite@latest my-flitter-app -- --template react-ts
   cd my-flitter-app
   

2. Flitter와 React 바인딩 설치하기:

   npm install @meursyphus/flitter 
   

기본 설정

설치가 제대로 되었는지 확인하기 위해 간단한 앱을 만들어보겠습니다. 먼저 SVG 요소와 그 컨테이너를 위한 React refs로 기본 구조를 설정한 다음, 기본 위젯으로 텍스트를 표시하도록 Flitter를 초기화하겠습니다.

위의 예제는 다음과 같은 내용을 보여줍니다:

1. SVG 요소(또는 canvas 요소)와 그 컨테이너를 위한 refs 생성
2. SVG 요소로 AppRunner 초기화
3. 적절한 리사이즈 처리 설정
4. 기본 위젯 생성 및 렌더링
5. 컴포넌트 언마운트 시 리소스 정리

다음 단계

이제 Flitter가 설치되고 실행되었으므로, 다음 섹션에서는 Flitter의 위젯 시스템을 사용하여 더 복잡한 애플리케이션을 만드는 방법을 살펴보겠습니다.