소개브라우저 API

웹 개발 환경은 빠르게 발전하고 있습니다. 매년 브라우저에는 코딩 프로세스를 단순화할 수 있는 새로운 기능이 추가됩니다. 최신 웹 애플리케이션의 등장으로 개발자는 브라우저 내에서 직접 강력한 도구 모음에 액세스할 수 있으므로 과도한 라이브러리와 프레임워크가 필요하지 않습니다.

이 기사에서는 다음을 살펴보겠습니다.잘 사용되지 않는 브라우저 API 10가지이는 일반적인 문제를 보다 효율적으로 해결하는 데 도움이 될 수 있습니다. 브라우저가 무거운 작업을 수행할 수 있는데 왜 프로젝트를 라이브러리로 복잡하게 만들까요?

숙련된 개발자이든 이제 막 시작하는 개발자이든 이러한 API는 단순성과 강력함으로 여러분을 놀라게 할 수 있습니다. 바로 들어가서 이러한 도구가 웹 애플리케이션을 어떻게 향상시킬 수 있는지 살펴보겠습니다.

1. 구조화된 복제 API

구조적 복제 API는 객체 복사에 있어 획기적인 변화를 가져왔습니다. 많은 개발자에게 객체 복사는 항상 까다로운 작업이었으며 종종 라이브러리나 복잡한 기능이 필요했습니다. 이 API를 사용하면 객체의 전체 복사본을 쉽게 만들 수 있습니다.

const copy = 구조화된Clone(원본);

이 한 줄짜리 문제는 다음과 같은 많은 문제를 해결합니다.

다음과 같은 복잡한 데이터 유형을 처리합니다.지도, 세트, 그리고얼룩.
코드 충돌 없이 순환 참조를 관리합니다.
참고: 기억해야 할 중요한 측면인 기능을 복제하지 않습니다.

예를 들어 중첩된 배열이나 개체가 포함된 복잡한 개체를 복사해야 하는 경우를 생각해 보세요. JSON 직렬화와 같은 기존 방법을 사용하면 특히 순환 참조의 경우 데이터 손실이나 오류가 발생할 수 있습니다. 구조적 복제 API는 이러한 우려를 없애고 데이터를 복제하는 원활한 방법을 제공합니다.

지원하다:Chrome, Firefox, Safari 등 최신 브라우저에서 사용할 수 있어 프로덕션 용도로 안전하게 사용할 수 있습니다.

실용적인 팁: 이 API를 사용할 때 항상 브라우저 호환성을 확인하여 애플리케이션이 다양한 환경에서 일관되게 작동하는지 확인하세요.

2. 성능 API

성능 측정과 관련하여 Performance API는 종종 간과됩니다. 타사 도구에 의존하는 대신 이 API를 사용하여 코드 성능을 추적하고 비교할 수 있습니다.

performance.mark("시작");
// 측정할 코드
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

이는 다음 사항을 결정하는 데 도움이 될 수 있습니다.

어떤 기능이 더 빠릅니다.
최적화가 실제로 유익한 경우.
Worker 또는 WASM을 구현할 가치가 있는지 여부입니다.

예를 들어, 사용자 데이터를 처리하는 복잡한 웹 애플리케이션을 개발하는 경우 Performance API를 사용하여 특정 기능을 벤치마킹할 수 있습니다. 실행 시간을 측정하여 병목 현상을 식별하고 그에 따라 최적화할 수 있습니다.

또한 성능 API를 사용하면 애플리케이션을 디버깅하거나 최적화하는 데 매우 유용할 수 있는 자세한 성능 측정항목을 기록할 수 있습니다. 성능 탭 아래의 브라우저 개발자 도구에서 이러한 측정항목을 볼 수 있습니다.

지원하다:모든 최신 브라우저에서 훌륭하게 작동합니다.

실용적인 팁: 개발 중에 Performance API를 사용하여 코드 성능에 대한 데이터를 수집하세요. 이 정보는 최적화 노력을 안내하고 사용자 경험을 향상시킬 수 있습니다.

3. 페이지 가시성 API

사용자가 탭을 전환하면 어떤 일이 일어나는지 궁금한 적이 있습니까? Page Visibility API를 사용하면 탭이 활성화되었는지 여부를 감지할 수 있습니다.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

이 API는 다음과 같은 경우에 매우 유용합니다.

알아야 할 주요 브라우저 API

📦

구조화된 복제 API
복잡한 개체를 쉽게 복사할 수 있습니다.

📈

성능 API
웹 성능을 측정하고 향상시킵니다.

🙌

페이지 가시성 API
페이지가 표시되는 시기를 감지합니다.

📏

크기 조정관찰자
요소 크기 변경에 응답합니다.

🔍

교차점 관찰자
요소의 가시성을 모니터링합니다.

사용자가 참여하지 않을 때 동영상을 일시중지합니다.
성능 향상을 위해 불필요한 폴링 요청을 중지합니다.
모바일 장치의 배터리 수명을 절약하기 위해 CPU 사용량을 줄입니다.

예를 들어 비디오 스트리밍 애플리케이션을 개발하는 경우 페이지 가시성 API를 사용하면 사용자가 탭에서 벗어날 때 비디오를 일시 중지할 수 있습니다. 이는 사용자 경험을 향상시킬 뿐만 아니라 대역폭과 서버 리소스도 절약합니다.

또한 가시성 변화에 따라 사용자 참여를 추적하는 분석 기능을 구현할 수 있습니다. 이 데이터는 사용자가 애플리케이션과 상호 작용하는 방식과 가장 매력적인 기능을 이해하는 데 도움이 될 수 있습니다.

지원하다:모든 최신 브라우저와 호환됩니다.

실용적인 팁: 탭 전환, 브라우저 최소화, 다른 애플리케이션으로 전환 등 다양한 시나리오에서 가시성 기능을 항상 테스트하여 예상대로 작동하는지 확인하세요.

4. 크기 조정 관찰자

반응형 디자인의 경우 요소 크기를 추적하는 것이 번거로울 수 있습니다. ResizeObserver API를 사용하면 요소 크기의 변화를 모니터링할 수 있습니다.

const ro = 새로운 ResizeObserver(항목 => {
  for (항목의 const 항목) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(요소);

이 API는 과거에 번거로운 크기 조정 로직을 처리했던 개발자에게 안도감을 줍니다. 이제 브라우저가 이를 처리할 수 있습니다!

뷰포트 크기에 따라 레이아웃을 조정해야 하는 다양한 위젯이 포함된 대시보드를 구축한다고 상상해 보세요. ResizeObserver는 사용자가 창 크기를 조정하거나 특정 요소의 크기를 변경하는 시기를 감지하여 UI를 동적으로 재정렬할 수 있도록 도와줍니다.

지원하다:최신 브라우저에서 널리 사용 가능합니다.

실용적인 팁: ResizeObserver를 사용하면 애플리케이션 레이아웃이 크기 변화에 유연하게 반응하도록 하여 사용자 경험을 향상할 수 있습니다. 이는 요소가 원활하게 조정되어야 하는 반응형 디자인에 특히 유용합니다.

5. 교차로 관찰자 API

또 다른 강력한 도구는 Intersection Observer API입니다. 이를 통해 요소가 뷰포트에 들어오거나 나가는 시점을 모니터링할 수 있습니다.

const 관찰자 = 새로운 IntersectionObserver(항목 => {
  항목.forEach(항목 => {
    if (entry.isIntersecting) {
      // 콘텐츠를 로드하거나 애니메이션을 트리거합니다.
    }
  });
});
관찰자.observe(targetElement);

사용 사례는 다음과 같습니다.

더 나은 성능과 더 빠른 페이지 로드 시간을 위한 지연 로딩 이미지입니다.
보다 매력적인 사용자 경험을 위해 요소가 보일 때 애니메이션을 트리거합니다.
필요에 따라 콘텐츠를 로드하고 초기 로드 시간을 줄여 사용자 경험을 개선합니다.

예를 들어, 이미지가 포함된 긴 기사가 있는 경우 이미지가 뷰포트에 들어가려고 할 때만 이미지를 로드할 수 있습니다. 이는 특히 모바일 장치 사용자의 경우 초기 로딩 시간을 줄이고 대역폭을 절약합니다.

또한 Intersection Observer API는 웹페이지의 특정 섹션으로 스크롤하는 사용자 수를 추적하여 사용자 참여에 대한 귀중한 통찰력을 제공함으로써 분석에 도움을 줄 수 있습니다.

지원하다:최신 브라우저에서 사용할 수 있습니다.

실용적인 팁: 특히 콘텐츠가 많은 애플리케이션에서 성능 최적화를 위해 Intersection Observer API를 구현하세요. 이렇게 하면 리소스를 절약하는 동시에 사용자를 위한 보다 원활한 환경을 만드는 데 도움이 됩니다.

6. API 가져오기

XMLHttpRequest의 시대는 지났습니다. Fetch API는 네트워크 요청 프로세스를 단순화합니다.

가져오기(URL)
  .then(응답 => response.json())
  .then(데이터 => console.log(데이터));

이 API를 사용하면 다음을 쉽게 수행할 수 있습니다.

JSON, 텍스트, Blob 등 다양한 응답 유형을 처리합니다.
더 깔끔하고 읽기 쉬운 코드를 위해 async/await를 사용하세요.
요청에 대한 사용자 정의 헤더를 설정하여 다양한 API에 유연하게 적용할 수 있습니다.

예를 들어 REST API에서 사용자 데이터를 가져와야 할 수도 있습니다. Fetch API를 사용하면 콜백의 복잡성 없이 네트워크 요청의 비동기 특성을 처리하는 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.

또한 Fetch API는 Promise를 지원하므로 연결된 요청을 더 쉽게 처리하거나 오류를 적절하게 처리할 수 있습니다. 또한 다양한 응답 상태를 쉽게 처리할 수 있어 네트워크 상호 작용을 관리하는 강력한 방법을 제공합니다.

지원하다:모든 최신 브라우저에서 지원됩니다.

실용적인 팁: 모든 네트워크 요청에 대해 Fetch API를 활용하여 가독성과 유지 관리성을 향상하세요. 원활한 사용자 경험을 보장하려면 오류를 적절하게 처리해야 합니다.

7. 웹 스토리지 API

Web Storage API를 사용하면 사용자 기본 설정이나 세션 데이터를 저장하는 것이 그 어느 때보다 쉬워졌습니다. 두 가지 주요 저장소 옵션을 제공합니다.

로컬스토리지페이지 새로 고침 후에도 지속되는 영구 데이터의 경우.
세션스토리지페이지 세션 기간 동안만 지속되는 임시 데이터의 경우.

예:

구조적 복제 API 사용

원본 개체 만들기

복사할 객체를 정의합니다.

StructuredClone() 호출

API를 사용하여 객체를 복제합니다.

복잡한 유형 처리

맵, 세트 및 Blob을 지원합니다.

함수 복제 방지

기능을 복제하지 않는다는 점을 기억하세요.

localStorage.setItem('key', 'value');
const 값 = localStorage.getItem('key');

이 API는 다음과 같은 경우에 특히 유용합니다.

테마 설정이나 언어 선택과 같은 사용자 기본 설정을 저장합니다.
사용자 인증 토큰과 같은 세션 데이터를 관리합니다.
서버 측 솔루션 없이도 장바구니에 있는 항목을 추적합니다.

예를 들어 전자 상거래 사이트를 구축하는 경우 웹 저장소 API를 사용하면 사용자가 다른 페이지로 이동하거나 페이지를 새로 고치더라도 장바구니에 추가한 항목을 기억할 수 있습니다.

지원하다:모든 최신 브라우저에서 지원됩니다.

실용적인 팁: 여러 세션에 걸쳐 유지하려는 데이터에는 localStorage를 사용하고, 단일 방문 동안에만 관련된 데이터에는 sessionStorage를 사용하세요. 민감한 정보를 저장할 때는 항상 보안에 미치는 영향을 염두에 두십시오.

8. 웹 알림 API

웹 알림 API를 사용하면 웹 애플리케이션이 사용자에게 알림을 표시할 수 있습니다. 이 기능은 사용자가 애플리케이션을 적극적으로 사용하지 않을 때에도 정보를 지속적으로 제공하여 사용자 참여를 향상시킬 수 있습니다.

if (Notification.permission !== "허가됨") {
  알림.요청권한();
}

const 알림 = 새로운 알림("안녕하세요!", {
  body: "알림 메시지입니다!",
});

사용 사례는 다음과 같습니다.

채팅 애플리케이션의 새 메시지나 업데이트에 대해 사용자에게 알립니다.
알림이나 마감일과 같은 중요한 이벤트를 사용자에게 알립니다.
양식 제출과 같은 사용자 작업 후에 피드백을 제공합니다.

예를 들어 메시징 앱을 개발하는 경우 웹 알림 API를 사용하여 사용자가 다른 탭이나 애플리케이션을 탐색하는 동안 새 메시지를 알릴 수 있습니다.

알림을 구현하면 사용자가 애플리케이션을 지속적으로 확인할 필요 없이 중요한 업데이트에 대한 정보를 지속적으로 얻을 수 있으므로 사용자 경험이 크게 향상될 수 있습니다.

지원하다:대부분의 최신 브라우저에서 사용할 수 있습니다.

실용적인 팁: 긍정적인 사용자 경험을 보장하려면 알림을 보내기 전에 항상 사용자 권한을 요청하세요. 사용자 참여를 장려하기 위해 알림에 의미 있는 콘텐츠를 제공하세요.

9. 서비스 워커

서비스 워커는 웹 페이지와 별도로 백그라운드에서 스크립트를 실행할 수 있는 강력한 기능입니다. 이를 통해 오프라인 지원 및 백그라운드 동기화와 같은 기능을 사용할 수 있습니다.

self.addEventListener('설치', 이벤트 => {
  // 설치 단계 수행
});

self.addEventListener('fetch', 이벤트 => {
  event.respondWith(
    캐시.일치(event.request)
      .then(응답 => {
        응답 반환 || 가져오기(event.request);
      })
  );
});

서비스 워커를 사용하면 다음을 수행할 수 있습니다.

애플리케이션을 오프라인에서 사용할 수 있도록 리소스를 캐시합니다.
캐시된 콘텐츠 또는 대체 응답을 제공하기 위해 네트워크 요청을 가로챕니다.
사용자의 참여를 유지하려면 푸시 알림을 활성화하세요.

예를 들어 PWA(프로그레시브 웹 앱)를 구축하는 경우 원활한 오프라인 환경을 제공하려면 서비스 워커가 필수적입니다. 사용자는 인터넷 연결 없이도 애플리케이션과 계속 상호 작용할 수 있으며, 다시 온라인 상태가 되면 모든 변경 사항이 동기화됩니다.

지원하다:최신 브라우저에서 지원되지만 구현하기 전에 항상 호환성을 확인하세요.

실용적인 팁: 서비스 워커 내에서 `cache` API를 사용하여 필수 리소스를 저장하고 복귀 사용자의 로드 시간을 개선하세요. 최적의 성능을 위해 서비스 워커가 올바르게 등록되고 활성화되었는지 확인하세요.

10. 웹 공유 API

Web Share API를 사용하면 사용자는 웹 애플리케이션의 콘텐츠를 소셜 미디어와 같은 장치의 다른 애플리케이션에 공유할 수 있습니다.

navigator.share({
  제목: '웹 공유 API',
  text: '이 콘텐츠를 확인해 보세요!',
  URL: 'https://example.com',
}).then(() => {
  console.log('콘텐츠가 성공적으로 공유되었습니다!');
}).catch((오류) => {
  console.error('공유 오류:', error);
});

웹 공유 API의 주요 기능은 다음과 같습니다.

텍스트, URL 및 기타 데이터 형식을 쉽게 공유할 수 있습니다.
사용자 장치와 통합되는 기본 공유 대화 상자입니다.
공유를 장려하여 사용자 참여를 향상했습니다.

예를 들어 블로그 게시물이 있는 경우 사용자가 웹사이트에서 직접 소셜 미디어에 게시물을 공유하도록 허용할 수 있습니다. 이 기능은 콘텐츠의 도달 범위와 참여도를 크게 높일 수 있습니다.

지원하다:모바일을 지원하는 대부분의 최신 브라우저에서 사용할 수 있습니다.

실용적인 팁: Web Share API를 사용하기 전에 사용자의 장치가 이를 지원하는지 확인하세요. 원활한 경험을 보장하기 위해 API를 사용할 수 없는 경우 공유를 위한 대체 옵션을 제공하세요.

결론

브라우저 API를 활용하면 추가 라이브러리 없이도 웹 애플리케이션을 크게 향상시킬 수 있습니다. 이 기사에서는 Structured Clone API, Performance API 등을 포함한 10가지 강력한 API를 다루었습니다. 이러한 각 도구는 코드를 단순화하고 성능을 향상시키는 데 도움이 될 수 있습니다.

웹 개발 기술을 한 단계 더 발전시킬 준비가 되셨나요? 다음 프로젝트에서 이러한 API를 살펴보고 이것이 어떻게 작동하는지 확인하세요. 생산성을 향상시킬 수 있는 도구에 대해 자세히 알아보려면 다음을 확인하세요.이미지를 GIF로 변환기그리고무료 비디오를 MP3로 변환.

웹 기술의 최신 발전에 대한 자세한 내용을 보려면 다음 사이트를 방문하세요.오픈AI그리고포옹하는 얼굴.