JavaScript (14) 썸네일형 리스트형 [JavaScript] Intersection Observer API 정리 Intersection Observer Intersection Observer는 target과 root의 교차 발생을 비동기적으로 관찰하는 Web API이다. 메인 thread에 영향을 주지 않고, callback를 실행할 수 있도록 한다. 매번 layout을 새로 그려 render tree를 새로 만들지 않고 callback를 실행하므로 브라우저의 성능을 향상시킬 수 있다. ⭐ syntax new IntersectionObserver(callback(entries, observer), [options]); Callback target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 callback은 entries, observer를 매개변수로 받는다 ▪ Entries Intersection.. [JS] setTimeout(), setInterval() 사용 ⭐ setTimeout(callback, [timeout], [param1], [param2]...) 우리가 지정한 시간이 지나면 우리가 지정한 콜백 함수를 호출한다. callback 지정한 시간이 지난 후 호출되는 함수나 문자열. 문자열도 전달할 수 있지만 권장하지는 않는다. timeout 함수의 호출 전 대기 시간 시간의 단위는 ms(1000분의 1초) 정확히 보장된 시간이 아니라 최소 시간을 나타낸다. 만약 값을 생략하면 0이 값으로 사용 값을 0으로 지정해도 함수가 바로 실행되지는 않는다. param1, param2... 지정한 시간이 지난 후 callback 함수에 전달되는 매개변수 // callback 함수를 직접 입력 setTimeout(function() { console.log('hi').. [JS] JavaScript Array 2 - Array method(배열 메소드) Array method 1. join (separator?:string); 모든 배열 요소를 하나의 string으로 리턴한다. separator를 전달하면 separator로 구분하여 리턴한다. const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); // apple,banana,orange const result2 = fruits.join(' | '); console.log(result2); // apple | banana | orange 2. split (separator:string, limit?); separator와 limit을 전달받아서 separator를 기준으로 string을.. [JS] JavaScript Array 1 - 자바스크립트 배열의 생성과 method Array 연관있는 값(element, item)을 모아서 관리하는 자료구조이다. 배열에 저장되는 값은 순차적으로 저장되며, 고유한 index값을 가진다. index는 객체에서의 property key와 같은 역할을 한다. 배열의 요소는 array[index] 처럼 대괄호를 사용하여 접근할 수있다. 1. Declaration (배열의 생성) const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); // ['🍎', '🍌'] console.log(fruits.length); // 2 배열의 개수 console.log(fruits[0]); // 🍎 console.lo.. [JS] getBoundingClientRect() - Viewport를 기준으로 하는 위치 값 가져오기 getBoundingClientRect() element.getBoundingClientRect() element의 크기(width, height)와 뷰포트(viewport)를 기준으로 한 위치(left, top, right, bottom, x, y), 이렇게 총 8가지 속성이 있는 DOMRect 객체를 리턴한다. width와 height은 contents뿐 아니라 padding과 border까지 포함한다. width와 height를 제외한 모든 속성은 뷰포트(viewport)의 top-left 를 기준으로 하며, 뷰포트(viewport)를 기준으로 하는 상대적인 값이기 때문에 scroll로 인해 위치가 변경 될 때마다 값이 변경된다. hello body { padding: 0; margin: 0; } .. [JS] Event delegation(이벤트 위임) Event delegation(이벤트 위임) event bubbling을 이용해서 event 제어하는 방법이다. 부모 안에 있는 자식 요소들에게 공통적으로 무언가를 처리해야 할 때 모든 자식 요소에 하나하나에 event listener(이벤트 리스너)를 추가하지 않고, 자식 요소의 공통된 부모 요소에 event Listener를 등록하여 자식 요소의 event를 제어한다. 부모 요소에 등록된 event Listener 에서 event.currentTarget과 event.target을 이용하여 event가 어디에서 발생했는지를 알 수 있고, 원하는 요소에서 event가 발생되면 그 때 event listener를 처리한다. 1 2 3 4 5 // Bad const lis = document.querySe.. [JS] Object의 생성과 접근 & Constructor Function Object는 JavaScript 데이터 타입 중 하나이다. Object는 key와 value의 집합체이다. object = { key : value }; 하나의 property는 key: value로 구성되어 있다. Object는 reperence type으로 변수에 저장할 때, object가 아닌 object가 저장된 메모리 주소가 저장된다. 1. Object 생성 Object literal syntax 변수처럼 객체를 생성하는 방법 중괄호{} 안에 key: value를 쉼표로 구분하여 생성한다. const obj1 = { key: value, key2: value2, ... }; Object constructor syntax 키워드 new를 이용하여 Object 생성자 함수를 호출하고 propert.. [JS] Event flow - capturing과 bubbling Event flow 이벤트가 발생하면 capturing phase -> target phase -> bubbling phase 순으로 이벤트를 감지한다. Click Me const outer = document.querySelector('.outer'); const middle = document.querySelector('.middle'); const button = document.querySelector('button'); outer.addEventListener('click', event => { console.log(`outer: ${event.currentTarget}, ${event.target}`); }); // outer: [objectHTMLDivElement], [object HTML.. 이전 1 2 다음
