프론트엔드
크롬확장
i18n, storage, alarms, CSP
-
프론트엔드/크롬확장
코드에 박힌 매직 넘버가 버그가 되는 순간: 사이드 프로젝트 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로 히스토리 보존, 트러블슈팅 팁까지 리팩토링 전 과정을 공유합니다.
