Spring+Vue.js 다국어 API 구현

1. 다국어 지원을 위한 Spring 설정

 

1.1. 메시지 소스 설정

messageSource 빈을 설정하여 메시지를 관리하는 소스를 정의합니다. ResourceBundleMessageSource를 사용하여 프로퍼티 파일에서 메시지를 읽어옵니다.

@Configuration
public class AppConfig {

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

• messages.properties, messages_ko.properties, messages_en.properties와 같은 다양한 프로퍼티 파일을 생성하여 다국어 메시지를 관리합니다.

# messages.properties
greeting.message=Hello, World!

# messages_ko.properties
greeting.message=안녕하세요, 월드!

# messages_en.properties
greeting.message=Hello, World!

---

1.2. 로케일 변경 설정

로케일을 변경하기 위해 LocaleResolver와 LocaleChangeInterceptor를 설정합니다.

@Configuration
public class AppConfig implements WebMvcConfigurer {

    @Bean
    public LocaleResolver localeResolver() {
        SessionLocaleResolver resolver = new SessionLocaleResolver();
        resolver.setDefaultLocale(Locale.KOREAN);
        return resolver;
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        LocaleChangeInterceptor localeChangeInterceptor = new LocaleChangeInterceptor();
        localeChangeInterceptor.setParamName("lang");
        registry.addInterceptor(localeChangeInterceptor);
    }
}

• lang 파라미터로 전달된 값을 기반으로 로케일이 변경됩니다.

---

2. 다국어 메시지 API 구현

@RestController
@RequestMapping("/api/messages")
public class LanguageController {

    private final MessageSource messageSource;

    public LanguageController(MessageSource messageSource) {
        this.messageSource = messageSource;
    }

    @GetMapping
    public ResponseEntity<Map<String, String>> getMessages(@RequestParam String lang) {
        Locale locale = new Locale(lang);
        Map<String, String> messages = new HashMap<>();
        messages.put("greetingMessage", messageSource.getMessage("greeting.message", null, locale));
        return ResponseEntity.ok(messages);
    }
}

• 위의 코드는 /api/messages 엔드포인트에서 로케일에 따른 다국어 메시지를 반환하는 간단한 Spring 컨트롤러입니다.

---

3. Vue.js에서 Axios를 사용하여 API 호출

// LanguageService.js

import axios from 'axios';

const LanguageService = {
  getMessages(locale) {
    return axios.get(`/api/messages?lang=${locale}`);
  },
};

export default LanguageService;

• Vue.js에서는 Axios를 사용하여 Spring 서버의 /api/messages 엔드포인트로 로케일을 전달하여 다국어 메시지를 받아올 수 있습니다.

---

4. Vue 컴포넌트에서 사용

<!-- MyComponent.vue -->

<template>
  <div>
    <h1>{{ greetingMessage }}</h1>
    <button @click="changeLocale('en')">English</button>
    <button @click="changeLocale('ko')">한국어</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LanguageService from '@/services/LanguageService';

const greetingMessage = ref('');

const changeLocale = async (locale) => {
  const response = await LanguageService.getMessages(locale);
  greetingMessage.value = response.data.greetingMessage;
};
</script>

• 위의 코드는 Vue 컴포넌트에서 LanguageService를 이용하여 다국어 메시지를 받아오고, 버튼 클릭 이벤트를 통해 로케일을 변경하여 다국어 메시지를 업데이트하는 예제입니다.
• 이제 Spring에서 Vue.js로 다국어 메시지를 전달하는 예제를 만들었습니다.
• 이를 기반으로 프로젝트에 맞게 추가적인 설정이나 기능을 구현할 수 있습니다.