@GetMapping(SETTINGS_TAGS_URL)
public String updateTags(@CurrentUser Account account, Model model) {
model.addAttribute(account);
return SETTINGS_TAGS_VIEW_NAME;
}tag를 입력할 수 있는 form을 보여줄 때 아무런 데이터 정보를 넘겨주지 않고 있다. account 정보만 넘겨주고 있음! 실제로 form을 입력하는 뷰에서 이미 우리가 등록했던 다른 tags 정보들을 조회할 수 있어야 한다. 따라서 accountService의 getTags를 통해 tag들을 가져오도록 할 것이다.
Tag 엔티티 타입으로 보여주는 게 아니라 문자열로 전송할 것이다. 문자열 타입의 리스트로 보내려고 함. 따라서 태그가 문자열로 바뀌고, 문자열을 수집해서 리스트로 변환해서 보내줄 것이다.
.을 찍어서 체이닝하는 것, 익숙해지면 쉬운데 처음 보면 어려울 것..
타임리프 #strings 유틸리티
인풋에 들어갈 value 를 타임리프를 통해 생성한다. 생성을 할때 넘겨주는 것은 문자열의 리스트이다.
들어온 문자열은 List.of("Spring", "Hibernaet", "JPA") 인데 이것을 Spring, Hibernate, JPA 로 바꿔주고 싶은 것이다. 그래야 tagify 가 각각의 태그로 인식할 수 있다. 타임리프가 제공하는 스트링 유틸을 사용해서 조인을 하면 된다.
<input id="tags" type="text" name="tags" th:value="${#strings.listJoin(tags, ',')}"
class="tagify-outside" aria-describedby="tagHelp"/>tags라는 list에 들어있는 각각의 데이터를 , 콤마로 조인을 하면 데이터가 변환된다.
Ajax whitelist
Dynamically-loaded suggestions list (whitelist) from the server (as the user types) is a frequent need to many.
Tagify comes with its own loading animation, which is a very lightweight CSS-only code, and the loading state is controlled by the method tagify.loading which accepts true or false as arguments.
Below is a basic example using the fetch API. I advise to abort the last request on any input before starting a new request.
미리 선택지를 준다. 다른 유저들이 사용한 tags들이 있으면 보여줄 수 있다.
출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발
https://github.com/yairEO/tagify#ajax-whitelist
