웹 앱을 개발하다 보면, 사용자가 빠르고 효율적으로 기능을 실행할 수 있는 키보드 단축키가 필요한 경우가 있습니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 앱에서 키보드 단축키를 구현하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 앱에서 HTTP 요청을 보내고 응답을 받는 기능을 제공하는 자바스크립트 API입니다. 이전에는 주로 XMLHttpRequest 객체를 사용하여 HTTP 요청을 처리했지만, fetch API는 좀 더 간편하고 유연하게 HTTP 요청을 다룰 수 있습니다.

키보드 이벤트 리스너 등록하기

키보드 이벤트를 감지하려면, 웹 앱의 document 객체에 이벤트 리스너를 등록해야 합니다. 예를 들어, 사용자가 Ctrl + S 키보드 단축키를 누르면 특정 기능을 실행하고자 한다면 다음과 같이 코드를 작성할 수 있습니다.

document.addEventListener('keydown', function(event) {
  if (event.key == 's' && (event.ctrlKey || event.metaKey)) {
    event.preventDefault(); // 기본 동작 (저장 창 열기) 방지

    // 여기에 특정 기능 실행 로직 작성
  }
});

위 코드에서 keydown 이벤트가 발생했을 때, event.key를 확인하여 s 키가 눌렸고 동시에 Ctrl 키 또는 Command(Meta) 키가 눌렸는지 확인합니다. 그리고 event.preventDefault()를 호출하여 기본 동작인 저장 창 열기를 방지합니다. 이후에는 특정 기능을 실행하는 로직을 작성하면 됩니다.

fetch API를 사용하여 HTTP 요청 보내기

키보드 단축키로 특정 기능을 실행하기 위해 HTTP 요청을 보내야 할 경우, fetch API를 사용하여 요청을 보낼 수 있습니다. 예를 들어, 사용자가 Ctrl + D 키보드 단축키를 눌렀을 때 현재 페이지의 제목을 가져오고자 한다면 다음과 같이 코드를 작성할 수 있습니다.

document.addEventListener('keydown', function(event) {
  if (event.key == 'd' && (event.ctrlKey || event.metaKey)) {
    event.preventDefault(); // 기본 동작 방지

    fetch('/api/page-title')
      .then(response => response.text())
      .then(title => {
        console.log(title); // 서버에서 받아온 페이지 제목 출력
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }
});

위 코드에서는 /api/page-title URL로 HTTP GET 요청을 보냅니다. 응답으로 받은 데이터는 response.text()를 사용하여 텍스트로 변환한 후, then() 메소드를 사용하여 처리합니다. 이후에는 받아온 페이지 제목을 출력하는 로직을 작성하면 됩니다. 만약 요청이 실패한 경우에는 .catch() 메소드에서 에러를 처리합니다.

결론

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 앱에서 키보드 단축키를 구현하는 방법에 대해 알아보았습니다. fetch API를 활용하면 HTTP 요청을 보내고 응답을 받는 작업을 쉽게 처리할 수 있습니다. 위 예시 코드를 참고하여 키보드 단축키를 구현해보세요.