Skip to main content

Search

· 10 min read
echjordan
echjordan
vanessayuenn
vanessayuenn
zeke
zeke

Electron 웹사이트는 이제 API 문서, 튜토리얼, Electron 관련 npm 패키지 등을 즉각적으로 검색할 수 있는 새로운 검색 엔진을 제공한다.

Electron Search Screenshot

Electron과 같은 새로운 기술이나 프레임워크를 배우는 것은 부담스러울 수 있다. [빠른 시작] 단계를 넘어서면, 최선의 방법을 배우거나 적절한 API를 찾거나 꿈꾸던 앱을 만들 수 있는 도구를 발견하는 것이 어려울 수 있다. 우리는 Electron 웹사이트가 더 빠르고 쉽게 앱을 만들 수 있는 리소스를 찾는 데 더 나은 도구가 되기를 원한다.

electronjs.org의 어떤 페이지를 방문해도 페이지 상단에 새로운 검색 입력창을 찾을 수 있다.

검색 엔진​

웹사이트에 검색 기능을 추가하려고 처음 계획했을 때, 우리는 GraphQL을 백엔드로 사용해 자체 검색 엔진을 구축했다. GraphQL은 작업하기 재미있었고, 검색 엔진도 꽤 성능이 좋았다. 하지만 우리는 검색 엔진을 만드는 일이 결코 간단하지 않다는 사실을 금방 깨달았다. 여러 단어 검색이나 오타 감지 같은 기능은 제대로 구현하려면 상당한 노력이 필요했다. 바퀴를 다시 발명하지 않고 기존 검색 솔루션을 사용하기로 결정했다. 우리가 선택한 것은 Algolia다.

Algolia는 호스팅 검색 서비스로, React, Vue, Bootstrap, Yarn 등 유명 오픈소스 프로젝트에서 널리 사용되고 있다. 여러 다른 프로젝트에서도 검색 엔진으로 채택하고 있다.

Electron 프로젝트에 Algolia가 적합했던 몇 가지 특징은 다음과 같다:

API 문서​

때로는 무엇을 해야 할지는 알지만, 정확히 어떻게 해야 할지 모를 때가 있다. Electron에는 750개가 넘는 API 메서드, 이벤트, 프로퍼티가 있다. 사람이 이 모든 것을 쉽게 기억하기는 어렵지만, 컴퓨터는 이런 일에 능숙하다. Electron의 JSON API 문서를 사용해 이 모든 데이터를 Algolia에 인덱싱했기 때문에, 이제 원하는 API를 쉽게 찾을 수 있다.

예를 들어, 윈도우 크기를 조정하려면 resize를 검색하면 바로 필요한 메서드로 이동할 수 있다.

튜토리얼​

Electron은 API 문서를 보완하기 위해 지속적으로 튜토리얼 컬렉션을 확장하고 있다. 이제 특정 주제에 대한 튜토리얼을 관련 API 문서와 함께 더 쉽게 찾을 수 있다.

보안 관련 모범 사례를 찾고 있는가? security를 검색해 보자.

npm 패키지​

현재 npm 레지스트리에는 70만 개가 넘는 패키지가 등록되어 있다. 필요한 패키지를 찾는 것이 항상 쉬운 일은 아니다. 이러한 모듈을 더 쉽게 발견할 수 있도록, 우리는 Electron과 함께 사용하기 위해 특별히 제작된 3400개 이상의 모듈을 모아 electron-npm-packages라는 컬렉션을 만들었다.

Libraries.io의 팀은 코드, 커뮤니티, 문서, 사용량 등 다양한 지표를 기반으로 소프트웨어 프로젝트에 점수를 매기는 시스템인 SourceRank를 개발했다. 우리는 npm 레지스트리에 있는 모든 모듈의 점수를 포함한 sourceranks 모듈을 만들었고, 이 점수를 사용해 패키지 검색 결과를 정렬한다.

Electron의 내장 IPC 모듈 대신 사용할 수 있는 대안을 찾고 있다면, is:package ipc로 검색해 보자.

Electron 앱​

Algolia로 데이터를 쉽게 인덱싱할 수 있기 때문에, electron/apps에 있는 기존 앱 목록을 추가했다.

music이나 homebrew로 검색해 보자.

검색 결과 필터링​

GitHub의 코드 검색을 사용해 본 적이 있다면, extension:js나 user:defunkt와 같은 콜론으로 구분된 키-값 필터를 알고 있을 것이다. 우리는 이 필터링 기법이 매우 강력하다고 생각하기 때문에, Electron의 검색 기능에 is: 키워드를 추가하여 특정 타입의 결과만 표시할 수 있게 했다:

키보드 네비게이션​

사람들은 키보드 단축키를 좋아한다! 새로운 검색 기능은 키보드에서 손을 떼지 않고도 사용할 수 있다:

  • /를 누르면 검색 입력창에 포커스가 이동한다.
  • esc를 누르면 검색 입력창에 포커스가 이동하고 내용이 지워진다.
  • down을 누르면 다음 검색 결과로 이동한다.
  • up를 누르면 이전 검색 결과로 이동하거나 검색 입력창으로 돌아간다.
  • enter를 누르면 검색 결과를 연다.

이 키보드 상호작용을 가능하게 하는 모듈을 오픈소스로 공개했다. 이 모듈은 Algolia InstantSearch와 함께 사용하도록 설계되었지만, 다양한 검색 구현과 호환될 수 있도록 일반화되었다.

여러분의 피드백을 기다립니다​

새로운 검색 도구를 사용하면서 문제를 발견했다면, 여러분의 의견을 들려주세요!

피드백을 제출하는 가장 좋은 방법은 GitHub의 해당 리포지토리에 이슈를 등록하는 것입니다:

감사의 말​

새로운 검색 기능을 구축해 준 Emily Jordan과 Vanessa Yuen에게 특별한 감사를 표한다. 또한 SourceRank 점수를 제공한 Libraries.io와 시작을 도와준 Algolia 팀에게도 감사한다. 🍹