외부 클릭 시 연관 검색어 창 닫기 addEventListener 사용

외부 선택 시 연관 검색어 창 닫기 addEventListener 사용

비슷한 경험으로 과거 모달을 띄우고 모달 외부를 터치하시면 모달이 닫히도록 구현한 적이 있는데, 그때는 어두운 불투명 오버레이 컴포넌트를 깔고 오버레이 컴포넌트에 onClick 이벤트 핸들러를 할당하여 선택 이벤트가 발생하면 모달을 닫는 동작으로 손쉽게 구현할 수 있었어요. 이번에도 동일한 방식으로 투명 오버레이를 깔아 구현해볼까 생각했으나 연관 검색어 창이 활성화 된 상태에서도 지도 확대 축소나 스크롤 등의 이벤트는 정상 동작 해야했기 때문에 불가능하다고 판단하였습니다.

질의 서비스

figure 131은 빈도 책상 예시입니다. 이 테이블은 아래 두 개의 필드가 있습니다.

query 질의문을 저장하는 필드다. frequency 질의문이 사용된 빈도를 저장하는 필드다. 이 상태에서 사용자가 tw를 검색창에 입력하면 아래의 top 5 자동완성 검색어가 표시되어야 합니다. figure 133 가장 많이 사용된 5개 검색어는 아래의 SQL 질의문을 이용해서 계산할 수 있어요. 데이터 양이 적을 때는 나쁘지 않은 설계안입니다.

하지만 데이터가 아주 많아지면 데이터베이스가 병목이 될 수 있어요. 상세 설계안을 준비하면서 이 문제점을 해결할 방법을 알아보겠습니다.

None 검색어를 사용하여 경쟁사를 조사하기

Q None 검색어를 사용하여 경쟁사 내용을 얻는 방법은 무엇입니까? A None 검색어는 검색 결과에 아무것도 반환하지 않지만, 특정 컨텍스트에서 소중한 통찰력을 제공할 수 있습니다. 다음과 같은 단계를 따르세요. 경쟁사 도메인에 None 추가 예를 들어, example.com None을 검색하면 경쟁사 웹사이트에서 인덱싱되지 않은 페이지를 확인할 수 있습니다. 이러한 페이지에는 유용한 정보예 미발매 물건 아니면 전개과정 중인 작업 정보가 포함되어 있을 수 있습니다.

소셜 미디어에서 None 사용 경쟁사의 방송 계정에서 None을 검색하면 삭제되었거나 블록된 게시물을 찾을 수 있습니다. 이러한 게시물은 경쟁사가 프로모션했거나 참여했던 이전 캠페인이나 제품에 대한 단서를 제공할 수 있습니다.

검색어를 저장할 방법

그다음 생각한 것은 다음과 같은 방식입니다. 이런 방법을 사용하여 정확도는 떨어지나, 용량과 성능면에서 이득을 볼 수 있었습니다. 이제 구현의 시간이었습니다. 흔히 Firebase의 서비스들은 백엔드 서버를 가지지 않고도 빠르게 앱을 론칭할 수 있게 도와주는 것들로 유명합니다. 즉 마치 백엔드 서버를 이용하듯 Firestore 서비스를 사용할 수 있었습니다. 아래는 Next.js 프레임워크를 이용한 js앱으로 개발한 기록입니다.

질의 서비스

질의 서비스는 데이터베이스를 활용하여 최고 인기 검색어 다섯 개를 골라낸다. 검색 질의가 로드벨런서로 전송됩니다. 로드밸런서는 해당 질의를 API 서버로 보낸다. API 서버는 트라이 캐시에서 데이터를 가져와 해당 요청에 대한 자동완성 검색어 제안 응답을 구성합니다. 데이터가 트라이 캐시에 없는 경우 데이터를 데이터베이스에서 가져와 캐시에 채운다. 질의 서비스 성능 향상을 위해 아래와 같은 최적화 방안들이 있습니다.

트라이 데이터베이스

트라이 데이터베이스는 지속성 저장소다. 트라이 데이터베이스로 사용할 수 있는 선택지로는 다음의 두 가지가 있습니다.

문서 저장소 새 트라이를 매주 만들 것이므로, 주기적으로 트라이를 직렬화하여 데이터베이스에 저장할 수 있어요. 몽고디비 같은 문서 저장소를 활용하면 이런 데이터를 손쉽게 저장할 수 있어요. 키값 저장소 트라이는 아래 로직을 적용하면 해시 책상 형태로 전환 가능합니다.

firebaseadmin 설정

firebaseadmin 사용을 위해서는 적절한 json파일을 받아 인증하고 사용할 수 있습니다. 형식은 아래와 같습니다. type serviceaccount, projectid , privatekeyid , privatekey , clientemail , clientid , authuri , tokenuri , authproviderx509certurl , clientx509certurl , universedomain

이후 firebaseAdmin.js 파일을 설정해 줍니다.

대략적으로 만들어낼 수 있었지만 아직 매일 어느 정도 초기화하는 기능을 추가해놓지 않아서 추가적으로 작업이 필요합니다.

자주 묻는 질문