소소한 코딩일지

스크롤 이벤트를 다루면서 디바운싱과 쓰로틀링에 대한 개념을 새롭게 알게 되어 정리해두려고 한다. 디바운싱 method가 호출된 이후 일정시간이 지나기 전에 호출되지 않도록 하는 것 디바운싱은 키보드 타이핑을 입력하는 input이벤트의 경우 키 입력이 들어올 때마다 method를 호출하기 때문에 불필요한 method 호출을 줄이기 위해 주로 사용한다고 합니다. 이벤트가 발생할 때마다 일정 시간을 설정하고 그 시간 내에 다시 method 호출이 발생하면 기존의 시간을 리셋합니다. 만약 일정 시간이 지나도 method 호출이 없다면 그때 호출된 method에 대해서 연산을 수행하는 방식입니다. 디바운싱 적용 전 ... ... ... 키보드를 입력할 때마다 console.log가 작동하는 것을 확인할 수 있다...

오늘 TypeScript를 공부하면서 querySelector와 getElementBy~을 언제, 어떤 상황에 사용하는 것이 적절한 것인지 이제야 의문이 들어 찾아보게 되었고, 알아본 것을 정리해두려고 한다. 먼저 querySelector, getElementbyId, getElementbyClassName을 각각 사용해 보았다. 그리고 결과는 다음과 같다 getElementById의 경우 id에 해당하는 컴포넌트가 1가지라 그에 해당하는 컴포넌트가 나온 것을 볼 수 있다. getElementByClassName 과 querySelectorAll의 경우 각각 HTMLCollection과 NodeList이라는 데이터 타입으로 return 되었다. 마지막으로 querySelector의 경우 querySele..

영화 사전 웹을 만들면서 메인 페이지의 검색 바에서 검색어를 Submit 했을 때, Search 페이지에서 값을 받아 결과를 반영해주고자 했다. 값은 잘 넘어오지만 Reload 되지 않은 화면만 나왔다. 위 코드로 메인 페이지에서 값은 잘 받아지지만 reload 되지 않는 이슈가 있다. 해결 방식을 구글링해보니 다음과 같다. 1. react-router-dom 과 history라이브러리의 버전을 맞추어주는 것 2. 내가 해결한 방법 1번 방식을 시도했지만 프로젝트를 시작하면서 history를 따로 설치해주었던 기억이 없었고, 좀 더 간단한 방법이 있을 것 같아 다른 방법을 찾아보았다. 내가 해결한 방법은 다음과 같다. 시행착오 끝에 생각보다 단순하게 이슈가 해결되었다. 메인 화면에서 값을 받아 searc..

Full Code const getHtml = async (url) => { try { return await axios.get(url); } catch (error) { console.error(error); } }; getHtml(url) .then(html => { db.collection('top10').drop(); var urlobj = [] var $ = cheerio.load(html.data); var $movieList = $('div.lst_wrap ul.lst_detail_t1').children('li'); $movieList.each(function (i) { if (i > 9) { return urlobj} var detail_url = 'https://movie.naver.c..