js는 비동기 큐가 2개다?

vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.

커스텀 게임 방 리스트 페이지

위 페이지에선 2가지 비동기 동작이 정의되어 있다.

1. 먼저 5초마다 setInterval로 현재 페이지네이션 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직

2. 아래 화살표를 누르면 페이지네이션을 + - 하고 그 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직

 

그런데 아래 화살표를 광클하니 현재 페이지네이션이 아닌 페이지가 깜빡거리면서 렌더링 되는 이슈가 생겼다.

로직상 문제가 없었고, 콘솔로 페이지네이션을 찍어봐도 이상이 없어서 이틀 내내 고민하고 찾아본 결과 비동기 큐가 2개라는 걸 찾았다.

 

setInterval, setTimeout같은 macrotask이 들어가는 macrotask queue

fetch 같은 다른 비동기 로직이 들어가는 microtask queue

 

macrotaskqueue는 microtaskqueue가 다 비워지기 전까진 콜스택에 들어가지 않는다.

 

미친 그림

 

내 상황은 microtask queue에 task들이 쌓여서 setinterval로직이 순서 보장이 되지 않는 것이었다.

위 그림에서 처음에 페이지를 1이라고 가정할 때

task 1 2 3 4가 페이지를 1씩 올려 5로 만들었지만, 페이지가 3 일 때 macrotaskqueue에 setinterval로직이 들어가서

화면이 페이지 3으로 갔다가 다시 원래 페이지로 돌아오는 것이었다..!

 

뭔가 비동기 로직이 꼬인다면 위 상황도 의심해 보자.

 

리액트 스터디를 하다가 안 사실 : 페이지네이션 눌려서 리스폰스 오기 전까지 해당 버튼 disable하게 해 두면 된다. 두둥

이런건 보통 프론트 백엔드 둘다 처리해 둔다고 하셨다.

 

다른 프로젝트 하다가 비슷한 이슈가 있을 경우 의견 제시 할 때 제출할 만한 좋은 레퍼런스를 얻었으니 됐다.

이만 총총