개발자가 Claude의 도움으로 Next.js PWA에서 서비스 워커 중복 버그를 디버깅합니다

✍️ OpenClawRadar📅 게시일: March 15, 2026🔗 Source
개발자가 Claude의 도움으로 Next.js PWA에서 서비스 워커 중복 버그를 디버깅합니다
Ad

한 개발자가 꿈 유도 및 프로그래밍 앱인 Somnia를 거의 전적으로 Claude를 코딩 파트너로 삼아 구축한 경험을 공유했습니다. 이 앱은 네이티브 앱처럼 홈 화면에 설치되고, 수면/기상 시간에 푸시 알림을 보내며, 모든 데이터를 기기에 로컬로 저장하며, 앱 스토어 배포를 피하는 Next.js 14 프로그레시브 웹 앱입니다.

문제의 버그

개발자는 웹 푸시 알림이 작동하지 않는 치명적인 문제를 디버깅하는 데 3주를 보냈습니다. 서비스 워커가 Samsung Android 기기에서 PWA 독립 실행 모드로 설치된 직후 계속해서 REDUNDANT 상태가 되었습니다. 이 모드에서 navigator.serviceWorker.getRegistrations()는 일관되게 빈 배열을 반환했습니다.

디버깅 과정

디버깅 과정에서 개발자는 다음과 같은 작업을 수행했습니다:

  • 도움을 위해 Claude, GPT, Gemini, Perplexity를 참고했습니다
  • 전체 디버그 보고서를 생성했습니다
  • 15가지가 넘는 다양한 수정을 시도했습니다
  • 마침내 서비스 워커가 REDUNDANT 상태가 되는 것을 보여주는 디버그 페이지를 구축했습니다
  • Claude의 도움으로 chrome://serviceworker-internals 출력을 해석했습니다

근본 원인

실제 문제는 sw.js가 오래된 빌드 ID와 함께 실수로 git에 커밋된 것이었습니다. 내부의 프리캐시 매니페스트는 오래된 배포에서 자산을 가져오려고 시도했고, 이는 모두 404 오류를 반환했습니다. Workbox의 설치 이벤트가 조용히 실패하여 서비스 워커가 매번 자가 파괴되었습니다.

해결 방법

해결책은 간단했습니다: git rm --cached 명령어로 캐시에서 오래된 파일을 제거하여 문제를 해결했습니다.

개발자가 포기하고 싶었을 때 Claude는 체계적인 디버깅을 유지하는 데 도움을 주었으며, 앱에는 AI 생성 콘텐츠가 전혀 없지만(모든 꿈 기록은 인간이 작성함), 거의 전적으로 Claude와의 대화를 통해 구축되었습니다.

📖 전체 원문 읽기: r/ClaudeAI

Ad

👀 See Also

OpenClaw MCP 도구를 사용한 자동화된 비디오 편집 파이프라인 구축
Use Cases

OpenClaw MCP 도구를 사용한 자동화된 비디오 편집 파이프라인 구축

한 개발자가 YouTube/Twitch 콘텐츠를 위한 비디오 편집을 자동화하는 OpenClaw 스킬을 구축했습니다. 20분 길이의 비디오를 4분 만에 처리하며, 점프컷 편집, 자막, 그리고 녹화당 20-30개의 숏폼 콘텐츠를 생성합니다.

OpenClawRadar
레딧 사용자가 맥에서 25개 이상의 예약된 AI 에이전트를 개인 페르소나로 운영: 유용함인가, 복잡성일 뿐인가?
Use Cases

레딧 사용자가 맥에서 25개 이상의 예약된 AI 에이전트를 개인 페르소나로 운영: 유용함인가, 복잡성일 뿐인가?

한 개발자가 자신의 맥에서 25개 이상의 예약 에이전트를 운영하며, 업무 자동화, 오픈소스 프로젝트, 취미 제작, GitHub PR 등을 처리하는 네 개의 페르소나(아내, 딸, 아들, 모니터)로 구성된 개인 AI 설정을 공유하고, 이것이 실제로 유용한지, 아니면 복잡성 자체를 위한 것인지 커뮤니티에 묻습니다.

OpenClawRadar
OpenClaw가 Linux에서 로컬 LLM과 함께 전체 시스템 관리자로 실행 중
Use Cases

OpenClaw가 Linux에서 로컬 LLM과 함께 전체 시스템 관리자로 실행 중

한 사용자가 OpenClaw를 Linux 서버의 전체 시스템 관리자로 사용하고 있으며, Qwen 3.6 27b q6를 로컬에서 실행하고 Tailscale 외에는 외부 인터넷이 없으며, 키오스크 모드 배포를 자율적으로 처리했다고 보고합니다.

OpenClawRadar
개발자가 Claude로 부부 상담 앱을 제작하고 프롬프트 엔지니어링 인사이트 공유합니다
Use Cases

개발자가 Claude로 부부 상담 앱을 제작하고 프롬프트 엔지니어링 인사이트 공유합니다

한 개발자가 TherapAI(therapai.health)라는 커플용 프로그레시브 웹 앱을 만들었습니다. 이 앱에서 각 파트너는 Claude Sonnet으로 구동되는 개인 AI 동반자를 얻어 감정을 처리하고 준비가 되면 공유할 수 있습니다. 개발자는 Claude가 챗봇이 아닌 실제 치료사처럼 느껴지도록 만드는 데 도움이 된 다섯 가지 구체적인 프롬프트 엔지니어링 기법을 공유했습니다.

OpenClawRadar