기본 콘텐츠로 건너뛰기

냉장고 가계부 프로젝트 39

식품명을 등록하는 부분에 자동완성 기능을 제공하면 사용자가 식품명을 입력할 때 좀 더 편리하게 사용할 수 있다.

위 스크린샷처럼 식품명을 한글자씩 입력할 때마다, 입력한 키워드로 시작하는 단어들을 제공한다.

냉장고 가계부 프로젝트에서는 단지 식품명을 입력하는데 도움을 주는 기능을 제공하므로, 사전에 준비된 키워드 목록을 제공한다. javascript는 bootstrap3-typeahead를 사용한다.

키워드를 검색하기 위한 fridge-search 프로젝트를 새로 생성한다.
키워드 목록의 빠른 검색을 위해 Trie 알고리즘을 사용한다.
Trie 알고리즘을 구현한 Apache Commons Collection4 라이브러리를 사용하기위해 pom.xml 에 다음과 같이 의존성을 추가한다.
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-collections4</artifactId>
</dependency>

Apache Commons Collections의 Trie 인터페이스를 구현한 구현클래스 PatriciaTrie 를 사용하여 자동완성 기능을 구현한다.
내부적으로 Map 인터페이스를 구현하고 있기때문에 데이터의 추가는 put, 삭제는 remove 메서드를 사용하며, prefixMap 이라는 메서드는 주어진 key 값을 접두사로 갖는 데이터들을 SortedMap 타입으로 리턴한다.

식품명 자동완성을 위해 ProductNameTrie 클래스를 다음과 같이 구현했다.
@Component
public class ProductNameTrie {
    private Trie<String, Long> trie = new PatriciaTrie<>();
    
    private static final int MAX_SIZE = 10;

    public synchronized Long put(String key, long value) {
        return trie.put(key, value);
    }
    
    public String[] search(String query) {
        return prefixMap(query)
                .entrySet().stream()
                .filter(entry -> {
                    return !entry.getKey().equals(query);
                })
                .sorted((e1, e2) -> e2.getValue().compareTo(e1.getValue()))
                .limit(MAX_SIZE)
                .map(entry -> {
                    return entry.getKey();
                })
                .collect(Collectors.toList())
                .toArray(new String[0]);
    }
    
    SortedMap<String, Long> prefixMap(String key) {
        return UnmodifiableSortedMap.unmodifiableSortedMap(trie.prefixMap(key));
    }

    public synchronized Long increaseScore(String key) {
        if(trie.containsKey(key)) {
            return trie.put(key, trie.get(key) + 1);
        }
        return null;
    }
    
}

멤버 변수 trie에 PatriciaTrie 클래스를 생성하고 할당한다. 변수타입은 Trie<K, V> 인터페이스이며, 키 타입은 String, 벨류 타입은 Long 타입을 가진다. 키값으로 키워드 문자열을 넣고, 벨류값으로 Score 값을 넣어서 Score값을 기준으로 추천목록을 정렬할 것이다.
Score값이 크면 자동완성 목록의 상단으로 정렬되며, Score값이 작으면 반대의 경우가 된다.
정적 변수 MAX_SIZE는 자동완성 목록의 최대값을 나타낸다.

put 메서드는 trie에 새로운 키워드를 추가한다. 파라미터로 키워드값을 나타내는 String key, 점수값을 나타내는 long value를 받는다. 리턴타입은 Long 타입이며 주어진 key값이 없을경우 Null을 반환하고, 이미 존재하는 키 일경우 기존 키에 대한 value값을 리턴한다.

prefixMap 메서드는 key 문자열을 파라미터로 전달받는데 주어진 key문자열을 접두사로 하는 모든 데이터를 SortedMap 타입으로 반환한다. 이렇게 반환된 값을 UnmodifiableSortedMap 클래스의 팩토리메서드 unmodifiableSortedMap 메서드에 파라미터로 전달하면 수정불가능한 SortedMap 객체를 반환한다.

search 메서드는 prefix 메서드를 호출해서 반환받은 불변 SortedMap 객체를 String 배열타입으로 변환해서 리턴한다. 메서드 내부는 다음과 같은 순서로 변환한다.

  1. 저장된 키워드와 동일한 데이터는 필터로 제외한다.
  2. Value 값(Score)을 기준으로 내림차순 정렬을 한다.
  3. entry 개수를 MAX_SIZE 정적변수로 제한한다.
  4. Key값으로 이뤄진 List 타입으로 변환한다.
  5. Collection 타입을 배열타입으로 변환한다.

 increaseScore 메서드는 문자열 키워드를 파라미터로 전달받는데 trie 데이터에 키워드가 존재할 경우, 해당 키워드의 Value(Score) 값을 1 증가시키고, 증가시키기 이전의 score값을 반환한다. trie 데이터에 키워드가 존재하지 않을 경우 Null을 반환한다.

increaseScore 메서드는 자동완성을 통해 검색된 키워드를 식품 추가하기를 통해 등록될 경우, 해당 키워드의 점수를 1점 추가하는 기능을 제공한다. 이를통해 Score점수가 높은 키워드는 사용자들이 많이 등록하는 키워드라는 의미를 가지며, 높은 우선순위를 가지는 키워드를 상단에 배치함으로써 사용자 편의성을 제공할 수 있다.

자동완성 기능을 위해 별도의 ElasticSearch 서버를 마련하거나, 검색 키워드들의 저장소로 NoSQL 서버들을 마련하기에는 너무 과한 인프라 구성이라고 생각된다. 지금도 마이크로서비스를 위한 Spring Boot 프로젝트가 별도로 구성되어 있지만, 초기에는 하나의 서버로 구성된 Monolithic 방식으로 시작하는게 좋다. 지금의 냉장고 가계부 프로젝트는 학습의 의미로 여러개 서버로 나뉘어져있지만, 실제로 CloudFoundry에 올릴때는 하나로 뭉쳐서 올릴 계획이다.

그래서, 키워드 데이터들을 일단 RDBMS에 저장하고 관리하기 위해 ProductName 테이블과 엔티티를 생성한다.
CREATE TABLE Product_name (
    name VARCHAR(100) NOT NULL,
    score BIGINT DEFAULT 0,
    PRIMARY KEY (name)
);

Product_name 테이블은 name, score 두 컬럼으로 이뤄져있다. 이 테이블과 매핑되는 엔티티 클래스는 다음과 같다.
@NoArgsConstructor
@Data
@Entity
public class ProductName {
    @Id
    private String name;
    private long score;
    
    @Builder
    public ProductName(String name, long score) {
        this.name = name;
        this.score = score;
    }

}

ProductName 클래스는 단순해서 별 다른 설명이 필요없을 것 같다. JpaRepository를 상속하는 ProductNameRepository 인터페이스를 생성하면 Persistence 쪽은 준비가 끝난다.
ProductNameController 클래스는 UI서버에서 들어오는 입력 query값을 받는 endpoint 역할을 하는 searchProductName 메서드와, UI서버에서 식품이 추가되었을때, 식품명을 전달받아서 키워드의 점수를 증가시키는 increaseScore 메서드로 구성된다.
@RestController
@Slf4j
@RequiredArgsConstructor
public class ProductNameController {
    private final ProductNameTrie trie;
    private final ProductNameRepository productNameRepository;
    
    @GetMapping("/searchProductName")
    public String[] searchProductName(String query) {
        log.info("search query: {}", query);
        return trie.search(query);
    }
    
    @PutMapping("/increaseScore")
    public ResponseEntity<Void> increaseScore(@RequestBody String query) {
        log.info("increase query: {}", query);
        Optional.ofNullable(trie.increaseScore(query))
            .ifPresent(score -> {
                productNameRepository.save(ProductName.builder()
                        .name(query)
                        .score(score + 1)
                        .build());
            });
        return ResponseEntity.noContent().build();
    }

}

searchProductName 메서드는 쿼리스트링 "query" 키에 대한 값을 입력파라미터로 전달받는다.
UI서버에서는 "http://fridge-search/searchProductName?query=사과" 와 같이 요청하게 된다.
그러면 ProductNameTrie 클래스의 search 메서드를 호출하는데 파라미터로 query값을 전달하게 되고, 해당 키워드를 prefix로 가지는 키워드들 집합이 문자열 배열형태로 응답된다.

increaseScore 메서드는 요청본문에 query 키워드가 전달되며, 이를 ProductNameTrie클래스의 increaseScore메서드를 호출하는데 파라미터로 query를 전달한다.
Optional클래스 팩토리메서드인 ofNullable은 파라미터로 전달되는 제너릭 T는 null을 리턴할 수도 있는 객체를 의미한다.
increaseScore메서드가 null이 아닌 값을 리턴할 경우(ifPresent) ProductName의 score를 1 증가시키고 저장한다.

UI서버의 코드는 크게 복잡한것 없이 Feign클라이언트로 fridge-search 서버의 API를 접근할 수 있도록 제공하고 FoodController에서 식품이 추가되면 increaseScore를 호출하도록 코드를 추가한다.

이전글: 냉장고 가계부 프로젝트 38
다음글: 냉장고 가계부 프로젝트 40

이 블로그의 인기 게시물

레거시 코드 활용 전략 - 마이클 C. 페더스

2장. 효과적인 피드백 활용 레거시 코드 변경 알고리즘 변경 지점을 식별한다. 테스트 지점을 찾는다. 의존관계를 깬다. 테스트 루틴을 작성한다. 변경시키고 리팩토링한다. 3장. 감지와 분리 레거시코드를 원자 단위까지 분리하여 변경지점을 식별한다. 의존관계를 가진 객체의 경우 Mock/Fake 객체를 사용하기 위해 인터페이스로 의존성을 깬다. 테스트 루틴을 작성 -> 수정 -> 테스트 성공 -> 리팩토링 단계를 반복한다. 4장. 봉합 자바에서는 클래스패스를 이용한 다른 버전의 클래스를 만들수 있다. 5장. 레거시 코드를 위한 도구 JUnit 6장. 고칠 건 많고 시간은 없고 발아(Sprout) Method / Class: 메서드/클래스를 추가 포장(Wrap) Method / Class: 기존 메서드/클래스를 포장하는 메서드/클래스를 추가(데코레이터 패턴) 7장. 코드 하나 바꾸는데 왜 이리 오래 걸리지? 의존관계 반전 원칙 당신의 코드가 인터페이스에 종속되는 경우, 그 의존관계는 사실 경미한 수준으로 눈에 잘 띄지 않는다. 인터페이스가 변하지 않는 한, 코드를 변경시킬 필요는 없다. 또한 인터페이스들은 그들 아래에 위치한 코드에 비해 훨씬 적은 빈도로 변경된다. 인터페이스를 하나 가지고 있는 경우, 그 인터페이스를 구현하는 클래스들을 편집하거나 그 인터페이스를 구현하기 위한 새로운 클래스들을 추가할 수 있다. 물론 그 인터페이스를 사용하는 코드에 영향을 주지도 않는다. 이런 이유 때문에 구체 클래스보다는 인터페이스나 추상 클래스에 종속되는 편이 좋다. 덜 변하는 것들에 종속됨으로써 특정 변경이 초래할지도 모를 대규모 재컴파일 사태의 위험을 최소화할 수 있다. 8장. 특징, 어떻게 추가할까? 테스트 주도 개발 실패 테스트 케이스를 작성한다. 컴파일되게 만든다. 테스트에 통과하도록 만든다. 중복을 제거한다. 반복한다....

Dolphin 2

별도의 회원가입 없이 소셜 로그인 기능 제공으로 간편한 로그인 가능. Dolphin 프론트엔드는 회원가입 절차가 따로 없고, 간단하게 소셜 로그인 기능을 제공함으로써 회원가입, 인증절차를 생략했습니다. 우선, 간단하게 국내에서 잘 알려진 네이버의 API를 사용합니다. 네이버 개발자센터 웹사이트 에서 네이버 아이디로 로그인 기능을 살펴봅니다. 개발 문서를 자세히 살펴보고 API 신청을 합니다. 애플리케이션의 이름을 정하고 필요한 정보를 필수/선택에 체크합니다. 밑으로 내려보면 로그인 API 서비스 환경 부분에서 환경 추가 셀렉트박스에서 PC 웹을 선택하면 다음과 같은 입력폼이 나타납니다. 서비스 URL은 내 웹애플리케이션의 URL이 될 예정입니다. 지금은 개발상태이므로 localhost를 입력했습니다. Callback URL은 네이버 OAuth 인증 url로 호출하면, 인증절차 후 네이버에서 리다이렉트해줄 url을 뜻합니다. 저는 /naver/login 으로 했습니다. 등록이 완료되면 client-id와 client-secret 값을 제공해줍니다. 이 값을 이용해서 인증처리를 할 수 있습니다. spring.io 웹사이트의 튜토리얼 문서를 보면 Facebook 소셜 로그인 기능에 대한 설명이 자세하게 나와있습니다. 이 부분을 참고합니다. Spring Boot and OAuth2 pom.xml 파일에 의존성을 추가하고 Application 클래스에 @EnableOAuth2Sso 애너테이션을 선언합니다. 튜토리얼대로 application.yaml 파일(application.properties)에 설정 정보를 입력합니다. clientId, clientSecret 값은 네이버 개발자센터에서 받은 대로 입력합니다. accessTokenUri는 네이버의 경우 https://nid.naver.com/oauth2.0/token 입니다. userAuthorizationUri는 네이버의 경우 https://ni...

Dolphin 3

100자 이내의 짧은 글을 쓸 수 있는 게시판 제공. Dolphin Project에서 가장 메인 서비스는 예적금 시뮬레이터이므로, 다른 기능 구현은 차후로 미뤄뒀지만, 사용자와 소통할 수 있는 최소한의 기능은 제공하는게 맞다는 생각이 들어 아주 단순한 게시판 기능을 제공합니다. 사용자가 글을 쓰려면 로그인을 먼저 해야합니다. 글을 등록 후 삭제할 때 글 작성자를 식별할 수 있어야 하기 때문입니다. 게시판은 Dolphin Frontend Main 페이지에 자리잡았습니다. 사용자가 가장 먼저 만나게 되는 웹페이지이므로 적당하다고 생각합니다. 다음은 로그인을 하기 전 사용자가 볼 수 있는 메인 페이지입니다. 글 상단에는 작성일(MMM-dd-yyyy)과 작성자 고유번호(#numbers)가 노출됩니다. Dolphin 은 네이버 로그인을 사용하기 때문에, 사용자를 식별할 수 있는 정보는 저 고유번호가 됩니다. 하단에는 글 내용이 자리잡습니다. 스크린샷에서는 Hello, world!! 라는 문구가 보이네요. 글은 최대 100자까지 허용합니다. 버튼 두개(Newer, Older) 는 페이징 버튼인데, Newer는 최근페이지로 이동을 하며, Older는 지나간 글을 보는 페이징버튼입니다. 기본 페이지 사이즈는 20개입니다. 오른쪽으로 보이는 글 작성 폼은 현재 로그인 하기 전이므로 textarea 는 disabled 처리되어 있고 Login버튼이 자리잡고 있습니다. 다음은 사용자가 로그인 한 뒤의 메인페이지입니다. 변경된 부분은 사용자 고유번호 뒤에 Remove 버튼이 나타났습니다. 해당 글 작성자가 로그인한 사용자일 경우에만 보이게 됩니다. 오른쪽 글 작성 폼도 이제 활성화 되었습니다. 아주 단순한 Textarea 창과 Submit 버튼이 자리잡고 있습니다. 다음은 작성자가 아닌 다른 사용자가 로그인한 경우 입니다. 사용자 고유번호(#54097272) 옆에 Remove 버튼이...