[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

[React] axios 요청시 .catch에서 에러 응답 열기

서버에서 보내준 에러메시지를 클라이언트에서 띄워야 하는 상황이 생겼다. 항상 에러메시지는 직접 작성하기만 해서 에러 응답을 어떻게 받는지 몰랐다. 개발자도구에서 까보니 응답은 이렇게 온다. {"status":0,"message":null,"fieldErrors":[{"field":"artistName","rejectedValue":"","reason":"공백일 수 없습니다"}],"violationErrors":null} 서버에서 유효성검사와 중복검사에 대한 실패 응답을 에러와 함께 상황에 따라 바꾸어서 보내기 때문에 어떤 메시지가 올지 모르는 클라이언트쪽에서는 에러메시지를 직접 작성하지 못하고 에러 응답에서 꺼내서 화면에 띄워줘야 한다. 뭐라고 검색해야 할지 몰라 조금 당황했지만 찾고보니 간단했다. //..

• format_list_bulleted SW공부/React
• · 2023. 7. 17.
• textsms

[CSS] 넘치는 텍스트 컨텐츠 숨기고 '...' 찍기

아래는 팀 프로젝트를 하면서 가수 리스트를 보여주는 컨텐츠에 더미 데이터를 넣은 것이다. (사진과 가수명은 일절 관계가 없습니다...) 가수 이름을 길게 넣었더니 아래 사진과 같이 가수 이름의 길이만큼 여러 줄로 늘어나 미관이 좋지 않았다. 다른 블로그를 참고해 간단하게 수정했다. 아래 코드를 전부 넣어주면 된다. white-space: nowrap; //줄바꿈 방지 overflow: hidden; //넘치는 텍스트 숨기기 text-overflow: ellipsis; //말줄임 기호(...)넣기 그럼 대부분의 경우 잘 작동할 것이다. + 그런데 나의 경우 위 코드를 태그 안에 넣었더니 아래와 같이 오히려 옆으로 침범하는 현상이 발생했다. 왜일까. 코드를 까보자. 우리 팀은 스타일드 컴포넌트를 사용하는데,..

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 7. 12.
• textsms

[CSS] filter: blur() 와 backdrop-filter:blur()

css를 만지다가 배경을 블러처리 해야 하는 일이 생겨서 filter 와 backdrop-filter를 써보게 되었다. 내가 만들 것과 팀원분이 만든 것의 디자인이 비슷하기 때문에 코드를 복사한 후 div박스에 backgroundImage를 주고 전체를 감쌌다. backgroundImage를 인라인 스타일로 준 이유는 나중에 props를 뚫기 쉽게 하기 위해서다. (추후 이미지가 계속 변경되어야 함) 처음엔 백그라운드 이미지에 바로 filter: blur() 처리를 했고 결과는 이랬다. 안에 있는 모든 요소가 블러처리 된다. 찾아보니 많이 사용되는 요소 중에 backdrop-filter라는게 있었다. 블러처리할 요소 바로 안쪽 태그에 backdrop-fliter를 주면 배경만 블러 처리 할 수 있다. 백..

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 7. 12.
• textsms