내배캠 TIL 2023.01.31

throttiling, debouncing

throttiling, debouncing: 유저가 짧은 시간 안에 많은 이벤트를 발생시켰을 경우 매번 서버에 전달하면 서버에 무리가 되기때문에, 한번에 모아서 서버에 보내주는 것

 

throttling: 지정해준 delay 시간 안에 일어난 요청은 한번만 해주기  

 

• leading: 요청 보내고, delay
• trailing: delay하고 요청
• leading& trailling: 요청 보내고 delay하고 또 요청 delay 시간 기준 앞뒤로 한번 씩 요청 보내준다.

 

debouncing: 마지막 이벤트 발생 기준으로 일정시간이 지나면 요청을 보낸다.  == 일정 시간이 지나지 않았는데 계속 이벤트를 발생시키면 서버에 보내지지 않는다. 

 

리액트 lifecycle

마운트=> 업데이트 => 언마운트

 

• 업데이트는 state가 변경되었을 때 일어난다
• state변경은 비동기적으로 일어난다 == state 변화끼리 다 모아서 한꺼번에 요청된다 (batch)
• 순서를 찍어보면 console.log 같은 동기적인 것들이 먼저 일어나고, 그 다음에 비동기적인 것이 일어난다.
• useEffect는 Jsx가 return 되고나서 바로 다음에 일어난다. (이걸 정말 몰랐음)
• useQuery도 Jsx가 return 되고나서 그 다음에 일어난다.

 

그렇기 때문에 처음 데이터가 undefined로 떴던거고 그래서 map 할 수 없다는 에러가 떴던것이다.

jsx return 후에는 data가 존재하고 그 이후로는 우리가 원하대로 정상동작한다

그렇기에 isLoading으로 상태를 분리해주면 에러를 없앨 수 있어야 정상인데,  내 기억으로는 캐치필 프로젝트에서 이렇게 해도 에러가 떴던 것 같다. 왜 그랬었을까.

 

next.js 시작

 

npx create-next-app 을 넣었는데, 튜터님 화면에 나오지 않던 옵션을 고르라는 내용이 많이 떴다. 당황쓰