[스프링] 스프링과 React의 국제화 및 다국어 지원 기능

18 Dec 2023

스프링

이번 포스트에서는 React로 구축된 프론트엔드 앱과 스프링으로 구성된 백엔드 서버에서의 국제화 및 다국어 지원 기능을 구현하는 방법에 대해 살펴보겠습니다.

1. 다국어 데이터 파일 생성하기

먼저, React 앱에서 지원할 다국어 데이터를 관리하기 위해 i18n 디렉토리를 생성하고 각 언어별로 다국어 데이터를 JSON 형식으로 파일로 저장합니다.

예시:

// i18n/en.json
{
  "greeting": "Hello",
  "welcome": "Welcome"
}

// i18n/ko.json
{
  "greeting": "안녕하세요",
  "welcome": "환영합니다"
}

2. React 앱에서의 다국어 지원 설정

React 앱에 react-i18next와 같은 다국어 지원을 제공하는 패키지를 설치하고, 해당 패키지를 이용하여 언어에 따른 다국어 데이터를 로딩하고 표시할 수 있도록 설정합니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: require('./i18n/en.json') },
      ko: { translation: require('./i18n/ko.json') }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

3. 백엔드에서의 다국어 지원 설정

스프링 애플리케이션에서는 다국어 지원을 위해 MessageSource를 이용하여 각 언어별로 다국어 메시지를 관리하고, 요청에 따라 적절한 언어의 메시지를 반환할 수 있도록 설정합니다.

@Configuration
public class I18nConfig {
  @Bean
  public MessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    messageSource.setBasename("i18n/messages");
    messageSource.setDefaultEncoding("UTF-8");
    return messageSource;
  }
}

4. 다국어 데이터 활용하기

React 앱에서는 다국어 데이터를 해당 언어에 맞게 렌더링하고, 스프링 애플리케이션에서는 MessageSource를 이용하여 다국어 메시지를 반환하여 클라이언트에게 전달합니다.

이러한 설정을 통해 React와 스프링에서의 국제화 및 다국어 지원 기능을 구현할 수 있습니다.

참고 자료

React 다국어 지원: https://react.i18next.com/
스프링 다국어 지원: https://www.baeldung.com/spring-boot-internationalization