IntersectionObserver는 자바스크립트 API로, DOM 요소가 뷰포트나 특정 부모 요소와 교차(intersect)하는 시점을 비동기적으로 관찰할 수 있게 해준다. 따라서 주로 lazy loading, 무한 스크롤, 요소 노출 감지 등에 활용된다. 주요 특징 성능 최적화 : 스크롤 이벤트를 직접 사용하는 방식보다 효율적이며, 브라우저 성능에 미치는 영향을 최소화한다.비동기적 처리 : 교차 상태를 감지하는 콜백이 비동기로 실행된다.다양한 관찰 옵션 : threshold, root, rootMargin 등 다양한 조건을 설정할 수 있다. 구성 1. IntersectionObserver 생성const observer = new IntersectionObserver(callback, options)..

웹팩을 자유자재로 활용하기 위해 노력하고 있다만, 역시 오늘도 사투를 벌였다. 👊 내가 하려던 것 : extract-text-webpack-plugin을 사용하여 수많은 scss를 단 하나의 styles.css로 압축시키기 그런데 이 포스팅의 제목과 같은 에러가 떴다. 내가 오타를 낸건지, 다른 라이브러리 버전을 잘못받은건지 한참 동안 디버깅했다. 그러다가 제작자 깃헙 레포에서 원인을 발견했다(진작 제작자의 충고를 들을걸) ❗️ 원인 : extract-text-webpack-plugin은 css 용으로 쓰여서는 안되므로, mini-css-extract-plugin을 사용해야 했던 것이다. 💖 해결 : 기존에 쓰던 extract~를 mini~로 변경했고, 다음과 같이 webpack.config.js를 수정..

JavaScript로 DOM을 조작하면서 사소할지라도 결코 무시할 수 없는 것이 있다. 바로 getElementById 와 querySelector의 구분이다. JS파일에서 "querySelector"로 DOM 객체를 선언한다면, 그 객체가 HTML에서 자식으로 품고있는 하위 노드들까지 이어서 조회할 수 있다. querySelector는 하위객체까지 모두 데려오기 때문이다. const 고조할아버지 = document.querySelector("#js-고조할아버지"); const 증조할아버지 = 고조할아버지.querySelector("#js-증조할아버지"); const 할아버지 = 증조할아버지.querySelector("#js-할아버지"); const 아버지 = 할아버지.querySelector("#js-..

Binary Search Tree Heap O(1)이 없지만 O(logn)은 가능 탐색은 O(n)이지만 나머지는 O(logn) *min/max는 빠름 정렬되어 있음 삽입이 쉽고 Priority Queue에 이용 크기변화에 유연함

JavaScript는 개발자가 작성한 코드를 스택에 집어넣고 하나씩 실행하는 "콜스택" 방식으로 실행되는 언어이다. 콜스택은 하나의 함수가 실행을 마치고 스택을 나가야만 다음 함수가 들어와 실행되는 구조다. 그런데 JavaScript는 이 스택이 하나인 단일쓰레드를 따르기 때문에, 어떤 함수가 굉장히 무거운 작업(이미지 처리 또는 API Request 등)을 담고 있다면, 그 작업의 처리가 완료되기 전까지 다른 작업을 하지 못하는 동기적(syncronous)실행 언어라고 생각될 수 있지만, JavaScript에는 Web API와 Queue가 있어서 비동기(asyncronous)실행이 가능하다. *Syncronous : 선생님에게 전화를 거는 상황 - 선생님이 전화를 받기까지 다른 것을 할 수 없고, 전화..