하나의 프로젝트. 네 가지 SDK. 동시에 번역됩니다.

langsys-js-react, langsys-js-vue, langsys-js-svelte, 그리고 이들이 모두 감싸고 있는 순수 langsys-js-typescript 기본 SDK가 하나의 공유 Langsys 프로젝트를 읽어 같은 구문을 렌더링한 결과입니다. 로케일을 바꾸면 모든 패널이 한꺼번에 업데이트되는 것을 확인할 수 있습니다.

같은 문구를 세 가지 방식으로 표현합니다. 각 패널 아래의 코드만 다릅니다. 메시지를 1로 바꾸면 모든 바인딩이 한꺼번에 다시 렌더링됩니다. 문장은 플랫 형태로 작성되어 있습니다. Langsys가 번역 과정에서 각 로케일의 복수형을 생성하므로 분기를 직접 작성할 필요가 없습니다.

const t = useT();
const count = useSignal(countStore);

<p>{t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{t('You have {count} new messages.', 'LearnDemo', { count })}</p>

const t = useT();
const count = useSignal(countStore);

<p>{{ t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' }) }}</p>
<p>{{ t('You have {count} new messages.', 'LearnDemo', { count }) }}</p>

import { t } from 'langsys-js-svelte';

<p>{$t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages.', 'LearnDemo', { count: $countStore })}</p>

import { t, tSignal } from 'langsys-js-typescript';

tSignal.subscribe(() => {
  hello.textContent = t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' });
  messages.textContent = t('You have {count} new messages.', 'LearnDemo', { count });
});

각 패널의 브리지: useSignal (React) · useSignal (Vue) · $store (Svelte — 어댑터 불필요) · signal.subscribe() (순수 JS).

프레임워크를 선택하세요

기반 SDK는 동일하며, 각 페이지에서 라이브 데모와 함께 하나의 바인딩이 쓰는 관용 표현을 소개합니다.

Langsys가 처음이신가요? 개념 문서에서 이 데모의 바탕이 되는 아이디어를 설명합니다. 문구가 곧 키라는 점, 로케일 저장소, 그리고 읽기 전용 키를 브라우저에서 사용해도 안전한 이유를 확인해 보세요.