[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Link

🌱 GitHub

Notice

🍀 깃허브 / 티스토리 닉네임의 의미

관리 메뉴

DevLog 😶

[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기 본문

Back-end/Spring

[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기

dolmeng2 2022. 8. 21. 16:53

김영한 님의 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술'을 보고 정리한 글입니다 😊

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com

- 지난 포스팅과 이어집니다 :D

[Spring] Thymeleaf를 사용해서 상품 등록/수정/조회 구현하기

김영한 님의 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술'을 보고 정리한 글입니다 😊 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의 웹 애플리케이션 개발에 필요한 모든 웹 기술을

cl8d.tistory.com

| 메시지, 국제화 처리하기

- 지난 포스팅에서 만들었던 상품 관리 폼을 보면, 상품 ID의 경우 ID, 이름은 Name, 가격은 Price, 수량은 Quantity로 표현하였다.

- 만약 기획자가 itemName, itemPrice, itemQuantity로 일괄 변경하기를 원한다면 어떻게 해야 할까?

- 직접 각 파일에서 수정하지 말고, 메시지를 하나의 공간에서 관리해보자.

- 또한, 영어-한글도 자유롭게 지원하도록 만들어보자!

- 기본적으로, 메시지 관리 기능을 사용하기 위해서는 MessageSource를 스프링 빈으로 등록해야 한다.

- 이때, MessageSource는 인터페이스이기 때문에 구현체인 ResourceBundleMessageSource를 빈으로 등록하자.

- 구현체로는 그외에도 ReloadableResourceBundleMessageSource, StaticMessageSource가 있다.

- 스프링 부트에서는 자동으로 ResourceBundleMessageSource를 등록해준다!

- application.properties에 메시지 소스를 설정해주면 된다.

- 디폴트로는 'messages'라는 이름으로 기본 등록된다.

✔ 메시지 설정 파일

- /src/main/resources 디렉토리에 [file_name]_[lang_code]_[country_code].properties 형식으로 등록한다.

- 디폴트가 'messages'이기 때문에, messages_en.properties, messages_en_UK.properties 같은 형식으로 등록한다.

- 기본으로는 messages.properties이다.

[messages.properties]

hello=안녕
hello.name=안녕 {0}

[messages_en.properties]

hello=hello
hello.name=hello {0}

- 기본적으로 key-value 형태로 작성한다.

- {0}의 경우 파라미터를 담기 위해서 사용한다.

- 테스트를 진행해보자.

- 참고로, intellij 기준 한글 사용 시 file encoding에서 UTF-8로 변경해줘야 한다.

- 이거 설정한 다음 프로퍼티 파일에서 한글 깨졌는지 꼭 확인하기!

[MessageSourceTest.java]

@SpringBootTest
public class MessageSourceTest {
    @Autowired
    MessageSource ms;

    @Test
    public void hello() throws Exception {
        String result = ms.getMessage("hello", null, null);
        String result2 = ms.getMessage("hello.name",  new String[]{"spring"}, null);

        assertThat(result).isEqualTo("안녕");
        assertThat(result2).isEqualTo("안녕 spring");
    }
}

- 매개변수로는 code, args, locale 정보가 들어간다.

- locale 정보를 설정하지 않으면 디폴트인 'messages' -> messages.properties에서 데이터를 조회한다.

@Test
public void noMessage() throws Exception {
    assertThatThrownBy(() -> ms.getMessage("hihi", null, null))
        .isInstanceOf(NoSuchMessageException.class);
    String result = ms.getMessage("hihi", null, "hello!", null);
    assertThat(result).isEqualTo("hello!");
}

- 메시지가 없는 경우에는 NoSuchMessageException이 발생하지만, defaultMessage를 설정해주면 해당 메시지로 치환된다.

- defaultMessage는 세 번째 인자로 넣을 수 있다.

@Test
public void international() throws Exception {
    assertThat(ms.getMessage("hello", null, Locale.KOREA)).isEqualTo("안녕");
    assertThat(ms.getMessage("hello", null, Locale.ENGLISH)).isEqualTo("hello");
}

국제화 적용이다. Locale.KOREA를 하면 messages_ko.properties를 찾지만, 없기 때문에 default인 messages_properties에서 찾는다. Locale.ENGLISH를 하면 messages_en.properties를 찾기 때문에 우리가 hello="hello", key값이 hello인 value값 = hello가 나온다.

| 실제로 적용하기

- 지난 포스팅에서 만들었던 상품 관리 웹 애플리케이션에 메시지, 국제화를 적용해보자.

[message.properties]

label.item=Item
label.item.id=ItemID
label.item.itemName=Name
label.item.price=Price
label.item.quantity=Quantity

page.items=Item List
page.item=Item Detail
page.addItem=Item Save Form
page.updateItem=Item Edit Form

start.message=👋🏻Hello {0}!

✔ 타임리프 - 메시지 적용하기

- 타임리프의 #{...}을 사용하면 메시지 조회가 가능하다.

- th:text="#{...}" 으로 메시지를 적용해주었다.

[addForm.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  ...
</head>
<body>
<div class="container">
  <div class="py-5 text-center">
    <h2 th:text="#{page.addItem}" class="font-monospace fw-bold">Item Save Form</h2>
  </div>

  <form action="item.html" th:action th:object="${item}" method="post">
    <div class="row fw-bold font-monospace">
      <div class="col text-center">
        <label for="itemName"
               th:text="#{label.item.itemName}">Name</label>
        <input type="text"
               th:field="*{itemName}"
               class="form-control text-center"
               placeholder="Please Enter an Item Name.">
      </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
      <div class="col text-center">
        <label for="price"
               th:text="#{label.item.price}">Price</label>
        <input type="text"
               th:field="*{price}"
               class="form-control text-center"
               placeholder="Please Enter an Item Price.">
      </div>
      <div class="col text-center">
        <label for="quantity"
               th:text="#{label.item.quantity}">Quantity</label>
        <input type="text"
               th:field="*{quantity}"
               class="form-control text-center"
               placeholder="Please Enter an Item Quantity.">
      </div>
    </div>
    ...
</body>
</html>

[editForm.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    ...
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2 class="font-monospace fw-bold"
            th:text="#{page.updateItem}">Item Edit Form</h2>
    </div>

    <form action="item.html" th:action th:object="${item}" method="post">
        <div class="row fw-bold font-monospace">
            <div class="col text-center">
                <label for="id"
                       th:text="#{label.item.id}">Id</label>
                <input type="text"
                       th:field="*{id}"
                       class="form-control text-center"
                       readonly>
            </div>
            <div class="col text-center">
                <label for="itemName"
                       th:text="#{label.item.itemName}">Name</label>
                <input type="text"
                       th:field="*{itemName}"
                       class="form-control text-center">
            </div>
        </div>

        <div class="row mt-2 fw-bold font-monospace">
            <div class="col text-center">
                <label for="price"
                       th:text="#{label.item.price}">Price</label>
                <input type="text"
                       th:field="*{price}"
                       class="form-control text-center">
            </div>
            <div class="col text-center">
                <label for="quantity"
                       th:text="#{label.item.quantity}">Quantity</label>
                <input type="text"
                       th:field="*{quantity}"
                       class="form-control text-center">
            </div>
        </div>
        ...
</div>
</body>
</html>

[item.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
...
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2 class="font-monospace fw-bold"
            th:text="#{page.item}">Item Detail</h2>
    </div>
    <h2 class="font-monospace fw-bold text-center text-danger"
        th:if="${param.status}" th:text="'Save Success!'"></h2>

    <div class="row fw-bold font-monospace">
        <div class="col text-center">
            <label for="itemId"
                   th:text="#{label.item.id}">ID</label>
            <input type="text" id="itemId" name="itemId"
                   class="form-control text-center"
                   value="1" th:value="${item.id}" readonly>
        </div>
        <div class="col text-center">
            <label for="itemName"
                   th:text="#{label.item.itemName}">Name</label>
            <input type="text" id="itemName" name="itemName"
                   class="form-control text-center"
                   value="상품A" th:value="${item.itemName}" readonly>
        </div>
    </div>

    <div class="row mt-2 fw-bold font-monospace">
        <div class="col text-center">
            <label for="price"
                   th:text="#{label.item.price}">Price</label>
            <input type="text" id="price" name="price"
                   class="form-control text-center"
                   value="10000" th:value="${item.price}" readonly>
        </div>
        <div class="col text-center">
            <label for="quantity"
                   th:text="#{label.item.quantity}">Quantity</label>
            <input type="text" id="quantity" name="quantity"
                   class="form-control text-center"
                   value="10" th:value="${item.quantity}" readonly>
        </div>
    </div>
    ...
</body>
</html>

[items.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
...
<body>
<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">
        <h1 class="font-monospace fw-bold mb-3"
            th:text="#{start.message(${userName})}">👋🏻 Hello</h1>
        <hr class="my-4">
        <h2 class="font-monospace fw-bold"
            th:text="#{page.items}">Item List</h2>
        ...
    </div>
    <div class="mt-1 font-monospace">
        <table class="table table-hover table-bordered">
            <thead>
            <tr class="text-center">
                <th th:text="#{label.item.id}">ID</th>
                <th th:text="#{label.item.itemName}">상품명</th>
                <th th:text="#{label.item.price}">가격</th>
                <th th:text="#{label.item.quantity}">수량</th>
            </tr>
            </thead>
            ...
        </table>
    </div>
</div>
</body>
</html>

- 상단에 사용자에게 인사하는 문구가 있으면 좋을 것 같아서 추가하였다.

- 파라미터는 다음과 같이 #{message()}로 입력이 가능하다!

[SItemController.java] - 수정

@GetMapping
public String items(Model model) {
    List<SItem> items = repository.findAll();
    model.addAttribute("items", items);
    model.addAttribute("userName", "Spring");
    return "basic/items";
}

- 간단하게 사용자의 이름을 넘겨주었다.

- 확인해 보면 다음과 같이 잘 변경된 것을 확인할 수 있다.

- 이번에는 국제화를 적용해보자! 일본어를 적용해볼 예정이다. (한글은 뻔하니까...ㅎㅎ)

[messages_ja.properties]

label.item=項目
label.item.id=項目ID
label.item.itemName=品名
label.item.price=価格
label.item.quantity=数量

page.items=アイテムリスト
page.item=アイテム詳細
page.addItem=アイテム保存フォーム
page.updateItem=アイテム編集フォーム

start.message=こんにちは {0}<(＿＿)>!

- 파파고의 도움을 받아 작성하였다.

- 크롬에서 언어 설정을 일본어로 바꾼 다음에 한 번 돌려보자.

- 이러면 요청 시 Accept-Language 값이 변경되고, 스프링은 Locale 정보를 이 헤더에서 가져와 참고한다.

- 스프링 부트는 기본적으로 LocaleResolver 인터페이스의 구현체인 AccpetHeaderLocaleResolver를 사용한다.

- 어딘가 이질감이 들지만 아무튼 잘 적용되었다.

- 사용자가 직접 언어를 선택할 수 있도록 조금 더 커스텀해보았다.

[messages.properties]

select.lang.en=ENGLISH
select.lang.ja=JAPANESE
lang=LANGUAGE

[messages_ja.properties]

select.lang.en=英語
select.lang.ja=日本語
lang=言語

[Items.html]

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
...
<body>
<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">

        <div class="float-end fw-bold" th:text="#{lang}">언어 선택</div>

        <select id="lang" name="lang" class="form-select mb-4"
                onchange="if(this.value) location.href=(this.value);">
            <option value="">== SELECT LANGUAGE TYPE ==</option>
            <option value="?lang=en" th:text="#{select.lang.en}">영어</option>
            <option value="?lang=ja" th:text="#{select.lang.ja}">일본어</option>
        </select>
        <hr class="my-4">

        <h1 class="font-monospace fw-bold mb-3"
            th:text="#{start.message(${userName})}">👋🏻 Hello</h1>
        <hr class="my-4">

        ...
    </div>
    ...

</div>

</body>
</html>

- select box에서 사용자가 선택한 옵션을 onchange로 감지하여 감지된 값의 value 값으로 이동하도록 하였다.

- 이러면 영어 선택 시 /basic/items?lang=en, 일본어 선택 시 /basic/items?lang=ja로 넘어간다.

[WebMvcConfig.java]

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Bean
    public LocaleResolver localeResolver() {
        CookieLocaleResolver resolver = new CookieLocaleResolver();
        resolver.setDefaultLocale(Locale.getDefault());
        resolver.setCookieName("lang");
        return resolver;
    }

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

- 다음과 같이 설정 정보를 추가한다.

- 먼저, CookieLocaleResolver를 사용하여 Cookie를 이용해 Locale 정보를 저장해주었다.

- 기본은 accept-header에서 읽어오지만, 이를 사용하면 cookie에서 값을 읽어온다.

- 쿠키 이름은 lang으로 설정으로 설정하였으며, 커스텀 인터셉터를 추가하였다.

- LocaleChangeInterceptor를 활용하여 쿼리 파라미터의 lang 값이 변경되면 동작하도록 지정하였다.

- 즉, 쿼리 파라미터를 통해 들어온 언어값에 따라서 언어 설정을 진행할 수 있다.

- 내가 생각한 게 맞다면 이런 느낌...

- 사용자가 버튼 클릭 -> 쿼리 파라미터 추가 -> 인터셉터 동작 -> 쿼리파라미터 lang에 있는 언어 정보를 확인하고 언어 설정

-> 해당 언어 정보는 쿠키에 저장, 그리고 쿠키에 있는 값 계속 사용... 이런 로직인 것 같다!

- 다음 포스팅에서는 검증 처리를 진행해보자.

'Back-end > Spring' 카테고리의 다른 글

[Spring] Bean Validation - 어노테이션을 통해 검증 진행하기 (0)	2022.08.22
[Spring] BindingResult를 활용해서 검증 로직 추가하기, MessageCodesResolver 알아보기 (0)	2022.08.22
[Spring] Thymeleaf를 사용해서 상품 등록/수정/조회 구현하기 (0)	2022.08.19
[Spring] Thymeleaf 기본 문법 정리 (0)	2022.08.18
[Spring] thymeleaf, bootstrap을 통해 기본 상품 저장 웹 사이트 만들기 (0)	2022.08.18

'Back-end/Spring' Related Articles

Comments

DevLog 😶

[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기 본문

[Spring] 메시지와 국제화를 통해 언어 설정 커스텀하기

| 메시지, 국제화 처리하기

| 실제로 적용하기

'Back-end > Spring' 카테고리의 다른 글

티스토리툴바