프론트엔드/크롬확장 코드에 박힌 매직 넘버가 버그가 되는 순간: 사이드 프로젝트 MAX_RECENT=25 제거기 아무도 기억 못 하는 상수 `MAX_RECENT = 25`가 사용자에겐 "사라지는 탭" 버그였습니다. 왜 25였는지 추적했고, 답이 "그냥"이어서 지웠습니다. 임의의 제한이 코드 속에서 자라나 버그로 바뀌는 과정을 정리합니다.
프론트엔드/크롬확장 단일 크롬 확장에서 멀티테넌트 구현하기: Space Isolation 패턴과 30개 메시지 핸들러 스코핑기 하나의 크롬 확장 안에 여러 격리된 데이터 공간을 두려면 메시지 핸들러마다 "현재 공간" 개념을 주입해야 합니다. 30개 가까운 핸들러에 Space Isolation 패턴을 녹이고, cross-page sync를 깨지 않으면서, 리팩토링 부수 효과로 dead code까지 정리한 경험을 정리했습니다.
백엔드/인증-보안 Hono + Cloudflare Workers + D1로 라이선스 서버 만들기: Lemon Squeezy 웹훅 완전 가이드 사이드 프로젝트에 Pro 라이선스를 붙이려면 서버가 필요합니다. Cloudflare Workers + Hono + D1로 주말에 구축한 라이선스 서버, 그리고 Lemon Squeezy 웹훅 이벤트 순서 함정으로 하루를 날린 이야기를 공유합니다.
프론트엔드/크롬확장 크롬 확장에 위장 공간 만들기: AES-GCM과 티어드 패딩으로 Plausible Deniability 구현 단순 암호화는 내용만 숨기고 존재는 드러냅니다. 크롬 확장에서 Plausible Deniability를 달성하기 위해 AES-GCM 고정 슬롯, 티어드 패딩, CSPRNG, 그리고 Auto-Timeout UX까지 네 레이어를 쌓은 실전 사례를 공유합니다.
프론트엔드/크롬확장 크롬 확장 보안 강화: CSP와 최소 권한 원칙 크롬 확장은 강력한 권한을 가지므로 보안이 중요합니다. CSP로 인라인 스크립트와 동적 코드 실행을 차단하고, 불필요한 권한과 리소스 노출을 제거하여 공격 표면을 최소화했습니다.
프론트엔드/크롬확장 Chrome Alarms API로 자동 잠금 타이머 구현하기 Service Worker가 종료되면 setTimeout도 사라집니다. chrome.alarms API로 Service Worker 수명과 독립적인 자동 잠금 타이머를 구현했습니다.
프론트엔드/크롬확장 크롬 확장 다국어(i18n) 구현하기: 런타임 언어 전환까지 크롬 확장에서 다국어를 지원하려면 Chrome i18n API만으로는 부족합니다. 런타임 언어 전환, 선언적 번역 적용, 여러 페이지 동기화까지 지원하는 커스텀 i18n 모듈을 구현했습니다.
프론트엔드/크롬확장 Chrome Storage로 실시간 상태 동기화 구현하기 popup에서 잠금 해제했는데 options 페이지는 여전히 잠금 화면? chrome.storage.onChanged 이벤트로 여러 페이지 간 상태를 실시간 동기화하는 패턴을 정리했습니다.
프론트엔드/크롬확장 크롬 확장 공유 모듈 설계: 중복 코드 470줄 제거기 popup, options, manager, onboarding 4개 페이지에 복사된 동일한 코드를 발견했습니다. shared/ 폴더에 기능별 모듈로 추출하여 총 215줄을 줄이고, DOM 메서드로 XSS를 방지하는 아이콘 팩토리까지 구현한 과정을 공유합니다.
프론트엔드/크롬확장 크롬 확장 프로젝트 구조 정리하기: popup, options 폴더 분리 크롬 확장 루트 디렉토리에 뒤섞인 파일들을 기능별 폴더로 정리했습니다. manifest.json 경로 업데이트, git mv로 히스토리 보존, 트러블슈팅 팁까지 리팩토링 전 과정을 공유합니다.
프론트엔드/크롬확장 Web Crypto API로 안전한 해싱 구현하기: SHA-256에서 PBKDF2까지 단순 SHA-256 해싱의 보안 한계를 분석하고, Web Crypto API의 PBKDF2로 업그레이드하는 방법을 다룹니다. Timing Attack 방어를 위한 constant-time 비교와 클라이언트 Rate Limiting 패턴까지 실제 코드와 함께 설명합니다.
프론트엔드/크롬확장 JavaScript URL 비교와 정규화: 같은 페이지인데 다른 URL? 같은 페이지인데 URL 비교가 false? Fragment, trailing slash, query parameter 순서 차이로 인한 문제와 URL 정규화 해결책을 코드 예시와 함께 설명합니다.
