express-intlayer (i)를 사용하여 Express Backend API 번역

다양한 국가와 언어의 사용자를 만족시키는 애플리케이션을 만들면 앱의 도달 범위와 사용자 만족도를 크게 높일 수 있습니다. express-intlayer를 사용하면 Express 백엔드에 국제화(i18n)를 추가하는 것이 간단하고 효율적입니다. 이 게시물에서는 Express 애플리케이션을 다국어로 만들고 전 세계 사용자에게 더 나은 경험을 보장하기 위한 express-intlayer 설정 방법을 안내하겠습니다.

백엔드를 국제화하는 이유는 무엇입니까?

백엔드를 국제화하면 애플리케이션이 전 세계 사용자와 효과적으로 커뮤니케이션할 수 있습니다. 사용자가 선호하는 언어로 콘텐츠를 제공하면 사용자 경험을 개선하고 앱의 접근성을 높일 수 있습니다. 백엔드 국제화를 고려해야 하는 몇 가지 실질적인 이유는 다음과 같습니다.

• 현지화된 오류 메시지: 혼란과 불만을 줄이기 위해 사용자의 모국어로 오류 메시지를 표시합니다.
• 다국어 콘텐츠 검색: 데이터베이스의 콘텐츠를 여러 언어로 제공하므로 전자 상거래 사이트 또는 콘텐츠 관리 시스템에 적합합니다.
• 현지화된 이메일 및 알림: 거래 이메일, 마케팅 캠페인 또는 푸시 알림을 수신자가 선호하는 언어로 보내 참여도를 높입니다.
• 향상된 사용자 커뮤니케이션: SMS 메시지, 시스템 알림, UI 업데이트 등 사용자의 언어로 전달하면 명확성이 보장되고 전반적인 경험이 향상됩니다.

백엔드를 국제화하면 문화적 차이를 존중할 뿐만 아니라 애플리케이션을 더 넓은 대상에게 공개하여 전 세계적으로 확장하기가 더 쉬워집니다.

Express-Inlayer 소개

express-intlayer는 intlayer 생태계와 완벽하게 통합되어 백엔드에서 현지화를 처리하는 Express 애플리케이션용으로 설계된 미들웨어입니다. 이것이 훌륭한 선택인 이유는 다음과 같습니다.

• 간편한 설정: 사용자 로케일 기본 설정에 따라 응답을 제공하도록 Express 앱을 빠르게 구성하세요.
• TypeScript 지원: TypeScript의 정적 타이핑을 활용하여 모든 번역 키가 고려되었는지 확인하고 오류를 줄입니다.
• 유연한 구성: 헤더, 쿠키 또는 기타 방법을 통해 로케일을 감지하는 방법을 사용자 정의하세요.

자세한 내용은 전체 설명서를 참조하세요.

시작하기

Express 애플리케이션에서 express-intlayer를 설정하는 단계를 살펴보겠습니다.

1단계: 설치

먼저 선호하는 패키지 관리자를 사용하여 intlayer와 함께 express-intlayer를 설치합니다.

npm install intlayer express-intlayer

pnpm add intlayer express-intlayer

yarn add intlayer express-intlayer

2단계: 구성

다음으로 프로젝트 루트에 intlayer.config.ts 파일을 만듭니다. 이 파일은 애플리케이션에 대해 지원되는 로캘과 기본 언어를 정의합니다.

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

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

export default config;

이 예에서는 영어, 프랑스어, 스페인어(멕시코), 스페인어(스페인)를 지원하며 영어가 기본 언어로 설정되어 있습니다.

3단계: Express 미들웨어 통합

이제 Express-Inlayer를 Express 애플리케이션에 통합하세요. src/index.ts에서 설정하는 방법은 다음과 같습니다.

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
app.get("/", (_req, res) => {
  res.send(
    t({
      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)",
    })
  );
});

// Sample error route: Serving localized errors
app.get("/error", (_req, res) => {
  res.status(500).send(
    t({
      en: "Example of returned error content in English",
      fr: "Exemple de contenu d'erreur renvoyé en français",
      "es-ES": "Ejemplo de contenido de error devuelto en español (España)",
      "es-MX": "Ejemplo de contenido de error devuelto en español (México)",
    })
  );
});

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

이 설정에서는:

• 인레이어 미들웨어는 일반적으로 Accept-Language 헤더에서 사용자의 로케일을 감지합니다.
• t() 함수는 감지된 로케일을 기반으로 적절한 번역을 반환합니다.
• 요청한 언어를 사용할 수 없는 경우 기본 로케일(이 경우 영어)로 돌아갑니다.

로케일 감지 사용자 정의

기본적으로 express-intlayer는 Accept-Language 헤더를 사용하여 사용자가 선호하는 언어를 결정합니다. 그러나 intlayer.config.ts에서 이 동작을 사용자 정의할 수 있습니다:

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

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

이러한 유연성을 통해 사용자 정의 헤더, 쿠키 또는 기타 메커니즘을 통해 로캘을 감지하여 다양한 환경과 클라이언트 유형에 적응할 수 있습니다.

다른 프레임워크와의 호환성

express-intlayer는 다음을 포함하여 intlayer 생태계의 다른 부분과 잘 작동합니다.

• React-intlayer React 애플리케이션용
• Next.js 애플리케이션을 위한 next-intlayer

이 통합은 백엔드에서 프런트엔드까지 전체 스택에 걸쳐 일관된 국제화 전략을 보장합니다.

강력한 i18n을 위한 TypeScript 활용

TypeScript로 구축된 express-intlayer는 국제화 프로세스를 위한 강력한 타이핑을 제공합니다. 이는 다음을 의미합니다.

• 유형 안전성: 컴파일 시 누락된 번역 키를 찾아냅니다.
• 향상된 유지관리성: TypeScript 도구를 사용하여 번역을 더 쉽게 관리하고 업데이트할 수 있습니다.
• 생성된 유형: tsconfig.json에 생성된 유형(기본적으로 ./types/intlayer.d.ts에 있음)을 포함하여 번역이 올바르게 참조되는지 확인하세요.

마무리

express-intlayer를 사용하여 Express 백엔드에 국제화를 추가하는 것은 전 세계 사용자가 애플리케이션에 더 쉽게 액세스하고 사용자 친화적으로 만들 수 있는 현명한 조치입니다. 간편한 설정, TypeScript 지원 및 유연한 구성 옵션을 갖춘 express-intlayer는 현지화된 콘텐츠 및 통신 전달 프로세스를 단순화합니다.

백엔드를 다국어로 만들 준비가 되셨나요? 지금 Express 애플리케이션에서 express-intlayer를 사용하여 전 세계 사용자에게 원활한 환경을 제공하세요.

자세한 내용, 구성 옵션 및 고급 사용 패턴을 보려면 공식 전체 문서를 확인하거나 GitHub 저장소를 방문하여 소스 코드를 탐색하고 기여하세요.

위 내용은 express-intlayer (i)를 사용하여 Express Backend API 번역의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!