그럴듯한 개발 블로그
article thumbnail
js는 비동기 큐가 2개다?
<language>/javascript 2024. 3. 26. 14:52

vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.커스텀 게임 방 리스트 페이지위 페이지에선 2가지 비동기 동작이 정의되어 있다.1. 먼저 5초마다 setInterval로 현재 페이지네이션 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직2. 아래 화살표를 누르면 페이지네이션을 + - 하고 그 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직 그런데 아래 화살표를 광클하니 현재 페이지네이션이 아닌 페이지가 깜빡거리면서 렌더링 되는 이슈가 생겼다.로직상 문제가 없었고, 콘솔로 페이지네이션을 찍어봐도 이상이 없어서 이틀 내내 고민하고 찾아본 결과 비동기 큐가 2개라는 걸 찾았다. setInterval, setTimeout같은 macrotask이 들어가는 macrotask q..

클로저
<language>/javascript 2024. 1. 30. 23:35

c, c++ 만 해 본 나로선 클로저라는 머싯는 이름을 붙이는 게 이해가 안 갔다. 이거 그냥 함수 포인터 리턴하는 거 아니냐??라고 생각했다. 허나 아래 같은 상황에서는 애매하다. function createCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 counter변수에 담긴 createCounter 내부에 선언되어 리턴된 function의 경우 counter 변수가 참조하고 있으므로 인스턴스가 살아있는 게 맞지만, 함수 createCounter의 ..