우당탕탕 🧨 럭키 드로우 이벤트 페이지 만들기

럭키 드로우 이벤트 페이지 만들면서 도전적인 과정들을 기록하는 공간

1. 소켓 통신을 통한 랭킹 리스트 렌더링

const silentRefreshRankList = useCallback(async () => {
    try {
      const totalPages = Math.ceil(leaders.length / 10) || 1;
      const allItems: LeaderItem[] = [];

      for (let p = 1; p <= totalPages; p++) {
        const res = await luckyDrawHelper.getLeaderboardList(p, 10);
        if (res?.data?.list) {
          const mapped = res.data.list.map((d: any, idx: number) => ({
            rank: (p - 1) * 10 + idx + 1,
            username: d.name ?? d.email ?? '',
            points: Number(d.total_point) || 0,
            user_info_id: d.user_info_id ?? d.id,
          }));
          allItems.push(...mapped);
        }
      }
      setLeaders(allItems);
    } catch (e) {
      console.error('Silent refresh failed', e);
    }
  }, [leaders.length]);

 

* 단점 : 만약 사용자가 10페이지(100명) 까지 불러온 상태에서 이 함수가 실행되면 순식간에 API를 10번 연속으로 호출(await 때문에 직렬로 10번) 하게 되어 서버에 부담을 주거나 리프레시 시간이 오래 걸릴 수 있음

 

* 고려사항 : 랭킹은 한 번만 참여해도 순위에 포함되기 때문에 과부하 되기 쉬움

 

동적 Limit (단일 호출) 방법

1. 네트워크 과부하 및 브라우저 병목 방지

Promise.all : 크롬 등 대부분의 브라우저는 동일한 도메인에 대해 동시에 보낼 수 있는 HTTP 요청을 약 6개로 제한. 만약 유저가 10페이지(100명)까지 스크롤한 상태에서 Promise.all을 실행하면, 6개는 동시에 가지만 나머지 4개는 앞선 요청이 끝날 때까지 대기(Stalled)해야 함. 반면, 동적 limit 방식은 단 1번의 요청만 하므로 브라우저 병목 발생 방지

 

2. 소켓(WebSocket) 통신과의 완벽한 호환성

3. 리프레시 시간 최소화 (Latency)

TCP/IP 통신에서는 여러 번 작게 요청하는 것보다, (데이터가 엄청나게 크지 않은 이상) 한 번에 모아서 가져오는 것이 네트워크 지연(Latency) 측면에서 훨씬 유리함.