[JavaScript] setTimeout(callback, 0)을 사용하는 이유

setTimeout에 시간을 0을 줘서 사용하는 경우가 있다. 이렇게 하면 아래와 같은 경우에 setTimeout을 적용한 3이 가장 마지막에 찍히는 것을 확인할 수 있다. console.log(1); console.log(2); setTimeout(()=> console.log(3), 0); console.log(4); console.log(5); // 1, 2, 4, 5, 3 setTimeout(callback, 0)을 사용하는 이유에 대해 공부하다가 좋은 블로그 글을 보아서 배운 내용을 가볍게 정리하고 블로그 주소를 남겨놓고자 한다. setTimeout에 시간을 0초로 주는데도 뒤늦게 실행되는 이유는 정리하자면 이런 식이다. 어떤 함수를 실행시킬때 발생하는 실행 컨텍스트는 자바스크립트 엔진의 콜스택..

• format_list_bulleted SW공부/JavaScript
• · 2024. 1. 15.
• textsms

[JavaScript] 쓰로틀링, 디바운싱

쓰로틀링과 디바운싱 모두 함수 실행 요청이 연달아 들어오는 경우 과한 실행을 막기 위해 처리하는 로직이다. 쓰로틀링 throttling 일정한 시간마다, 또는 앞선 실행이 끝난 경우에만 함수가 실행되도록 하는 것. ex) 스크롤 스크롤을 내릴 때 어떤 함수가 실행되는 코드를 짜는 경우 함수가 수십번 실행될 수 있음 -> 일정한 시간마다 함수를 실행케 하면 요청을 줄일 수 있음 디바운싱 debouncing 함수 실행 요청 이후 일정 시간이 지나야 함수를 실행, 하지만 요청이 들어올 때 마다 계속 시간을 리셋해 결국 마지막 한 번만 함수가 실행되도록 함. ex) 검색 키워드 입력 후 엔터 없이도 검색결과를 보여주거나 할 때 키보드를 여러번 누르면 누를 때 마다 서버로 ajax요청 실행. -> n밀리초 후 서..

• format_list_bulleted SW공부/JavaScript
• · 2024. 1. 15.
• textsms

피보나치 문제 풀 때 왜 1234567로 나눈 나머지를 사용해야 하는가

프로그레머스 Lv.2 피보나치 수 문제다. 피보나치 n번째 자리 수를 1234567로 나눈 나머지 값을 구하라는 문제였다 (n은 2 이상). 왜 나누어야 하는걸까? 힌트를 보니 n이 커질수록 리턴해야 하는 값도 커지고 47번째 피보나치 수는 2,971,215,073이라고 한다. 이 수가 32비트 정수(ex.int)의 범위를 넘고, 100,000번째 피보나치 수는 자릿수가 20,000을 넘겨 64비트 정수(ex.long)의 범위를 넘어 오버플로우가 난다고 되어있다. 그렇기 때문에 1234567로 나누어야 하고 사용법은 아래와 같다. F(n) % m = (F(n-1) + F(n-2)) % m = (F(n-1) % m + F(n-2) % m) % m 무슨 말인지 대충은 알겠는데 정확하게 모르겠는 사람도 있을거..

• format_list_bulleted SW공부/JavaScript
• · 2023. 11. 8.
• textsms

에러와 싸우느라 36시간을 고생한 이야기

next.js와 mongodb로 개인 프로젝트를 진행하던 중 임시로 배포를 해봤다. 이전 react 프로젝트를 netlify로 배포했었고, netlify에서 next.js 배포도 지원하기 때문에 금방 할 줄 알고 netlify로 먼저 배포했었다. 사담인데 vercel이 훨씬 배포가 쉬웠다...next.js 개발한 곳에서 vercel도 개발했으니 어찌보면 당연하긴 한데 이 쪽도 push시 자동 배포가 안 되어서 원인을 찾느라 고생 꽤나 했다 (따로 레포지토리를 연결하고 브렌치 지정해주니 정상 작동). 직면한 문제 문제는 netlify 배포에 성공하고 나니 페이지는 불러오지만 db에서 데이터를 가져오지 못하는 것이었다. console을 확인해도 network를 확인해도 에러에 대한 명확한 원인이 없어 이걸 ..

• format_list_bulleted ToyProject/InventoryManagement
• · 2023. 10. 22.
• textsms

풀지 못 한 문제(실시간 시계)

현재 시간을 실시간으로 사용해야 하는데 문제가 생겼다. setInterval을 사용해서 1초마다 시간을 뽑아낸 후 recoil에 보냈는데... 보낸 시간을 불러와 뽑아보면 오늘 날짜보다 하루 늦은 날짜로 나온다. recoil에 보낸 후 다시 불러오는 동안 아무런 가공도 거치지 않았다. 그저 recoil에 set 한 후 다시 import 해서 찍었을 뿐인데... 하루는 어디에 잡아먹힌 것인가. // component.js useEffect(() => { const id = setInterval(() => { const now = new Date(); const todayInKorea = new Intl.DateTimeFormat("en-US", { timeZone: "Asia/Seoul", year: "n..

• format_list_bulleted ToyProject/InventoryManagement
• · 2023. 10. 20.
• textsms

[Ez to Play / Error Note] 이미지 태그로 감쌌을 때 생기는 공백 문제

Ez to Play 프로젝트 당시 세로로 움직이는 캐러셀도 만들었었다. 직면한 문제 캐러셀이 이쁘게 보이려면 배너가 다닥다닥 붙어있어야 하는데, 배너를 누르면 해당 페이지로 이동하도록 링크를 주기 위해서 태그로 감쌌더니 아래와 같이 간격이 생겨버린다. 원인 훌륭한 블로그 글을 발견하여 금방 해결했는데, 이 블로그에 따르면 img 태그의 display는 기본적으로 inline이고, inline은 문자의 정렬을 맞추기 위해 가상의 기준선이 존재하며, g 또는 y와 같이 기준선 아래로 내려가는 문자를 위해 아래 공간이 어느정도 비어있게 된다고 한다. 하지만 이미지는 대문자처럼 취급되어 베이스라인(기준선)에 붙어 있으니 내 상황처럼 이미지 여러개를 세로로 붙이려 하면 간격이 생기게 되는 것이다. 해결 여러 해결..

• format_list_bulleted Ez to Play - Project/Error Note
• · 2023. 9. 22.
• textsms