스프링과 JPA 기반 웹 애플리케이션 개발 #44 관심 주제 자동완성

스프링과 JPA 기반 웹 애플리케이션 개발 #44 관심 주제 자동완성

해당 내용은 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발의 강의 내용을 바탕으로 작성된 내용입니다.

강의를 학습하며 요약한 내용을 출처를 표기하고 블로깅 또는 문서로 공개하는 것을 허용합니다 라는 원칙 하에 요약 내용을 공개합니다. 출처는 위에 언급되어있듯, 인프런, 스프링과 JPA 기반 웹 애플리케이션 개발입니다.

제가 학습한 소스코드는 https://github.com/n00nietzsche/jakestudy_webapp 에 지속적으로 업로드 됩니다. 매 커밋 메세지에 강의의 어디 부분까지 진행됐는지 기록해놓겠습니다.

관심 주제 자동완성

• 기존의 태그 정보 자동완성을 목록으로 제공하는 기능
  • Tagify의 whitelist를 사용한다.
  • https://yaireo.github.io/tagify/#section-manual-suggestions
• ObjectMapper
  • 객체를 JSON으로 JSON을 객체로 변환할 때 사용하는 유틸리티
  • https://github.com/FasterXML/jackson

SettingsController

ObjectMapper 빈 가져오기

    // 스프링 부트에서는 fasterXML 에서 제공하는 ObjectMapper 가 기본으로 의존성 등록이 되어있고,
    // 빈으로도 등록이 되어있다.
    private final ObjectMapper objectMapper;

스프링 부트에서는 자동으로 등록되어 있다.

tagRepository의 모든 태그를 JSON 형태의 문자열로 내려주기

        List<String> allTags = tagRepository.findAll().stream().map(Tag::getTitle).collect(Collectors.toList());
        model.addAttribute("whitelist", objectMapper.writeValueAsString(allTags));

ObjectMapper를 이용했다.

tags.html

내린 데이터 div에 담기

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

div에 담은 데이터 id로 셀렉해서 갖다쓰기

let tagify = new Tagify(tagInput, {
            pattern: /^.{0,20}$/,
            whitelist: JSON.parse($("#whitelist").text()),
            dropdown: {
                enabled: 1 // 한글자 치면 추천 태그를 띄워줌
            } // 맵 태그들
	
  ...

제이쿼리를 이용해서 셀렉하고, 텍스트를 뽑아내주었다.