Intlayer로 Nest backend 번역하기 | 국제화(i18n)

express-intlayer는 Express 애플리케이션을 위한 강력한 국제화(i18n) 미들웨어로, 클라이언트의 선호도에 따라 현지화된 응답을 제공하여 백엔드 서비스를 전 세계적으로 접근 가능하게 만듭니다. NestJS는 Express 위에 구축되었기 때문에, express-intlayer를 NestJS 애플리케이션에 원활하게 통합하여 다국어 콘텐츠를 효과적으로 처리할 수 있습니다.

시작하기

새로운 NestJS 프로젝트 생성

npm install -g @nestjs/clinest new my-nest-app

설치

express-intlayer를 사용하기 시작하려면, npm을 사용하여 패키지를 설치하세요:

npx intlayer@canary init --interactive    # v9# npx intlayer init                       # v8

--interactive 플래그는 선택 사항입니다. AI 에이전트인 경우 intlayer-cli init를 사용하세요.

이 명령은 환경을 감지하고 필요한 패키지를 설치합니다. 예를 들어:

npm install intlayer express-intlayer

tsconfig.json 구성

TypeScript와 함께 Intlayer를 사용하려면 tsconfig.json이 ES 모듈을 지원하도록 설정되어 있는지 확인하세요. module과 moduleResolution 옵션을 nodenext로 설정하면 됩니다.

{  compilerOptions: {    module: "nodenext",    moduleResolution: "nodenext",    // ... 기타 옵션  },}

설정

프로젝트 루트에 intlayer.config.ts 파일을 생성하여 국제화 설정을 구성하세요:

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

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

export default config;

콘텐츠 선언하기

번역을 저장하기 위해 콘텐츠 선언을 생성하고 관리하세요:

콘텐츠 선언은 애플리케이션 내 어디에서나 정의할 수 있으며, contentDir 디렉토리(기본값 ./src)에 포함되어 있고 콘텐츠 선언 파일 확장자(기본값 .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml})와 일치해야 합니다.

자세한 내용은 콘텐츠 선언 문서를 참조하세요.

Express 미들웨어 설정

express-intlayer 미들웨어를 NestJS 애플리케이션에 통합하여 국제화를 처리하세요:

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";import { AppController } from "./app.controller";import { AppService } from "./app.service";import { intlayer } from "express-intlayer";@Module({  imports: [],  controllers: [AppController],  providers: [AppService],})export class AppModule implements NestModule {  configure(consumer: MiddlewareConsumer) {    consumer.apply(intlayer()).forRoutes("*"); // 모든 경로에 적용  }}

서비스 또는 컨트롤러에서 번역 사용하기

이제 getIntlayer 함수를 사용하여 서비스나 컨트롤러에서 번역에 접근할 수 있습니다:

import { Injectable } from "@nestjs/common";import { getIntlayer } from "express-intlayer";@Injectable()export class AppService {  getHello(): string {    return getIntlayer("app").greet; // "app" 네임스페이스에서 번역된 인사말을 반환합니다.  }}

호환성

express-intlayer는 다음과 완벽하게 호환됩니다:

• React 애플리케이션용 react-intlayer
• Next.js 애플리케이션용 next-intlayer
• Vite 애플리케이션용 vite-intlayer

또한 브라우저와 API 요청을 포함한 다양한 환경에서 모든 국제화 솔루션과 원활하게 작동합니다. 미들웨어를 사용자 정의하여 헤더나 쿠키를 통해 로케일을 감지할 수 있습니다:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 기타 구성 옵션  middleware: {    headerName: "my-locale-header",    cookieName: "my-locale-cookie",  },};export default config;

기본적으로 express-intlayer는 Accept-Language 헤더를 해석하여 클라이언트가 선호하는 언어를 결정합니다.

구성 및 고급 주제에 대한 자세한 내용은 문서를 참조하세요.

TypeScript 구성

express-intlayer는 국제화 프로세스를 향상시키기 위해 TypeScript의 강력한 기능을 활용합니다. TypeScript의 정적 타이핑은 모든 번역 키가 포함되도록 보장하여 누락된 번역의 위험을 줄이고 유지보수성을 향상시킵니다.

자동 생성된 타입들(기본적으로 ./types/intlayer.d.ts 위치)이 tsconfig.json 파일에 포함되어 있는지 확인하세요.

{  // ... 기존 TypeScript 설정  include: [    // ... 기존 TypeScript 설정    ".intlayer/**/*.ts", // 자동 생성된 타입 포함  ],}

VS Code 확장

Intlayer 개발 경험을 향상시키기 위해 공식 Intlayer VS Code 확장을 설치할 수 있습니다.

VS Code 마켓플레이스에서 설치하기

이 확장은 다음 기능을 제공합니다:

• 번역 키에 대한 자동 완성.
• 누락된 번역에 대한 실시간 오류 감지.
• 번역된 콘텐츠의 인라인 미리보기.
• 번역을 쉽게 생성하고 업데이트할 수 있는 빠른 작업.

확장 사용 방법에 대한 자세한 내용은 Intlayer VS Code 확장 문서를 참조하세요.

Git 구성

Intlayer에서 생성된 파일은 무시하는 것이 권장됩니다. 이렇게 하면 Git 저장소에 해당 파일을 커밋하는 것을 방지할 수 있습니다.

이를 위해, 다음 지침을 .gitignore 파일에 추가할 수 있습니다:

# Intlayer에서 생성된 파일 무시.intlayer