이번 포스트에서는 JavaScript를 사용하여 웹 애플리케이션에서 비동기 데이터 요청을 이용하여 게시글 좋아요 기능을 구현하는 방법에 대해 알아보겠습니다.

1. AJAX를 활용한 데이터 요청

우선, AJAX(Asynchronous JavaScript and XML)를 사용하여 서버로부터 데이터를 비동기적으로 요청하는 방법을 살펴봅시다. 아래는 AJAX를 통해 데이터를 요청하는 간단한 JavaScript 코드의 예시입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts/123/like', true);
xhr.onload = function() {
  if(xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    // 처리 결과에 따른 로직 구현
  } else {
    // 에러 처리
  }
};
xhr.send();

위 코드에서 xhr.open은 서버로의 GET 요청을 열고, xhr.send로 요청을 전송합니다. 그리고 응답이 도착하면 xhr.onload 내에서 응답을 처리하는 로직을 구현할 수 있습니다.

2. 게시글 좋아요 기능 구현

게시글에서 좋아요를 누르면 이벤트를 트리거하여 AJAX를 통해 해당 게시글에 대한 좋아요 처리를 서버에 요청할 수 있습니다. 아래는 클릭 이벤트에 의한 게시글 좋아요 요청의 예시 코드입니다.

const likeButton = document.getElementById('likeButton');
likeButton.addEventListener('click', function() {
  const postId = likeButton.dataset.postId;
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/posts/' + postId + '/like', true);
  xhr.onload = function() {
    if(xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      // 처리 결과에 따른 로직 구현
    } else {
      // 에러 처리
    }
  };
  xhr.send();
});

위 코드에서는 클릭 이벤트가 발생하면 해당 게시글의 아이디를 가져와서 AJAX를 통해 해당 게시글에 대한 좋아요를 요청하는 예시를 보여주고 있습니다.

마치며

이렇게 AJAX를 활용하여 비동기 데이터 요청을 통해 게시글 좋아요 기능을 구현할 수 있습니다. 이를 통해 사용자는 페이지 새로고침 없이 좋아요 기능을 사용할 수 있습니다.

참고로 자세한 내용은 MDN 웹 문서의 AJAX 항목을 참고하시기 바랍니다.

이상으로, JavaScript를 이용한 게시글 좋아요 처리에 대해 알아보았습니다. 감사합니다.