32.다국어 지원 및 로컬라이제이션, Nest.js에서 언어별 데이터 처리하기

현대 웹 애플리케이션에서 다국어 지원 및 로컬라이제이션은 매우 중요한 요소입니다. 여러 언어를 지원함으로써, 비즈니스는 더 넓은 시장을 대상으로 서비스를 제공하고, 사용자 경험을 개선할 수 있습니다. 이 글에서는 Nest.js를 사용하여 언어별 데이터 처리를 구현하는 방법에 대해 자세히 설명하겠습니다.

1. 다국어 지원의 필요성

다국어 지원은 기업이 다양한 문화적 배경을 가진 사용자에게 서비스를 제공하는 데 도움을 줍니다. 다음과 같은 이유로 다국어 지원이 필요합니다:

글로벌 시장 접근성: 다국적 기업들이 자신의 서비스를 다양한 언어로 제공함으로써, 전 세계의 사용자들에게 접근할 수 있습니다.
사용자 경험 향상: 사용자가 익숙한 언어로 서비스를 사용할 수 있어, 더 나은 사용자 경험을 제공합니다.
문화적 민감성: 언어 지원은 다양한 문화적 특성과 사용자의 기대를 이해하고 대응할 수 있는 방법 중 하나입니다.

2. Nest.js 소개

Nest.js는 최신 JavaScript 및 TypeScript를 사용하여 구축된 서버 측 애플리케이션 프레임워크입니다. 강력한 타입 지원과 모듈화된 구조로 구성되어 있어, 유지보수하기 쉽고 확장성이 뛰어난 애플리케이션을 개발할 수 있습니다. Nest.js는 Express 또는 Fastify를 기반으로 하며, 이를 통해 고성능 웹 애플리케이션을 구성할 수 있습니다.

3. Nest.js에서 다국어 지원 구현하기

3.1. 필요 라이브러리 설치

다국어 처리를 위해 i18n 라이브러리를 사용할 것입니다. 다음 명령어로 설치할 수 있습니다:

npm install i18n

3.2. i18n 설정하기

Nest.js 애플리케이션에서 i18n을 설정하려면, 먼저 생성한 애플리케이션의 메인 파일인 main.ts에 다음과 같이 코드를 추가합니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as i18n from 'i18n'; 

async function bootstrap() {
    i18n.configure({
        locales: ['en', 'ko', 'ja'], // 지원할 언어 목록
        directory: __dirname + '/locales', // 번역 파일이 위치할 디렉토리
        defaultLocale: 'ko', // 기본 언어
        autoReload: true, // 코드 변경 시 리로딩 여부
        syncFiles: true // 동기화 여부
    });

    const app = await NestFactory.create(AppModule);
    app.use(i18n.init); // i18n 초기화
    await app.listen(3000);
}
bootstrap();

3.3. 언어별 데이터 준비

각 언어에 대한 번역 문자열을 별도의 JSON 파일로 생성합니다. locales 디렉토리를 생성하고 그 안에 en.json, ko.json, ja.json 파일을 만듭니다. 예를 들어:

// locales/ko.json
{
    "greeting": "안녕하세요",
    "farewell": "안녕히 가세요"
}

// locales/en.json
{
    "greeting": "Hello",
    "farewell": "Goodbye"
}

// locales/ja.json
{
    "greeting": "こんにちは",
    "farewell": "さようなら"
}

3.4. 언어 결정 및 사용하기

클라이언트가 요청한 언어에 따라 적절한 번역을 사용하기 위해, 요청 헤더나 쿼리 매개변수를 통해 언어를 결정할 수 있습니다. 다음과 같이 컨트롤러를 작성하여 다국어 지원을 구현할 수 있습니다:

import { Controller, Get, Req } from '@nestjs/common';
import { Request } from 'express';

@Controller('greet')
export class GreetController {
    @Get()
    getGreeting(@Req() req: Request): string {
        return req.__('greeting'); // 요청에 따른 인사말 반환
    }
}

4. 클라이언트에서 언어 선택하기

클라이언트 측에서는 사용자가 선호하는 언어를 선택할 수 있는 인터페이스를 제공합니다. 예를 들어, Next.js 프레임워크를 사용하여 사용자가 선택한 언어에 따라 요청을 보낼 수 있습니다.

4.1. Next.js 클라이언트 작성하기

Next.js에서 페이지를 생성하고 언어 선택 버튼을 만든 후, 사용자가 언어를 변경할 수 있도록 로직을 구현합니다. 아래는 언어 선택 버튼이 포함된 간단한 페이지 예제입니다:

import { useState } from 'react';

const LanguageSelector = () => {
    const [language, setLanguage] = useState('ko');

    const changeLanguage = (lang) => {
        setLanguage(lang);
        // 서버 요청 보내기
        fetch(`http://localhost:3000/greet?lang=${lang}`)
            .then(response => response.text())
            .then(data => alert(data));
    }

    return (
        
            언어 선택
            
            
            
        
    );
};

export default LanguageSelector;

5. 결론

Nest.js를 사용하여 다국어 지원 및 로컬라이제이션 기능을 구현하는 과정은 복잡할 수도 있으나, 필요한 도구와 설정을 통해 쉽게 할 수 있습니다. 위의 내용에서는 i18n 라이브러리를 통해 다양한 언어를 지원하는 방법과 클라이언트에서 언어를 선택할 수 있는 간단한 인터페이스를 구현하는 방법을 설명했습니다. 이를 통해 사용자 경험을 향상시키고 글로벌 시장에 접근하는 데 도움이 되는 웹 애플리케이션을 개발할 수 있습니다.

앞으로 더 많은 기능과 사용자 친화적인 인터페이스를 추가하여, 다국어 지원을 더욱 강화할 수 있습니다. 독자 여러분의 프로젝트에도 다국어 지원을 성공적으로 적용하시길 바랍니다!