안녕하세요 여러분!

최근에 Express 기반 API에 다국어 지원을 추가해야 했습니다. 사용자 선호 언어에 따라 번역된 콘텐츠로 응답하도록 백엔드를 설정하려는 분들을 위해 간단한 튜토리얼을 공유하고자 합니다.

백엔드를 국제화해야 하는 이유

백엔드 국제화의 실용적인 사용 사례는 다음과 같습니다:

- *사용자 언어로 백엔드 오류 표시:* 오류 메시지를 사용자의 모국어로 표시하여 이해도를 높이고 불만을 줄일 수 있습니다. 이를 통해 오류를 프론트엔드에서 매핑하지 않고도 토스트에 직접 표시할 수 있습니다.

- *다국어 이메일, 푸시 알림 등 전송:* 수신자의 언어로 거래, 마케팅 또는 알림 이메일을 보내 참여도를 높일 수 있습니다. 푸시 알림, SMS 메시지를 현지화하여 명확성을 보장하고 사용자 경험을 향상시킵니다.

- *다국어 콘텐츠 검색:* 데이터베이스에서 여러 언어로 된 콘텐츠를 제공할 수 있습니다.

시작하기

설치

먼저, 선호하는 패키지 관리자를 사용하여 필요한 패키지를 설치합니다:

npm install intlayer express-intlayer

설정

다음으로, 프로젝트 루트에 intlayer.config.ts 파일을 생성하여 국제화 설정을 구성합니다:

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.KOREAN,
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.KOREAN,
  },
};

export default config;

Express 애플리케이션 설정

이제 express-intlayer를 사용하도록 Express 애플리케이션을 설정합니다:

// src/index.ts
import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// 국제화 요청 핸들러 로드
app.use(intlayer());

// 라우트
app.get("/", (_req, res) => {
  res.send(
    t({
      ko: "영어로 반환된 콘텐츠의 예제",
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// 서버 시작
app.listen(3000);

호환성

express-intlayer는 react-intlayer 또는 next-intlayer와 원활하게 작동합니다. 다양한 국제화 솔루션과도 호환됩니다.

로케일 감지 커스터마이징

기본적으로 express-intlayer는 Accept-Language 헤더를 사용하여 클라이언트의 선호 언어를 결정합니다. 이 동작을 헤더나 쿠키를 통해 로케일을 감지하도록 커스터마이징할 수 있습니다:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // 기타 구성 옵션
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

더 고급 구성 및 기능에 대해서는 [공식 문서](https://intlayer.org/ko/doc/environment/express)를 참고하시고, 솔루션의 [공식 웹사이트](https://intlayer.org/ko)도 확인해 보세요.