60줄의 코드로 Cmd-K 커맨드 팔레트를 다시 만들었습니다

Linear, Raycast, VS Code와 같은 앱들은 커맨드 팔레트를 사용합니다. ⌘K를 누르고, 몇 글자를 입력한 뒤, Enter를 누릅니다. 복잡해 보이지만, 사실 단 60줄의 JavaScript로 구현할 수 있습니다.

구현 방법은 다음과 같습니다:

  1. 키보드 리스너 전역 리스너가 필요합니다. 브라우저는 검색을 위해 Ctrl+K를 사용하므로, 이를 방지하려면 preventDefault를 사용해야 합니다.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. 커맨드 데이터 모든 동작을 객체로 저장하세요. 그러면 UI가 단순하게 유지됩니다. UI는 이 객체들을 나열하고 사용자가 선택한 함수를 실행합니다. 새로운 기능을 추가하려면 리스트에 한 줄만 추가하면 됩니다.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. 퍼지 검색 (Fuzzy Search) 뛰어난 팔레트는 부분 수열 매칭(subsequence matching)을 사용합니다. 이는 문자들이 순서대로 나타나기만 하면 되며, 반드시 서로 붙어 있을 필요는 없음을 의미합니다. 예를 들어 "tgldk"라고 입력하면 "Toggle dark mode"를 찾아야 합니다.
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. 키보드 네비게이션 목표는 마우스를 사용하지 않는 것입니다. 화살표 키를 사용하여 선택 인덱스를 변경하고, Enter를 눌러 커맨드를 실행하며, Escape를 눌러 메뉴를 닫습니다.

  2. 즉각적인 반응성 팔레트가 열리는 즉시 입력 필드에 포커스를 맞추세요. 이렇게 하면 클릭 없이 바로 타이핑할 수 있습니다.

커맨드 팔레트에는 네 가지 요소가 필요합니다:

현대적인 파워 유저용 도구들이 어떻게 작동하는지 이해하려면 이 기능을 한 번 직접 구현해 보세요.

직접 체험해 보기: https://dev48v.infy.uk/design/day10-command-palette.html

출처: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l