흑백요리사 프로젝트 개발을 진행하며 있었던 일. 그중에서도 어떻게 하면 효과적으로 API를 호출할 수 있을지에 대한 고민했던 내용입니다.

문제 상황 소개

사용자가 응원 메세지를 작성하면 하단 바에 응원 메세지가 지나간다.

A가 응원 메세지를 작성하면, 이미 접속하고 있는 B가 아무런 행동도 취하지 않았을 때 A의 응원 메세지를 어떻게 나타낼 수 있을지 생각했다.

소켓을 사용하면 가능할 것 같다고 생각했지만, 빠른 개발 및 배포를 위해 사용하지 않았다.

이것을 구현하기 위해 하단의 무한 자동 캐러셀을 어떻게 하면 효율적으로 api를 호출할 수 있을지 고민이 시작됐다.

하단 바의 Infinite Autoplay Carousel 을 캐러셀이라고 부르겠다.

첫 번째 방법

B가 아무런 행동을 취하지 않았을 때 A가 작성한 메세지를 보여주는 방법만 생각했다.

내가 생각한 방법은 일정 시간을 정해두고 일정 시간마다 전체 응원 메세지 api를 호출하는 방법이다.

발생한 문제점

1. 일정 시간 안에 모든 데이터가 지나가지 못하는 경우
만약 2분마다 api를 호출한다고 했을 때, 데이터가 많아지면 2분 안에 모든 데이터를 다 보여주지 못할 수도 있다.

2. 사용자가 응원 메세지를 작성했을 때, 바로 확인할 수 없다.
사용자가 응원 메세지를 작성하면 사용자가 작성한 응원 메세지가 지나가는 것을 기다리고 지켜볼 것이다.
하지만 데이터를 업데이트 해주지 않았기 때문에 즉각적으로 확인할 수 없고 호출 주기가 오는 것을 기다려야 한다.

두 번째 방법

응원 메세지 데이터가 캐러셀에서 전부 지나갔을 때 api를 호출해보자

응원 메세지의 데이터가 처음과 끝이 있는데 끝 데이터가 다 지나갔을 때 api를 호출하면 데이터가 즉각적으로 반영될 수 있겠다 라는 생각을 하게된다.

위의 말만 보고 눈치 채신 분들이 있으시겠지만, api 호출이 너무 많아진다는 문제가 발생한다.

세 번째 방법

렌더링 및 응원 메세지 작성시 api 호출

페이지에 접속했을 때 최신 데이터를 보여주기 위해 렌더링시에 api를 호출하도록 구현했다.
그리고 응원 메세지를 작성한 사용자에게만 데이터를 업데이트 시켜주면 된다고 생각했다.

이 방법은 다음과 같이 동작한다.

{
  "code": 200,
  "message": "전체 댓글 조회 성공",
  "data": [
    {
      "id": 1,
      "nickname": "강록",
      "comment": "\"나야 들기름\"",
      "created_at": "2024-10-11T03:36:16.513564Z"
    },
    {
      "id": 2,
      "nickname": "강록",
      "comment": "ㅁㅁㅁㅁㅁㅁ",
      "created_at": "2024-10-13T19:19:47.616597Z"
    },
    {
      "id": 3,
      "nickname": "강록",
      "comment": "제가 야채의 익힘을 굉장히 중요하게 보거덩요",
      "created_at": "2024-10-13T19:20:14.129403Z"
    }
  ]  
}

현재 데이터가 1개 id:1 인 값만 캐러셀에 지나가고 있다고 가정해보자.

1. 동시에 접속한 사용자 A, B는 1개 데이터의 캐러셀만 보인다.

2. A가 응원 메세지를 작성하면 id:2가 된다. A의 캐러셀에는 2개의 데이터, B의 케러셀에는 1개의 데이터가 지나간다.

3. 이때, B가 응원 메세지를 작성하면 id:3이 된다. A의 케러셀에는 2개의 데이터, B의 케러셀에는 3개의 데이터가 지나간다.

응원 메세지를 작성하지 않아도 새로고침을 하면 최신 데이터까지 볼 수 있다.

이 방법이 필요한 사용자에게만 api를 호출하고 지금까지 나온 방법들 중 효과적인 방법이라고 생각했다.

마치며

이러한 세 가지의 시행착오와 고민을 겪으며 마지막 세 번째 방법으로 적용했다.

어떻게 하면 사용자에게 최신 데이터를 잘 보여줄 수 있을지, 서버에 많은 부하가 가지 않고 효과적으로 api를 호출할 수 있을지에 대해 고민할 수 있었다.