AI교육과정 - JavaScript.9

• 버튼 안눌림

<div data-display-name='apple' data-index='1'></div>

• dataset을 통해 data 속성명을 가져올 수 있음

  document.querySelector('div[data-display-name="apple"');
  document.querySelector('div[data-index="1"');
  dataset; // { "index": "1", "displayName": "apple"} 
  dataset.index; // 1
  dataset.displayName; // apple 

getBoundingClientRect

• 해당 요소의 크기, 좌표 등을 지니고 있는 객체를 반환하는 메소드. 'x, y, width, height, left, right, top, bottom'이 반환된다

  navbar.getBoundingClientRect().height // navbar의 길이가 반환됨

scrollIntoView

• 스크롤 이동

  scrollIntoView('아이디명or클래스명'or변수명)

window.scrollY / window.scrollX

• 현재 페이지에서 스크롤 위치를 나타냄

map()

• 배열의 반복문

  sectionIds.map((id) => document.querySelector(id))
  // sectionIds의 배열값을 순서대로 실행
  // 위의 경우에는 id(각 배열값)에 id(각 배열값)라는 id명을 가진 태그를 순서대로 배열로 삽입

classList

• 클래스를 선택할 수 있음
• add / remove

  • 클래스명 추가 / 삭제

    navbar.classList.add('navbar--bold'); // navbar에 navbar--bold라는 클래스명을 부여
    navbar.classList.remove('navbar--bold'); // navbar에 navbar--bold라는 클래스명을 제거

• toggle()

  navbarMenu.classList.toggle('open');
  // navbarMenu에 open 클래스가 있으면 추가, 없으면 제거

Observer

• isIntersecting

  • 관찰 대상의 교차 상태(boolean)

• threshold

  • observer가 실행되기 위해 가시성이 얼마나 필요한지
  • 기본값은 Array 타입의 [0]이지만 Number타입의 단일값으로도 작성 가능
  • 1로 넣으면 완벽하게 뷰포트에 보여야 변화됨 / 엔트리가 어느정도 화면에 노출돼야 감지할 것인지 설정(0 ~ 1)

• rootMargin

  • 컨테이너를 기준으로 감지할 마진을 설정
  • 바깥 여백(Margin)을 이용해 Root 범위를 확장하거나 축소

• root

  • null은 기본값, viewport(박스사이즈 기준이 아닌 윈도우 창) 기준
  • getElement~로 엘리먼트를 가져와서 null 대신에 집어넣어도 됨(타겟의 조상 요소여야 함)

  😣 **IntersectionObserver(콜백함수, 옵션)**

  • DOM 엘리먼트가 뷰포트상에 노출되었는지 여부를 비동기적으로 감시하는 API

    • 페이지 스크롤에 따른 이미지/콘텐츠의 레이지 로딩 구현
    • 무한 스크롤 웹사이트 구현
    • 광고 수익 측정을 위한 광고 문구 노출 여부 계산

    🎈 화면상에 존재하는 모든 이미지를 한번에 불러오면, 불필요한 네트워크 비용이 증가하고 이로 인해 사용자 경험을 저하 시킬 수 있다. 때문에 현재 화면에 보이는 이미지만 선별적으로 로딩하는 기법이 필요하다.

  • 기존에는 대상 이미지 또는 엘리먼트가 뷰포트 내에 존재하는지 유무를 판별하기 위해 element.getBoundingClientRect 함수를 이용했으나 이 경우 reflow가 발생하여 과부하 될 수 있다