이 글에서는 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가 이미 내장되어있는지 찾아보는 습관을 들이도록 합시다.