세계 최고의 숏링크 플랫폼을 현지화했습니다
- Mary-Kate Olsen원래의
- 2024-11-07 06:33:03550검색
Tolgee와 함께 플레이하는 일환으로, 오픈소스 회사인 dub.co를 다른 언어로 번역해 보았습니다! 1시간이 걸렸는데 결과는 놀랍습니다!
이 튜토리얼에서는 빠르고 자율적인 번역 관리를 위해 설계된 플랫폼인 Tolgee를 사용하여 Next.js 애플리케이션에서 현지화에 대한 쉽고 효율적인 접근 방식을 안내하겠습니다.
또한 사용자가 선호하는 언어로 애플리케이션에 액세스하고 상호 작용할 수 있도록 하는 인기 있는 링크 관리 플랫폼인 Dub.co와 Tolgee를 통합하는 방법을 배우게 됩니다.
전제 조건
이 튜토리얼을 완전히 이해하려면 React 또는 Next.js에 대한 기본적인 이해가 필요합니다.
다음 사항도 설정해야 합니다.
- Tolgee 프로젝트 - 최소 두 가지 언어로 번역된 기존 프로젝트입니다.
- Tolgee CLI - 명령줄을 사용하여 컴퓨터에서 Tolgee 플랫폼과 상호 작용할 수 있습니다.
- Docker - Dub.co를 실행하는 데 필요합니다. 컨테이너화를 사용하여 애플리케이션을 보다 쉽게 생성, 배포 및 실행할 수 있는 오픈 소스 플랫폼입니다.
- Docker Compose - 다중 컨테이너 Docker 애플리케이션을 정의하고 실행하기 위한 소프트웨어 애플리케이션입니다.
- Python(버전 3.8 이상): Dub.co의 일부 패키지를 구성하는 데 필요합니다.
톨지란 무엇인가요?
Tolgee는 코드를 수정하지 않고도 애플리케이션을 어떤 언어로든 번역할 수 있는 개발자 친화적인 현지화 플랫폼입니다. 웹 애플리케이션용으로 설계되었지만 모바일 및 데스크톱 애플리케이션도 지원합니다.
Tolgee를 사용하면 소스 코드에서 키를 찾거나 현지화 파일을 편집하거나 번역가를 위해 데이터를 수동으로 내보낼 필요가 없습니다. Tolgee는 상황에 맞는 번역, 이미 번역된 문자열을 추적하기 위한 번역 메모리, 기계 번역 및 자동 번역 등을 제공합니다.
별을 도와주세요. ?
이런 기사를 더 많이 만들면 도움이 될까요?
Tolgee 저장소에 별표 표시 ⭐
로컬 컴퓨터에서 Dub.co를 설정하는 방법
Dub.co는 마케팅 팀이 링크에 강력한 분석 기능을 추가하고, 짧은 링크를 만들고, 링크용 QR 코드를 생성하는 등의 작업을 수행할 수 있는 오픈 소스 링크 관리 플랫폼입니다. Steven Tey(이전 Vercel 소속)가 제작했습니다.
컴퓨터에 Dub.co를 설정하려면 다음 단계를 따르세요.
아래 코드 조각을 실행하여 Dub.co GitHub 저장소를 복제하세요.
git clone https://github.com/dubinc/dub.git
dub 폴더로 이동하여 프로젝트 종속성을 설치합니다.
git clone https://github.com/dubinc/dub.git
apps/web 폴더 내에서 .env.example 파일 이름을 .env.
로 변경합니다.새 Tinybird 계정을 만들고 관리자 인증 토큰을 .env 파일에 복사하세요.
pnpm install
packages/tinybird 디렉토리로 이동하고 다음 명령을 사용하여 Tinybird CLI를 설치합니다.
TINYBIRD_API_KEY=<your_admin_auth_token>
터미널에서 다음 명령을 실행하고 Tinybird CLI를 사용하여 인증하라는 메시지가 표시되면 관리자 인증 토큰을 입력하세요.
pip3 install tinybird-cli
아래 코드 조각을 실행하여 Tinybird 데이터 소스와 엔드포인트를 게시하세요.
tb auth
Upstash 데이터베이스를 만들고 REST API 섹션에서 다음 사용자 인증 정보를 .env 파일에 복사하세요.
tb push
QStash 탭으로 이동하여 다음 자격 증명을 .env 파일에 복사합니다.
UPSTASH_REDIS_REST_URL=<your_rest_url> UPSTASH_REDIS_REST_TOKEN=<your_rest_token>
그런 다음 apps/web 디렉토리 내에서 다음 명령을 실행하여 Docker Compose 스택을 시작합니다.
QSTASH_TOKEN= QSTASH_CURRENT_SIGNING_KEY= QSTASH_NEXT_SIGNING_KEY=
다음 명령을 사용하여 Prisma 클라이언트를 생성하고 데이터베이스 테이블을 생성합니다.
docker-compose up
Dub.co는 다양한 인증 방법을 지원합니다. GitHub 앱을 만들고 아래 URL을 콜백 URL로 복사하세요.
npx prisma generate npx prisma db push
마지막으로 개발 서버를 시작합니다.
http://localhost:8888/api/auth/callback/github
브라우저에서 http://localhost:8888으로 이동하여 웹 애플리케이션에 액세스하고 작업공간을 만든 후 시작할 수 있습니다. 문제가 발생하면 전체 설치 가이드를 참조하여 자세한 지원을 받으세요.
Next.js 애플리케이션에서 Tolgee를 구성하는 방법
이 섹션에서는 Tolgee를 Next.js 애플리케이션에 추가하고 여러 언어를 지원하도록 구성하여 사용자가 선호하는 언어로 앱에 액세스할 수 있도록 하는 방법을 알아봅니다.
Next.js 애플리케이션에서 현지화를 구현하려면 Tolgee React SDK를 설치해야 합니다.
pnpm dev
다음으로 Tolgee 플랫폼 계정을 만들고 대시보드에 로그인하세요.
프로젝트 버튼을 클릭하고 프로젝트에 대해 선호하는 언어를 선택하여 새 프로젝트를 추가하세요. 이 애플리케이션에서는 영어(기본 언어), 중국어, 힌디어, 스페인어, 아랍어의 5개 언어를 사용합니다.
대시보드 오른쪽 상단에 있는 프로필 아이콘을 클릭한 다음 프로젝트 API 키를 선택하여 Tolgee 프로젝트에 대한 API 키를 생성하세요.
.env.development.local을 생성하고 API 키를 파일에 복사하세요.
git clone https://github.com/dubinc/dub.git
사이드바 메뉴에서 번역을 선택하고 프로젝트에 새 번역을 추가하세요.
번역 키를 생성하고 번역에 필요한 내용이나 문자열을 추가하고 설명을 제공한 후 저장할 수 있습니다.
Tolgee는 기본적으로 다양한 기계 번역 옵션을 제공하므로 콘텐츠를 프로젝트 내에서 사용 가능한 언어로 쉽게 번역할 수 있습니다.
축하합니다! 애플리케이션 내에서 번역을 위한 Tolgee 플랫폼을 성공적으로 설정했습니다. 다음으로 애플리케이션에서 직접 번역을 쉽게 생성할 수 있도록 Dub.co 프로젝트 내에서 Tolgee를 구성해 보겠습니다.
Dub.co에서 현지화를 설정하는 방법
이 섹션에서는 Dub.co 프로젝트 내에서 클라이언트-서버 상호 작용을 지원하도록 Tolgee를 구성하는 과정을 안내하겠습니다.
먼저 Tolgee CLI 패키지를 설치합니다.
pnpm install
다음 코드 조각을 실행하여 프로젝트 API 키를 사용하여 Tolgee 플랫폼에 로그인하세요.
TINYBIRD_API_KEY=<your_admin_auth_token>
다음으로 apps/web 디렉터리에 i18n 폴더를 만듭니다. 이 폴더에는 Tolgee 플랫폼 프로젝트에서 사용할 수 있는 다양한 언어의 번역이 포함된 JSON 파일이 저장됩니다.
pip3 install tinybird-cli
apps/web 디렉토리 내에서 아래 코드 조각을 실행하여 Tolgee 프로젝트에서 생성된 언어 번역을 가져옵니다.
tb auth
위의 코드 조각은 Tolgee 플랫폼 내에서 생성된 다양한 언어 번역으로 i18n 폴더를 자동으로 채웁니다.
tb push
apps/web 디렉터리 내에 Tolgee 구성을 포함할 tolgee 폴더를 만듭니다.
git clone https://github.com/dubinc/dub.git
tolgee 디렉터리에 shared.ts 파일을 추가한 후 다음 코드 조각을 파일에 복사하세요.
pnpm install
위의 코드 조각은 Tolgee를 기본 언어와 대체 언어로 구성하여 애플리케이션 내에서 현지화를 활성화합니다.
다음으로 tolgee 디렉터리에 client.tsx 파일을 생성한 후 아래 코드 조각을 파일에 복사합니다.
TINYBIRD_API_KEY=<your_admin_auth_token>
client.tsx 파일은 클라이언트 구성 요소를 번역하는 데 사용되며 서버에서 렌더링되는 구성 요소에 대한 컨텍스트 내 기능도 활성화합니다. 위의 코드 조각은 전체 Dub.co 애플리케이션을 래핑하여 언어 변경 및 번역을 관리하는 데 필요한 구성을 제공하는 TolgeeNextProvider 구성 요소를 정의합니다.
tolgee 폴더에 사용자 정의 locale.ts 파일을 만들고 여기에 다음 코드 조각을 복사합니다.
pip3 install tinybird-cli
마지막으로 tolgee 폴더에 server.tsx 파일을 생성한 후 다음 코드 조각을 파일에 복사합니다.
tb auth
애플리케이션은 단일 렌더링의 구성요소 간에 Tolgee 인스턴스를 공유하기 위해 React 서버 캐시를 활용합니다. 이를 통해 앱은 서버 구성 요소의 어느 곳에서나 Tolgee 인스턴스를 사용할 수 있습니다.
축하합니다! Tolgee를 성공적으로 구성했으며 이제 애플리케이션 내의 다양한 콘텐츠에 번역을 추가할 준비가 되었습니다.
Tolgee를 사용하여 애플리케이션 콘텐츠를 번역하는 방법
여기에서는 웹 애플리케이션 내 콘텐츠를 번역하는 방법과 Tolgee가 어떻게 인앱 번역을 쉽게 구현하는지 알아봅니다.
시작하려면 tolgee/client.tsx에 정의된 TolgeeNextProvider 구성 요소로 전체 Dub.co 애플리케이션을 래핑해야 합니다. apps/web/app 폴더로 이동한 후 app.dub.co/(dashboard) 디렉토리로 이동하여 layout.tsx 파일을 업데이트하세요. 아래와 같이:
tb push
위의 코드 조각은 Tolgee 공급자와 함께 대시보드 경로를 래핑하여 애플리케이션 전체에서 언어 전환 및 현지화를 활성화합니다.
Tolgee는 애플리케이션 내에서 텍스트를 선택하고 번역하는 데 도움이 되는 두 가지 후크, 즉 useTolgee 및 useTranslate를 제공합니다.
- useTolgee 후크는 Tolgee 인스턴스를 반환하므로 텍스트를 번역할 때 다시 렌더링을 트리거하는 다양한 이벤트를 구독할 수 있습니다.
- useTranslate 후크에는 앱 내에서 직접 실제 번역을 렌더링하는 번역 기능(t 함수)이 포함되어 있습니다.
다음 코드 조각을 추가하여 app.dub.co/(dashboard)/[slug] 디렉토리의 page.tsx 파일을 업데이트하세요.
"클라이언트 사용";
"@/ui/layout/page-content"에서 { PageContent }를 가져옵니다.
"./page-client"에서 WorkspaceLinksClient를 가져옵니다.
//?? 톨지 설치
"@tolgee/react"에서 import { useTolgee, useTranslate };
"tolgee/locale"에서 { setUserLocale }을 가져옵니다.
기본 함수 내보내기 WorkspaceLinks() {
const { t } = useTranslate();
const tolgee = useTolgee(["pendingLanguage"]);
const 언어 = tolgee.getPendingLanguage();
반품 (
<PageContent title="링크">
{/**-- 기본 언어 선택을 위한 HTML 입력 --*/}
<div className="flex w-full flex-col px-10">
<p>언어 선택</p>
<선택
defaultValue={언어}
클래스명="반올림-SM"
이름="로케일"
>
<p>위의 코드 스니펫은 사용자가 다양한 언어를 선택하고 전환할 수 있는 HTML <strong><select> 태그를 표시합니다. <strong>{t("hello")}</strong> 요소는 Tolgee의 번역 기능을 사용하여 선택한 언어를 기반으로 "hello" 키의 값을 렌더링합니다.
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>마지막으로 언어 변경을 지원하도록 애플리케이션 전체의 나머지 콘텐츠를 업데이트하여 사용자가 선택한 언어로 모든 구성 요소를 볼 수 있도록 할 수 있습니다.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>Tolgee는 또한 컨텍스트 내 번역 기능을 제공하므로 개발 중이든 프로덕션 중이든 상관없이 단순히 텍스트를 클릭하고 Alt 또는 Option 키를 누르기만 하면 애플리케이션 내에서 문자열을 직접 번역할 수 있습니다.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>축하합니다! 이 튜토리얼의 프로젝트를 성공적으로 완료했습니다.</p>
<p>이 튜토리얼의 소스 코드는 여기에서 확인할 수 있습니다.</p>
<p>https://github.com/JanCizmar/dub-with-tolgee</p>
<hr>
<h2>
결론
</h2>
<p>지금까지 Tolgee를 사용하여 소프트웨어 애플리케이션에 현지화를 추가하고, 여러 언어에 대한 지원을 구현하고, 실제 프로젝트 내에서 언어를 원활하게 전환하는 방법을 배웠습니다.</p>
<p>Tolgee는 콘텐츠에 대한 컨텍스트를 제공하고 단 몇 초 만에 번역을 생성할 수 있는 개발자 중심의 빠른 현지화 플랫폼입니다. 또한 Vue, Angular, Svelte를 포함한 여러 JavaScript 프레임워크를 지원하고 유연성을 위해 Figma 및 REST API와 같은 도구와 통합됩니다.</p>
<p>사용자를 위한 개인화된 경험을 만들고 싶다면 Tolgee가 탁월한 선택입니다. 자유롭게 GitHub 저장소에 기여하고 별표를 표시하고 Slack 커뮤니티에 가입하여 다른 사람들과 소통하고 팀과 소통하세요.</p><p>읽어주셔서 감사합니다!</p>
위 내용은 세계 최고의 숏링크 플랫폼을 현지화했습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!