IntersectionObserver MDN 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있게 도와주는 API IntersectionObserver 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있음. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있음 IntersectionObserver.IntersectionObserver() IntersectionObserver 객체를 생성 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수..

스크롤 이벤트 발생 시 데이터르 조회 하기 참조되는 객체 HTML Element 객체 offset offsetHeight/offsetWidth : 해당 엘리먼트의 너비와 높이(border, padding, scroll 포함, margin 제외) offsetParent : offsetLeft, offsetTop의 기준이 되는 부모 엘리먼트 offsetLeft/offsetTop : offsetParent 기준으로 한 엘리먼트 위치 좌표 scroll scrollWidth/scrollHeight : 해당 엘리먼트의 넓이와 높이 (overflow: scroll 인 경우 화면에 보이지 않는 스크롤영역까지 포함되기 때문에 offsetWidth/offsetHieght 값보다 scoll의 값이 더 크게 됨) scroll..

1. 이벤트 등록 addEventListener 메서드 사용하여 특정 요소에 이벤트 등록 클릭 2. 브라우저의 이벤트 감지 1) 이벤트 버블링(Event Bubbling) 특정 요소에서 이벤트 발생 시, 해당 이벤트가 상위 요소들로 이벤트 전달(자식 -> 부모) 하위에서 상위 요소로 이벤트 전파 방식을 이벤트 버블링(Event Bubbling) 예제) const divs = document.querySelectorAll('div') divs.forEach((div) => { div.addEventListener('click', (evnet) => { console.log(event.currentTarget.className + " click"); }); }); -- 출력 결과(div3 클릭) -- div..

메서드 빌려쓰기 - call, apply, bind call 과 apply 첫번째 인자로 실행할 대상 함수의 this 값을 대체할 다른 객체를 전달 받음 두번째 인자로 call 함수의 경우 호출할 함수에 전달할 매개변수를 별개의 인자들로 받으며, apply 함수의 경우 call 과 다르게 함수에 전달할 매개변수를 배열로 받음 예제 const Jack = { name: 'Jack', }; const info = function(age, city) { console.log(this); console.log(`name : ${this.name}, age : ${age}, city: ${city}`); }; info(12, 'Daegu'); -- ① info.call(Jack, 12, 'Incheon'); --..

스코프와 클로저 스코프 현재 접근할 수 있는 변수들의 범위 어떠한 변수가 스코프 안에 선언되었으면 해당 스코프 안에서 변수에 접근해서 읽거나 쓸 수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없음. 예제) DIV 0 DIV 1 DIV 2 -- 출력 결과 -- DIV0 클릭 : Clicked Div2 DIV1 클릭 : Clicked Div2 DIV2 클릭 : Clicked Div2 설명 버튼 클릭 시 예상과는 다른 결과 도출. 이러한 원인은 스코프가 생성되고 유지되는 방법에서 발생되는 문제. ②에서 각각의 이벤트 핸들러를 위한 콜백 함수가 변수 i에 선언된 변수들에 접근할 수 있는 스코프 생성. 변수 i는 글로벌 스코프에 존재. 모두 같은 스코프의 변수 i를 참조. for-loop 를 통해서 각각의 d..

스코프 체인의 의미 자바스크립트에서는 함수 내의 블록(for, if)와 같은 구문은 유효 범위가 없으며, 오직 함수만이 유효 범위의 한 단위가 됨. 이 유효 범위를 나타내는 스코프 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는데 이를 스코프 체인이라고 함. 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 형성. 전역 실행 컨텍스트의 스코프 체인 var var1 = 1; var var2 = 2; console.log(var1); console.log(var2); 설명 코드가 실행되면, 전역..