지난 달까지 회원가입, 아이디 찾기, 비밀번호 찾기를 구현했다. 이제 회원 정보 수정을 구현하고 있다. 덕분에 다시 프론트엔드도 열심히 만지고 있다.
오늘은 새롭게 배운 Thymeleaf 문법과 그 밖의 이것저것 읽어본 글을 남긴다.
현재 locale에 맞게 언어 버튼 바꾸기
우리 페이지의 언어 선택은 이렇게 생겼다.
dropdown-item
으로 구현된 언어를 선택하면 해당 언어로 페이지를 보여주는 건 진작에 구현했었다.
문제는 dropdown
버튼에 보이는 🌐 한국어
이 문자가 선택한 언어에 맞게 바뀌지 않았다…!!
StackOverflow에서 찾아낸 방법으로 적용 성공!
<button type="button" class="btn dropdown-toggle text-muted rounded-0 border" data-toggle="dropdown">
<!-- 지구본 아이콘 -->
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-globe2" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
</svg>
</span> 
<!-- locale 기반으로 현재 언어 표시 -->
<span class="fs-12" th:switch="__${#locale.language}__">
<span th:case="ko">[[#{lang.kor}]]</span>
<span th:case="en">[[#{lang.eng}]]</span>
<span th:case="*">[[#{lang.kor}]]</span>
</span>
</button>
locale 객체를 __${#locale.language}__
이렇게 가져와야 문자열로 비교가 가능하다.
여기에 th:switch
, th:case
를 적용해서 해결했다.
자바 Enum
활용기 엿보기
회원 엔티티에 상태를 나타내는 필드를 추가해야 했다. (Active, Pending…)
이러한 필드는 늘 Enum
으로 관리했는데, 문뜩 Enum
활용법이 궁금해졌다.
우아한형제들 기술 블로그에서 Java Enum 활용기를 읽어 봤다.
Enum
에 인터페이스를 구현한 부분이 흥미로웠고, 무엇보다 기술 블로그를 이렇게 쓸 수 있다는 점도 인상 깊었다.
하루가 유독 빠르게 흘러갔다. 사실 Enum
글은 내가 정리한 글이 아니라 TIL에 적어도 되나 했지만, 그래도 공부한 기록이니까 + 나중에 다시 읽어 보고자 남긴다.
참고자료
본문 속 링크 참조