빠른 시작

Svelte 5가 필요합니다. SDK는 SvelteKit 서버 렌더링과 함께 작동합니다. GitHub 소스

프로젝트 만들기

Langsys에서 프로젝트를 만드세요. 프로젝트 ID와 API 키가 필요합니다. 얼리 액세스 신청하기

설치

npm install langsys-js-svelte

초기화하기

루트 레이아웃에서 Langsys를 한 번만 초기화하세요. 구성 객체와 사용자의 로케일을 담고 있는 쓰기 가능한 스토어를 인자로 받습니다.

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

API 키

쓰기 키

개발용입니다. SDK는 앱에 새 문구와 콘텐츠 블록이 나타나는 즉시 등록합니다.

읽기 전용 키

프로덕션용입니다. SDK는 번역만 가져오며 문구를 생성하지 않습니다.

SDK는 보유한 키의 종류를 감지하여 그에 맞게 동작합니다.

문구 번역하기

개별 문자열에는 t 스토어를 사용하세요. 문구 자체가 조회 키이자 기본 언어 텍스트이므로 별도의 키 파일이 필요 없습니다. 중괄호 안의 플레이스홀더는 컴파일할 때 타입 검사가 수행됩니다.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

같은 문구라도 위치에 따라 의미가 달라질 때는 카테고리를 사용하세요:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

콘텐츠 블록 번역

구조가 중요한 큰 블록에는 Translate 컴포넌트를 사용하세요. 번역가는 스타일이 적용된 결과를 보고 하나의 단위로 번역하며, 그 안에서도 문구별로 작업합니다.

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

기타 SDK 및 API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

API 레퍼런스

해결되지 않는 문제가 있나요? 메시지 보내기