여러분이 모르는 자바스크립트 API

이 글에서는 Page Visibility(페이지 가시성) API, Web Share API, Broadcast Channel API 및 Internationalization(국제화) API와 같이 잘 알려지지 않았지만 매우 유용한 API에 대해 설명합니다. 이러한 API가 무엇인지, 어디에 사용해야 하는지, 어떻게 사용해야 하는지 함께 살펴봅니다. [Page Visibility API] 사용자가 페이지를 떠난 시점을 알려줍니다. 정확히 말하면, 사용자가 창을 최소화하거나 최대화하거나 탭을 전환하는 등 페이지 가시성 상태가 변경될 때마다 API가 이벤트를 트리거합니다. - 사용자가 페이지를 떠났을 때 동영상, 이미지 캐러셀 또는 애니메이션을 일시 중지할 수 있습니다. - React Query 내부의 Window Focus Refetching에도 이 API가 사용되었습니다. 아래는 예시 코드입니다. ``` document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { // page is visible } else { // page is hidden } }); ``` [Web Share API] Web Share API는 잘 알려지지 않은 API 중 하나입니다. 이를 통해 운영 체제의 기본 공유 메커니즘에 액세스할 수 있으며, 특히 모바일 사용자에게 유용합니다. 이 API를 사용하면 자체 공유 메커니즘을 만들거나 타사 공유 메커니즘을 사용할 필요 없이 텍스트, 링크, 파일을 공유할 수 있습니다. - navigator.canShare(): 파라메터로 데이터를 받고, 데이터가 공유 가능한지를 판별합니다. - navigator.share(): 핵심 API 입니다. 공유가 성공하면 resolve된 프로미스를 반환합니다. 네이티브 공유 메커니즘을 호출하고 공유하려는 데이터를 인수로 받습니다. 사용자가 링크나 버튼을 누른 경우에만 호출할 수 있습니다. 공유 데이터는 다음과 같은 속성을 가질 수 있는 객체입니다: `url`: 공유할 URL, `text`: 공유할 내용, `title`: 공유할 제목, `files`: 공유할 파일을 나타내는 파일(`File`) 객체 배열 아래는 예시 코드입니다. ``` const shareButton = document.querySelector("#share-button"); const shareQuote = async (shareData) => { try { await navigator.share(shareData); } catch (error) { console.error(error); } }; shareButton.addEventListener("click", () => { let shareData = { title: "A Beautiful Quote", text: quote.textContent, url: location.href, }; shareQuote(shareData); }); ``` [Broadcast Channel API] 브로드캐스트 채널 API를 통해 브라우징 컨텍스트 안에서 서로 기본적인 데이터를 주고받을 수 있습니다. 브라우징 컨텍스트는 탭, 창, iframe 또는 페이지가 표시될 수 있는 모든 요소입니다. 보안상의 이유로 인해 출처가 동일하고 브로드캐스트 채널 API를 사용하지 않는 한 브라우징 컨텍스트 간의 통신은 허용되지 않습니다. 두 브라우징 컨텍스트의 출처가 동일하려면 URL에서 동일한 프로토콜(예: http/https), 도메인(예: example.com) 및 포트(예: :8080)를 공유해야 합니다. 브로드캐스트 채널 API는 일반적으로 사용자 경험을 향상시키거나 보안상의 이유로 여러 탭과 창에서 페이지의 상태를 동기화하는 데 사용됩니다. 또한 다른 탭이나 창에서 서비스가 완료된 시점을 파악하는 데 사용할 수도 있습니다. 몇 가지 예는 다음과 같습니다: - 모든 탭에서 사용자 로그인 또는 로그아웃시키기 - 에셋이 업로드되는 시기를 감지하여 모든 페이지에 표시하기 - 서비스 워커에게 백그라운드 작업을 수행하도록 명령하기 아래는 예시 코드입니다. ``` const broadcast = new BroadcastChannel("new_channel"); // 메세지 보내기 broadcast.postMessage("Example message"); // 메세지 받기 broadcast.onmessage = ({data, origin}) => { console.log(`${origin} says ${data}`); }; ``` [Internationalization API] 웹 페이지나 앱을 개발할 때 콘텐츠를 여러가지 언어로 보여줘야 할 때가 있습니다. 하지만 날짜, 숫자, 단위 등이 국가마다 다르기 때문에 페이지의 텍스트를 번역하는 것만으로는 부족할 수 있습니다. 예를 들어 우리나라는 YY/MM/DD로 날짜를 표기하지만 미국은 MM/DD/YY로 날짜를 표기합니다. 이런 문제를 I18n API가 해결해줍니다. 본문에서는 아래와 같은 API들에 대해서 설명합니다. - Intl.DateTimeFormat() - Intl.DisplayNames() - Intl.Locale() - Intl.NumberFormat() - Intl.RelativeTimeFormat() 네이티브 API의 존재를 모르면 불필요한 npm 패키지를 설치해서 쓰거나 직접 유틸리티를 만들어서 쓰는 불상사를 만들 수 있습니다. 특히 몇 년 전 스택오버플로우 답변을 참고하는 경우 이런 일들이 자주 생기곤 합니다. (경험담..?) 항상 사용하려는 API가 이미 내장되어있는지 찾아보는 습관을 들이도록 합시다.

JavaScript APIs You Don't Know About - Smashing Magazine

Smashing Magazine

JavaScript APIs You Don't Know About - Smashing Magazine

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 3월 5일 오전 9:08

 • 

저장 39조회 1,893

댓글 0