안녕하세요ㅎ_ㅎ
스프링부트에서 다국어 (한국어, 영어) 설정에 따라 영문 게시글, 혹은 한국어 게시물을 화면에 뿌려주는 방법에 대해 정리해보고자 합니다!
스프링부트, 타임리프를 사용하였습니다.
WebMvcConfig에 설정한 localeResolver이며 쿠키에 저장하여 다국어를 처리할 수 있도록 설정합니다.
// WebMvcConfig.java
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Bean
public LocaleResolver localeResolver() {
CookieLocaleResolver resolver = new CookieLocaleResolver(); // 쿠키에 정보를 저장
resolver.setDefaultLocale(Locale.KOREA); // 기본값은 한국어로 세팅
resolver.setCookieName("lang"); // 쿠키에 lang으로 저장
return resolver;
}
@Bean
public LocaleChangeInterceptor localeChangeInterceptor() {
LocaleChangeInterceptor lcInterceptor = new LocaleChangeInterceptor();
lcInterceptor.setParamName("lang"); // request로 넘어오는 language 파라미터를 받아서 locale로 설정
return lcInterceptor;
}
@Bean
public MessageSource messageSource() {
ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); // locale 프로퍼티 파일 관련 설정 역할을 하는 친구
messageSource.setBasename("messages/lang"); // 경로 설정
messageSource.setDefaultEncoding("UTF-8");
return messageSource;
}
}
그리고 DB 테이블에는 아래와 같이 컬럼을 추가하였습니다.
- no : 게시물 번호
- title : 한국어 게시물 제목
- title_en : 영문 게시물 제목
- content : 한국어 게시물 내용
- content_en : 영어 게시물 내용
// HomeController.java
@RequestMapping(value = { "/test/list" }, method = RequestMethod.GET)
public ModelAndView textList(@CookieValue(value = "lang", defaultValue = "ko") String getLang) {
...
modelAndView.addObject("pageLang", getLang.toLowerCase());
...
return modelAndView;
}
그리고 컨트롤러에서는 쿠키 lang의 value 값을 가져오고, getLang에 담긴 값을 pageLang에 소중히 담아서 view에 전달합니다.
이제 html에서 설정 방법을 봅니다.
// list.html
<head th:lang="${pageLang}">
...
<script>
<!-- 다국어 쿠키 저장 -->
function setLang(lang) {
var selectedLang = lang;
document.cookie= "lang = " + selectedLang + "; path=/;";
// console.log(selectedLang);
location.reload();
};
</script>
</head>
<header>
<ul class="select-lang with-indicator">
<li><a href="#" onclick="setLang('ko')">KR</a></li>
<li><a href="#" onclick="setLang('en')">EN</a></li>
</ul>
</header>
<div>
<span th:if="${pageLang == 'en'}"><th:block th:text="${boardList.main.titleEn}"/></span>
<span th:if="${pageLang == 'ko'}"><th:block th:text="${boardList.main.title}"/></span>
</div>
</html>
헤더 즉 KR 혹은 EN 버튼을 클릭하면 setLang 함수를 실행하게 됩니다.
KR 버튼을 클릭하게 되면 함수로 ko 인자를 전달하면서 값을 selectedLang에 담고 document.cookie로 쿠키값을 업데이트 해줍니다. 여기서 포인트는 path도 함께 업데이트 시켜주어야 합니다!!
path 없이 언어만 쿠키에 업데이트 시키면 경로가 해당 경로의 하위에서만 적용이 되어져버리더라구여..'-' 저는 헤더에서 언어 설정을 하면 모든 페이지에서 적용이 될 수 있게 하기 위하였기 때문에 모든 경로에서 적용될 수 있게 같이 업데이트 해줍니다.
그리고 마지막으로 해당 페이지를 리로딩하면서 해당 값을 컨트롤러가 받으면서 쿠키에 담긴 언어값을 받게 됩니다.
웹사이트를 들어와서 쿠키에 담긴 lang값이 ko로 디폴트로 잘 담겨져 있습니다. 여기서 만약 EN 버튼을 클릭하게 되면 쿠키에 업데이트 되어집니다.
그리고 콘솔창에서 window.document.cookie를 찍으면 쿠키에 담겨져 있는 lang의 값을 확인 할 수 있습니다. 그리고 페이지가 새로고침 되면서 컨트롤러에 쿠키의 lang값으로 en이 넘어가고 pageLang에 en을 담아서 view 전달해줍니다.
<span th:if="${pageLang == 'en'}"><th:block th:text="${boardList.main.titleEn}"/></span>
<span th:if="${pageLang == 'ko'}"><th:block th:text="${boardList.main.title}"/></span>
en을 받아온 페이지는 해당 if문에 참이 되는 블럭만 보여주게 되고, ko 블럭은 숨겨지게 되면서 해당 게시물의 영문 타이틀만 화면에 출력이 되어집니다.
끝.