안녕하세요. 수석 풀스택 개발자 하룬입니다. 오늘은 거의 모든 프로젝트에서 사용할 수 있는 매우 유용한 JavaScript 기능을 공유하겠습니다.

1. 뷰포트 내 요소의 가시성을 추적합니다.

이 유틸리티는 Intersection Observer API를 사용하여 뷰포트 내 요소의 가시성을 추적합니다. 요소가 표시되는지 여부를 나타내는 부울 값으로 콜백 함수를 호출합니다.

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. 반응형 뷰포트 중단점

이 유틸리티를 사용하면 중단점을 정의하고 뷰포트 너비가 이러한 중단점을 넘을 때 알림을 받을 수 있습니다. 현재 중단점 값으로 콜백 함수를 호출합니다.

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. 반응형 클립보드 API

이 유틸리티는 복사 이벤트를 수신하고 클립보드에서 복사된 텍스트를 읽어 복사된 텍스트로 콜백 함수를 호출합니다.

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. 반응형 화면 방향 API

이 유틸리티는 화면 방향의 변화를 수신하고 현재 방향 유형으로 콜백 함수를 호출합니다.

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. 마우스가 페이지를 떠나는지 여부를 표시하는 반응 상태

이 유틸리티는 마우스가 페이지를 떠나거나 들어올 때를 추적하고 마우스가 페이지를 떠났는지 여부를 나타내는 부울 값을 사용하여 콜백 함수를 호출합니다.

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

이러한 각 유틸리티는 이벤트 리스너와 최신 API를 활용하여 JavaScript 애플리케이션에 반응적 동작을 제공합니다.

시간을 내어 저와 함께 강력한 JavaScript 유틸리티를 탐색해 주셔서 감사합니다. 여러분도 저처럼 유용하고 흥미로웠으면 좋겠습니다. 프로젝트에서 이러한 기능을 자유롭게 실험해보고 개발 프로세스를 어떻게 향상시킬 수 있는지 확인하십시오. 궁금한 점이 있거나 나만의 팁을 공유하고 싶다면 댓글에 적어주세요. 즐거운 코딩 되세요!