[PWA] (25) 백엔드 연동 시 고려해야 할 사항

이 프로젝트가 PWA로 구현하고 있던 거였는데, 혹시 관련한 제약 사항이 있을지 찾아보았다.

✅ 결론먼저

PWA(Progressive Web App)로 개발되었다고 해서 백엔드를 붙는 데 제약이 되는 건 거의 없지만, 오프라인 기능과 서버 간 데이터 동기화, 인증 보안, 캐싱 정책은 새롭게 설계해야 한다.

🔍 PWA + 백엔드 연동 시 고려해야 할 사항

구분	영향도	설명
✅ 오프라인 사용	있음	기존 localStorage를 활용한 오프라인 기능이 백엔드 연동 시 바뀔 수 있음
✅ 데이터 동기화	있음	오프라인 상태에서 저장한 데이터를 온라인 될 때 서버와 어떻게 동기화할지 설계 필요
✅ 캐시 정책	약간	PWA의 캐싱(logic, assets 등)이 API 응답에 영향을 줄 수 있음
✅ 인증 처리	있음	JWT, 세션 기반 로그인 등은 브라우저 스토리지와 잘 연동되도록 주의 필요
✅ 서비스워커	없음	API 자체에는 영향 없음. 다만, API 응답을 캐시할지 여부는 직접 설계해야 함

🧩 구체적인 예시

🔸 예: 기존 localStorage 사용 코드

const todos = JSON.parse(localStorage.getItem("todos") || "[]")

🔸 백엔드 연동 시 방식

const todos = await fetch("/api/todos").then(res => res.json())

🔸 오프라인 대응

if (navigator.onLine) {
  // 온라인이면 서버에서 가져오기
  const todos = await fetch('/api/todos')
} else {
  // 오프라인이면 localStorage fallback
  const todos = JSON.parse(localStorage.getItem('todos') || '[]')
}

이처럼, 오프라인을 보장하려면 로컬 데이터와 서버 데이터를 함께 관리하는 로직이 추가로 필요할 수 있음.

🔐 인증 처리 주의점

PWA는 웹앱이므로 브라우저 스토리지(localStorage, sessionStorage, IndexedDB 등)에 JWT 등을 저장할 수 있는데,

보안상 쿠키(httpOnly) 기반 인증도 고려해야한다.

오프라인 상태에서 로그인이 필요한 경우, 토큰 캐싱 및 만료 관리를 철저히 해야 한다.

📱 정리

항목	제약 여부	설명
백엔드 연동	❌ 없음	자유롭게 가능
오프라인 기능 유지	⚠️ 고려 필요	동기화 전략이 있어야 함
캐시 / 인증 처리	⚠️ 고려 필요	특히 보안과 사용자 경험 관점에서