약 일주일 전에 다음과 같은 튜토리얼을 작성했습니다. Node.js 및 jQuery로 타입 헤드 검색 구현하기. 타입헤드는 전체 텍스트 검색(FTS)을 사용할 때 많은 훌륭한 사용 사례 중 하나이지만, 이것이 유일한 사용 사례는 아닙니다. 많은 분들이 아시다시피 저는 Node.js만큼이나 Golang의 열렬한 팬이기 때문에 이번에는 다른 프로그래밍 기술을 사용하여 동일한 예제를 살펴보는 것이 좋겠다고 생각했습니다.
사용 방법을 살펴보겠습니다. typeahead.js와 jQuery 확장자, 그리고 카우치베이스 와 Go 프로그래밍 언어를 사용하여 애플리케이션에서 일종의 자동 완성 기능을 구현했습니다.
내 이전 기사와는 다른 언어이므로 다른 문제이므로 걱정하지 마세요. 처음부터 시작하여 Go로 어떻게 작업이 수행되는지 살펴보겠습니다. 여기서는 Go를 설치 및 구성하고 Couchbase를 설치 및 구성했다고 가정합니다.
데이터 집합 및 전체 텍스트 검색 색인 준비하기
이 예제에서는 매우 간단한 데이터 집합으로 작업하지만, 최소한의 추가 노력으로 훨씬 더 복잡해질 수 있습니다. 데이터 세트는 다음과 같은 형태가 될 것입니다:
|
1 2 3 4 5 |
{ "title": "영원히 & 항상", "artist": "테일러 스위프트", "type": "song" } |
데이터베이스의 각 문서는 하나의 노래를 나타냅니다. 간단하게 설명하기 위해 여기서는 오직 title 그리고 아티스트 문서에는 다양한 정보가 포함될 수 있습니다.
다음 단계는 문서에 대한 FTS 색인을 만드는 것입니다.
위의 이미지는 인덱스가 어떤 모습이어야 하는지 보여줍니다. 유형 매핑의 경우, 여기서는 오직 song 문서만 사용하도록 지정합니다. 또한, 저희는 오직 아티스트 그리고 title 정보를 인덱스에 저장합니다. 여기서 중요한 부분은 인덱스에 필드를 저장한다는 것입니다. 인덱스에 필드를 저장하도록 특별히 선택하지 않으면 검색 결과에 입력할 정보가 없습니다.
Go 기반 전체 텍스트 검색(FTS) 백엔드 만들기
일부 데이터와 FTS 인덱스가 준비되면 쿼리를 실행할 백엔드 개발을 시작할 수 있습니다. 백엔드는 검색을 위한 단일 엔드포인트가 있는 RESTful API가 될 것입니다. 이 애플리케이션의 상용구는 아래에서 볼 수 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
패키지 메인 가져오기 ( "encoding/json" "net/http" "github.com/gorilla/handlers" "github.com/gorilla/mux" gocb "gopkg.in/couchbase/gocb.v1" "gopkg.in/couchbase/gocb.v1/cbft" ) 유형 노래 구조체 { Id 문자열 `json:"id"` 점수 float64 `json:"score"` 아티스트 문자열 `json:"artist"` 제목 문자열 `json:"title"` } var 버킷 *gocb.버킷 func 검색엔드포인트(응답 http.응답서 작성기, 요청 *http.요청) { } func 메인() { 클러스터, _ := gocb.연결("couchbase://localhost") 클러스터.인증(gocb.비밀번호 인증기{사용자 이름: "예제", 비밀번호: "123456"}) 버킷, _ = 클러스터.OpenBucket("예제", "") 라우터 := mux.새 라우터() 라우터.핸들펀크("/검색", 검색엔드포인트).방법("GET") http.ListenAndServe(":12345", 핸들러.CORS(핸들러.허용된 헤더([]문자열{"X-요청-함께", "콘텐츠 유형", "권한 부여"}), 핸들러.허용된 메소드([]문자열{"GET", "POST", "PUT", "HEAD", "옵션"}), 핸들러.허용된 출처([]문자열{"*"}))(라우터)) } |
먼저 예상되는 검색 결과를 저장할 기본 Go 데이터 구조를 만들고 있습니다. 지금은 엔드포인트 로직을 건너뛰고, 이제 메인 함수를 사용하여 데이터베이스에 연결하고 유일한 엔드포인트를 정의합니다. 검색은 JavaScript를 통해 이루어지므로 요청을 허용하려면 CORS(교차 출처 리소스 공유)를 구성해야 합니다.
Go와의 교차 출처 리소스 공유에 대해 자세히 알고 싶으시다면 이전 기사 에 대해 설명합니다. 하지만 이 예제에서는 자세한 내용을 아는 것이 그다지 중요하지 않습니다.
중요한 기능을 살펴보겠습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
func 검색엔드포인트(응답 http.응답서 작성기, 요청 *http.요청) { 응답.헤더().설정("콘텐츠 유형", "application/json") 매개변수 := 요청.URL.쿼리() 쿼리 := gocb.새 검색 쿼리("idx-music", cbft.NewMatchQuery(매개변수.Get("query"))) 쿼리.필드("artist", "title") 결과, _ := 버킷.검색 쿼리 실행(쿼리) var 조회수 []노래 에 대한 _, 히트 := 범위 결과.조회수() { 조회수 = 추가(조회수, 노래{ Id: 히트.Id, 점수: 히트.점수, 아티스트: 히트.필드["artist"], 제목: 히트.필드["title"], }) } json.새 인코더(응답).인코딩(조회수) } |
이 함수가 호출되면 요청 쿼리 매개변수에서 모든 매개변수를 추출합니다. 그런 다음 이 매개변수를 사용하여 전체 텍스트 검색 인덱스에 대한 새 쿼리를 생성합니다. 응답에는 아티스트 그리고 title 필드가 있으므로 쿼리에서 이를 정의해야 합니다. 성공적으로 실행되면 검색 히트를 반복하여 프론트엔드에 유용할 수 있는 객체를 구성합니다.
Go 애플리케이션을 실행하려는 경우 http://localhost:12345/search?query=swift 는 잠재적으로 결과를 반환할 수 있습니다.
데이터베이스에 대한 타입헤드 검색을 위한 jQuery 프론트엔드 설계하기
백엔드가 준비되었으니 이제 프론트엔드에 집중할 수 있습니다. 프론트엔드는 다음 중 어느 것을 선택하든 백엔드 언어 사용하게 될 것입니다.
우리의 목표는 이와 같은 것을 만드는 것입니다:
우리는 다음을 사용할 것입니다. typeahead.js, jQuery및 핸들바.js 를 사용하여 이 부분을 성공적으로 수행할 수 있습니다. 하지만 이 작업을 성공적으로 수행하려면 버전 0.10.5 이후 버전의 버그로 인해 typeahead.js를 사용할 수 없습니다.
라이브러리를 다운로드한 후 다음과 같은 프로젝트 구조를 만듭니다:
|
1 2 3 4 5 |
js 핸들바-v4.0.11.js jquery-3.3.1.min.js 타입헤드.번들.분.js 색인.html |
파일 버전이 내 버전이 아닌 사용자 버전과 일치하는지 확인하세요.
에서 index.html 파일에서 다음과 같이 코드를 부트스트랩할 수 있습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <style> body { 배경색: #F0F0F0; } .tt-input, .tt-hint, .twitter-typeahead { 너비: 100%; } </style> </head> <body> <div id="remote"> <입력 클래스="typeahead" 유형="text" 플레이스홀더="노래..."> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/handbars-v4.0.11.js"></script> <script src="js/typeahead.0.10.5.bundle.min.js"></script> <script> // 여기 로직 </script> </body> </html> |
위의 코드에는 기본적으로 양식 입력과 모든 라이브러리 가져오기만 포함되어 있습니다. 타입헤드에 대한 로직이 어디에서 끝나는지 설명했습니다.
로직으로 이 문제를 마무리해 보겠습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$('#remote .typeahead').타입헤드( { 힌트: true, 최소 길이: 3, 하이라이트: false, limit: 5 }, { 이름: "song", displayKey: "id", 출처: 함수 (쿼리, 콜백) { $.getJSON("http://localhost:12345/search?query=" + 쿼리, 함수 (데이터) { 반환 콜백(데이터); }); }, 템플릿: { 제안: 핸들바.컴파일('<div>{{title}} - {{아티스트}}</div>') } } ); |
타입헤드의 첫 번째 부분은 구성입니다. 우리는 힌트를 표시하고 원격 통화를 절약하기 위해 검색에 최소 3자 이상이 없으면 로직을 실행하지 않겠다고 말합니다. 결과를 강조 표시하지는 않겠지만 5개로 제한하겠습니다. 타입헤드의 로직을 구동하기 위해 백엔드에 요청을 발행하고 응답을 처리합니다. 사용자 지정 핸들바 템플릿을 기반으로 렌더링됩니다.
그리고 displayKey 는 결과를 클릭한 후 표시할 내용입니다. 이 시나리오에서는 아티스트와 노래 제목을 표시하되 클릭 시 ID를 입력하려고 합니다. 이렇게 하면 원할 경우 향후 요청 시 아이디를 전송할 수 있습니다.
결론
방금 Go를 백엔드로 사용하여 jQuery에서 타입헤드 검색을 만드는 방법과 카우치베이스 를 NoSQL 데이터베이스로 사용합니다. 이 튜토리얼은 이전 튜토리얼 에서 Node.js와 JavaScript를 사용하여 FTS 백엔드를 작성했습니다.
Couchbase와 함께 Go SDK를 사용하는 방법에 대한 자세한 내용은 다음을 확인하세요. 카우치베이스 개발자 포털.
