사용자가 여러번 클릭할 수 있는 버튼에 대한 요청을 보내는 시점 문제

안녕하세요 오늘은 그간 팀프로젝트를 하면서 겪었던 2번째 문제를 기록해두기 위해 왔습니다.

바로 본론으로 들어가면 문제는 커뮤니티의 게시판에서 좋아요 기능에 대한 트러블 슈팅입니다.

 

문제 상황은 사용자가 한 번에 추천버튼을 여러 번 누르면

매번 서버에 요청을 보내기 때문에 서버에 불필요한 요청을 너무 많이 보내게 되고 과부하가 발생해

실제 화면과 db에 저장된 좋아요가 일치하지 않는 모습을 보인다는 것이었습니다.

 

따라서 처음에는 JavaScript의 이벤트를 beforunload 시점에 요청을 보내도록 하려고 했습니다.

let likeButton = $("#likeButton");
let myLikeCount = parseInt($("#myLikeCount").text()); // 내 추천수(0 or 1)
let initialMyLikeCount = myLikeCount; // 초기 추천수 저장


likeButton.on("beforeunload", function() {
	if (initialMyLikeCount != myLikeCount) {
        $.ajax({
            type: "POST",
            url: url,
            data: {
                boardNo: boardNo
            },
            success: function () {
                initialMyLikeCount = initialMyLikeCount == 1 ? 0 : 1;
            }
        });
    }
});

 

좋아요 버튼을 클릭한후 요청이 잘 처리 되었나 확인하기위해 페이지를 새로고침 했습니다.

하지만 결과는 원하는 흐름대로 나타나지 않았습니다.

그래서 디버깅모드로 앱을 실행해고 브레이크포인트를 찍어본 결과 흐름은 다음과 같았습니다.

 

해당 게시물에 대한 정보를 가져온다.

좋아요 버튼에대한 요청을 처리한다.

 

원하던 결과는

1. 좋아요 버튼에 대한 요청을 처리한후

2. 페이지를 새로고침한 것에 대한 요청(게시물을 가져온다)을 처리하는것

이었지만

실제 결과는 그 반대가 되었습니다.

그래서 매번 사용자의 요청을 처리하지는 않는 좋은 방법이 뭐가 있을지를 찾아보다 Debouncing 기법을 알게 되었습니다.

Debouncing은 버튼이나 다른 입력 장치에서 발생하는 물리적 잡음을 제거하여 정확한 신호를 얻기 위해 사용됩니다

 

 

라고 나와 있습니다. 즉 현 상황에서 물리적 잡음은 매번 서버에 요청을 보내는 불필요한 작업이 되겠습니다.

 

그래서 저는 사용자가 해당 버튼을 마지막으로 클릭후 2초가 지난 후에 요청을 보내도록 하였습니다.

 

이 방법을 사용하면 된다는 것을 알게 된 후 이 방법을 이전에 했던 iOS스터디에서 팀원이 사용했던 것이 기억이 났습니다.

그 팀원은 debouncing 기법을 검색어에 대한 연관 검색어 API를 호출하는데에 사용했습니다.

사용자가 검색창에 마지막으로 키보드를 입력한 후 짧은시간이 지나면 관련 검색어 API를 호출하여 키보드를 입력할때마다 API를 호출하는 과도한 요청을 막았던 기억이 납니다.

debouncing 기법을 잘 사용하면 과도한 서버 요청을 막고 유의미한 마지막 데이터만 서버로 요청을 보낼 수 있기 때문에

잘 활용한다면 사용자 경험과 서버 성능을 개선할 수 있다는 것을 배웠습니다.