HTML 에 메시지 , 국제화 적용

✏️ message 적용

📍 메시지 파일 생성

• message.properties

label.item=상품
label.item.id=상품 ID
label.item.itemName=상품명
label.item.price=가격
label.item.quantity=수량

page.items=상품 목록
page.item=상품 상세
page.addItem=상품 등록
page.updateItem=상품 수정

button.save=저장 
button.cancel=취소

📍 Thymeleaf 메시지 표현식

• 메시지 기능은 아주 많이 사용되는 기능이기 때문에 Thymeleaf 에서 기본적으로 제공해주는 기능이다.
• #{...}
  • ... 에 메시지 코드를 넣어주면 랜더링 할 때 메시지로 변환시켜준다.
  • 파라미터를 사용할 경우 괄호 ( ) 안에 값을 넣어주면 되고,
    변수도 자유롭게 넣을 수 있다.

<!-- 메시지 사용 -->
<div th:text="#{label.item}"></h2>
<p th:text="#{hello.name(${item.itemName})}"></p>

<!-- 소스 확인 -->
<div>상품</h2>
<p>안녕 상품명</p>

📍 html 에 적용하기

• th:text 속성을 적용해 등록해줄 수 있다.
  • 기존 tag 내의 text 는 삭제해주어도 된다.

...

<div class="py-5 text-center">
        <h2 th:text="#{page.addItem}">상품 등록 폼</h2>
    </div>

    <form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
            <input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price" th:text="#{label.item.price}">가격</label>
            <input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity" th:text="#{label.item.quantity}">수량</label>
            <input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>
...

✏️ 국제화 적용

📍 국제 메시지 파일 생성

• 이미 html 에 모든 세팅을 해두었기 때문에 파일생성만 하면 바로 국제화가 적용된다.

label.item=Item
label.item.id=Item ID
label.item.itemName=Item Name
label.item.price=price
label.item.quantity=quantity

page.items=Item List
page.item=Item Detail
page.addItem=Item Add
page.updateItem=Item Update

button.save=Save
button.cancel=Cancel

📍 적용 확인하기

• 크롬기준
  • 설정 → 언어 → 영어를 가장위로 이동
  • 국제화가 잘 적용된다.