실사용 DX 점검

라이브러리를 직접 써보며 만든 데모

이 페이지는 preload하지 않은 dx-lab namespace를 useTranslation("dx-lab") 호출만으로 불러옵니다.

Lazy namespace

로딩 중

preloadNamespaces에 없는 namespace를 자동 요청

Fallback lookup

Loading...

dx-lab에 없는 공통 키는 common에서 해결

현재 언어

KO

언어 변경 시 t snapshot이 새로 계산됨

t identity

로딩 중

언어 변경 후 새 번역 snapshot을 렌더링

언어 전환

버튼을 누르면 Provider 상태, 쿠키, 현재 페이지 번역이 함께 바뀝니다.

사용하면서 느낀 피드백

강점 1

namespace 이름만 넘기면 lazy load가 시작되어서, 소비자 코드는 생각보다 짧았습니다.

강점 2

fallback namespace가 자연스럽게 섞여서 공통 로딩/버튼 문구를 중복하지 않아도 됩니다.

마찰 1

새 namespace를 추가해도 생성 타입은 자동 갱신되지 않습니다. typed workflow라면 extractor 실행 안내가 더 선명해야 합니다.

마찰 2

Devtools는 페이지가 아니라 Provider 근처에 한 번만 mount하는 패턴이 가장 이해하기 쉬웠습니다.

소비자 코드 예시

lazy namespace, fallback 문구, ready 상태를 한 화면에서 확인합니다.

"use client";

import { useTranslation } from "i18nexus";

export function BillingHero() {
  const { t, isReady } = useTranslation("billing");

  if (!isReady) return <p>{t("Loading...")}</p>;

  return <h1>{t("결제 현지화가 준비되었습니다")}</h1>;
}

Devtools 상태

Devtools는 Provider 근처에 한 번만 mount되어 페이지 코드는 번역 흐름에 집중할 수 있습니다.