소소한 코딩일지

반복문은 아주 많이 사용되는 문법이다. JS에는 많은 반복문이 존재한다. 일부 잘 사용하지 않던 반복문에 대해 잘 기억나지 않아, 이번에 살짝 정리해보려고 한다. 반복문의 종류 for 문 while문 do…while문 lable 문 for …in 문 for …of 문 forEach문 for 문 for문은 특정 조건이 거짓이 되기 전까지 반복한다. for(let i = 0; i < 5; i++) { console.log(i); } 이후 나올 while과의 차이점은 정해진 횟수만 반복한다는 점이다. for 문 내부에는 초기 값선언, 반복 조건 구문, 업데이트 구문 세 가지 구문을 작성해야 한다. while문 특정 조건이 참일 경우 계속 반복한다. let n = 0; let x = 0; while ( n < ..

무한 스크롤은 사용자가 직접 페이지 전환을 하지 않고 스크롤을 내려 하단의 콘텐츠가 계속해서 추가되는 것을 말합니다. 무한 스크롤에 있어서 사용자의 현재 위치를 감지해야하는데 이것을 체크하기 위해서 2가지의 방법이 존재합니다. 1. Scroll의 위치를 체크하면서 특정 위치가 되었을 때 기능을 동작 2. Intersection Observer API를 활용하여 특정 콘텐츠의 등장 여부를 판단하여 기능을 동작 첫 번째의 방법의 경우, scroll의 위치를 계속해서 감지해주어야 하기 때문에 메서드 호출이 불필요하게 많이 발생하는 단점이 있습니다. 쓰로틀링과 디바운싱을 통해 횟수를 줄여줄 수는 있습니다. 두 번째의 intersection Observer의 경우 컴포넌트와 viewport 교차하는 영역에 따라 ..

스크롤 이벤트를 다루면서 디바운싱과 쓰로틀링에 대한 개념을 새롭게 알게 되어 정리해두려고 한다. 디바운싱 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..