FEInterview Prep

browser · medium priority

Advanced Web APIs

Notification, Geolocation, Payment Request, Permissions API

intermediate 난이도4시간토스당근배민카카오
시작 전
이해도
매우 낮음

학습 개요

쉬운 설명

복잡한 개념을 실생활 비유로 설명합니다.

“스마트폰 앱이 "위치/알림/카메라 접근 허용하시겠습니까?"라고 묻는 것과 동일하다. 웹도 이제 같은 수준의 기능을 사용할 수 있다.”

브라우저 내장 API들은 OS 수준의 기능을 안전하게 웹에서 사용하게 해준다. 사용자 동의(권한)를 항상 먼저 받아야 하고, HTTPS에서만 동작한다.

핵심 개념

웹 푸시 알림 구현 흐름

1
권한 요청

Notification.requestPermission()으로 알림 권한 요청

2
Service Worker 등록

Push 이벤트를 수신하려면 Service Worker가 필요

3
Push 구독

PushManager.subscribe()로 구독, endpoint를 서버에 저장

4
서버에서 Push 전송

web-push 라이브러리로 VAPID 인증 후 알림 전송

Web Push 구독 — 클라이언트typescript
1async function subscribePushNotification() {
2  const permission = await Notification.requestPermission();
3  if (permission !== 'granted') return;
4

5  const registration = await navigator.serviceWorker.ready;
6  const subscription = await registration.pushManager.subscribe({
7    userVisibleOnly: true,
8    applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!),
9  });
10

11  // 서버에 구독 정보 저장
12  await fetch('/api/push/subscribe', {
13    method: 'POST',
14    headers: { 'Content-Type': 'application/json' },
15    body: JSON.stringify(subscription),
16  });
17}

실무 적용

어떤 상황에서 사용하는가

배민 같은 배달 앱에서 현재 위치로 주소 자동 입력 + 주문 완료 후 알림을 구현할 때

어떻게 적용하는가

1) Permissions API로 현재 권한 상태 확인, 2) 주소 입력 버튼 클릭 시 Geolocation으로 위치 가져오기, 3) 주문 완료 후 Service Worker + Push API로 배달 상태 알림 구독

흔한 실수와 안티패턴

  • 페이지 로드 즉시 위치/알림 권한 요청 (사용자 거부율 90% 이상)
  • HTTPS 미적용으로 API 동작 안 함
  • watchPosition 사용 후 clearWatch 안 해서 메모리 누수
  • Push 구독 정보를 서버에 저장 안 해서 알림 못 받는 문제

면접 질문

중급배민당근토스

답변 방향 힌트

Service Worker, Push API, VAPID 키의 역할

반드시 언급할 키워드

  • 권한 요청
  • Service Worker 등록
  • PushManager.subscribe()
  • VAPID 인증
  • 서버에서 web-push 전송

예상 꼬리 질문

  • Service Worker의 라이프사이클은?
  • VAPID가 무엇인가요?

학습 자료

이전

← Deployment Strategies

다음

Code Review & Refactoring →