관심 주제 자동완성

기존의 태그 정보 자동완성 목록으로 제공하는 기능

• Tagify의 whitelist를 사용한다.
• https://yaireo.github.io/tagify/#section-manual-suggestions

기존에 있는 태그들을 선택할 수 있는 편의성을 제공하기 위해! 트롤러에서 뷰를 보여줄 때 태그 목록을 모두 whitelist로 제공해야 한다. 따라서 다 가져온 다음에 findAll()

ObjectMapper?

• 객체를 JSON으로 JSON을 객체로 변환할 때 사용하는 유틸리티
• https://github.com/FasterXML/jackson

전체 태그는 자바 객체에 있는 리스트 타입이다. 이것을 JSON, 문자열로 변경하려면 오브젝트 맵퍼를 사용하면 된다. 기본적으로 스프링 부트에서는 fasterxml가 제공하는 ObjectMApper가 존재한다. ObjectMApper가 빈으로 등록되어 있다. ObjectMApper는 객체를 Json으로 변환하거나 json문자열을 파싱 받을 때 핵심적인 역할을 한다.

문자열 리스트인 allTags

<div id="whitelist" th:text="${whitelist}" hidden></div>

div 태그 안에 값들이 들어올 것이다. 이 값들을 hidden으로 숨겨 놓는다. 그리고 id를 준다. 이 id로 자바스크립트에서 값을 참조하면 된다. 값을 바인딩 하는 것은 html에서 했고 스크립트에서는 html에 있는 값을 읽어서 쓰면 된다.

 var tagify = new Tagify(tagInput, {
                pattern: /^.{0,20}$/,
                whitelist: JSON.parse(document.querySelector("#whitelist").textContent),
                dropdown : {
                    enabled: 1, // suggest tags after a single character input
                } // map tags
});

html에 있는 값을 읽어서 사용하면 된다. querySelector로 whitelist에 해당하는 document를 선택한 후 그 안에 있는 textContet를 사용하자.

출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발