Flitter 설치 및 설정

Flitter는 라이브러리입니다. npm으로 설치하고 바로 사용할 수 있습니다.

지원하는 프레임워크

Flitter는 다음과 같은 환경을 공식적으로 지원합니다:

• Vanilla JavaScript - 프레임워크 없이 순수 JavaScript로 사용
• React - React 컴포넌트로 쉽게 통합
• Svelte - Svelte 컴포넌트로 자연스럽게 사용
• Vue - Vue 3 Composition API와 함께 사용
• SolidJS - 반응형 시스템과 완벽하게 통합
• Qwik - 최적화된 로딩과 함께 사용

설치 가이드

아래 탭에서 사용하고자 하는 프레임워크를 선택하여 설치 방법과 기본 사용 예제를 확인하세요:

npm install @meursyphus/flitter @meursyphus/flitter-react

import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
import Widget from '@meursyphus/flitter-react';

const App = () => (
  <Widget
    width="600px"
    height="300px"
    renderer="canvas" // or "svg"
    widget={Container({
      alignment: Alignment.center,
      color: 'lightblue',
      child: Text("Hello, Flitter!", { 
        style: TextStyle({ 
          fontSize: 30, 
          fontWeight: 'bold' 
        }) 
      })
    })}
  />
);

export default App;

# Using Yarn
yarn add @meursyphus/flitter @meursyphus/flitter-react

# Using PNPM
pnpm add @meursyphus/flitter @meursyphus/flitter-react

렌더러 선택하기

Flitter는 두 가지 렌더러를 지원합니다:

Canvas 렌더러

• 장점: 높은 성능, 픽셀 단위 제어, 복잡한 애니메이션에 적합
• 단점: 텍스트 선택 불가, SEO 비친화적
• 사용 사례: 게임, 복잡한 시각화, 애니메이션이 많은 애플리케이션

SVG 렌더러

• 장점: 벡터 그래픽, 텍스트 선택 가능, SEO 친화적, CSS 스타일링 가능
• 단점: 복잡한 애니메이션에서 성능 저하 가능
• 사용 사례: 차트, 다이어그램, 정적인 시각화

서버 사이드 렌더링

// 서버 사이드 모드를 사용하면
// 1. 서버에서 SVG로 먼저 렌더링 
// 2. 클라이언트에서 지정된 렌더러로 하이드레이션
<Widget 
  renderer="canvas"     // 클라이언트 렌더러
  ssr={{                 // SSR 활성화 및 크기 지정
    size: {
      width: 800,      // 서버에서 렌더링할 너비
      height: 600      // 서버에서 렌더링할 높이
    }
  }}
  widget={...} 
/>

TypeScript 지원

Flitter는 TypeScript로 작성되었으며, 완전한 타입 지원을 제공합니다.

import { Container, ContainerProps, EdgeInsets, Text } from '@meursyphus/flitter';

const props: ContainerProps = {
  color: 'lightblue',
  padding: EdgeInsets.all(20),
  child: Text('Hello, TypeScript!')
};

const container = Container(props);

다음 단계

설치가 완료되었다면, Hello World 예제를 통해 첫 번째 Flitter 애플리케이션을 만들어보세요.

커뮤니티 지원

도움이 필요하거나 질문이 있으신가요?

• GitHub Issues
• Discord 커뮤니티
• Stack Overflow