💻본 포스팅은 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 김영한'님의 강의를 듣고 작성되었습니다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
[메시지]
- 문제 상황
- 클라이언트가 갑작스럽게 웹페이지의 '상품명' 부분을 '상품 이름'으로 변경 요청하게 될 때 우리는 상품명이란 이름을 하나만 가지고 있지 않고 수백 수천개를 '상품명' -> '상품 이름'으로 수정해야 한다면?
- 위와 같은 문제 상황에 메시지 기능을 사용하면 한 번에 해결이 가능하다.
[STEP1. application.properies 설정]
spring.messages.basename=messages- 메시지 기능을 사용하기 위해서 위와 같이 설정해준다. messages 부분은 본인이 원하는 이름으로 해서 양식만 맞춰주면 된다.
[메시지 기능 직접 등록?]
원한다면 직접 등록도 가능하다. 아래와 같이 직접 등록해주는 방식도 있지만 위와 같이 spring이 지원하는 방법을 사용하면 훨씬 편리하게 메시지 기능을 사용할 수 있다.
@Bean public MessageSource messageSource() {
ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
messageSource.setBasenames("messages", "[원하는 파일명]");
messageSource.setDefaultEncoding("utf-8");
return messageSource;
}
[STEP2. messages.properties]
- 원하는 기능을 설정해준다.
hello=안녕
hello.name=안녕 {0}
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=취소
[STEP3. 메시지 기능 적용]
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2 th:text="#{page.item}">상품 상세</h2>
</div>
<!-- 추가 -->
<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>
<div>
<label for="itemId" th:text="#{label.item.id}">상품 ID</label>
<input type="text" id="itemId" name="itemId" class="form-control"
value="1" th:value="${item.id}" readonly>
</div>
<div>
<label for="itemName" th:text="#{label.item.itemName}">상품명</label>
<input type="text" id="itemName" name="itemName" class="form-control"
value="상품A" th:value="${item.itemName}" readonly>
</div>
<div>
<label for="price" th:text="#{label.item.price}">가격</label>
<input type="text" id="price" name="price" class="form-control"
value="10000" th:value="${item.price}" readonly>
</div>
<div>
<label for="quantity" th:text="#{label.item.quantity}">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control"
value="10" th:value="${item.quantity}" readonly>
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg"
onclick="location.href='editForm.html'"
th:onclick="|location.href='@{/message/items/{itemId}/edit(itemId=${item.id})}'|"
type="button" th:text="#{page.updateItem}">상품 수정</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/message/items}'|"
type="button" th:text="#{page.items}">목록으로</button>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
- messages.properties에서 상품 수정 버튼의 이름을 상품 수정222로 바꿔서 적용시키면 저런 모습으로 나온다.
- 이처럼 메시지를 사용해서 웹페지이 화면에서 변경, 수정이 일어나는 곳을 손쉽게 수정해줄 수 있다.
[국제화]
- 웹 페이지가 한국에서만 사용한다면 다른 언어를 지원할 필요가 없을 것이다. 그러나 애플과 같이 국제적인 기업의 경우는 좀 다르다. 많은 나라에서 제품 판매를 하는 만큼 그 웹 페이지에서도 여러 언어를 지원해야 할 것이다.
- 같은 페이지 내에서 언어를 여러개 지원하는 것을 국제화라 한다.
[messages_en.properties]
hello=hello
hello.name=hello {0}
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- 영어로 설정했을 때 설정한 부분이 모두 잘 바뀐다.
'Back-End > Spring' 카테고리의 다른 글
| [Spring MVC2][검증(Validation)] - BindingResult(부제: 검증 오류 스프링부트와 타임리프가 손쉽게 지원하는 법, 바인딩 오류에도 400오류가 아닌 제대로 컨트롤러를 호출하는 법) (0) | 2022.04.27 |
|---|---|
| [Spring MVC2][검증(Validation)] - 직접 검증 (0) | 2022.04.25 |
| [Spring MVC2][타임리프] - 템플릿 레이아웃 (0) | 2022.04.15 |
| [Spring MVC2][타임리프] - 템플릿 조각 (0) | 2022.04.15 |
| [Spring MVC][웹 페이지 만들기] - 2. 상품 도메인 개발과 HTML (0) | 2022.04.04 |