진행 기간
2026.01 - 현재
핵심 기술
JavaScriptChrome APIManifest V3HTML5CSS3
const-tommy.dev
기록을 불러오는 중입니다
진행 기간
2026.01 - 현재
핵심 기술
"정답 감지부터 블로그 에디터 연결까지 1초 컷"
"TIL 기록이 귀찮아서 직접 만든 프로그래머스 전용 도구"
매일 코딩 테스트 문제를 풀고 개인 사이트에 TIL을 남기는데, 백준용 도구는 많아도 제가 주로 쓰는 프로그래머스용은 입맛에 맞는 게 없더라고요. 그래서 제가 사용하는 마크다운 양식에 맞춰 바로 기록할 수 있게 '바이브 코딩'으로 빠르게 만들어봤습니다.
| 분류 | 기술 스택 | 핵심 역할 |
|---|---|---|
| 환경 | Manifest V3 | 최신 크롬 확장 프로그램 규격 적용 |
| 로직 | Vanilla JS | 라이브러리 없이 가볍게 네이티브로만 구현 |
| 감지 | MutationObserver | 화면이 변할 때 정답 여부를 체크하는 센서 |
| 저장 | Chrome Storage | 내 블로그 주소 등 설정값 기억 |
"기록하는 시간조차 아끼고 싶은 나를 위해, 모든 과정을 자동화했습니다."
| 기능 | 설명 | 유저 경험 |
|---|---|---|
| 플랫폼 자유 선택 | 마크다운 TIL부터 벨로그 에디터까지 이중 지원 | 플랫폼 제약 없는 기록 |
| 원클릭 템플릿 | 문제 정보와 코드를 마크다운 양식으로 생성 | Ctrl + V로 회고 끝 |
| 제목 자동 완성 | 에디터의 제목 칸을 찾아 [Algorithm] 제목 입력 | 수동 입력 번거로움 제거 |
💡 눈치 빠른 정답 감지: MutationObserver를 통해 유저 눈에 진짜로 정답 모달이 보이는 '찰나'를 낚아채 정교하게 반응합니다.
⚙️ 프레임워크 대응: React나 Vue 기반 블로그에서도 데이터가 유실되지 않게 Input 이벤트를 강제 발생시키는 디테일을 챙겼습니다.
chrome.storage.sync를 통해 집, 카페 어디서든 내 설정이 유지됩니다."거창한 아키텍처보다, 실제 사용 시 거슬림이 없는 도구를 목표로 했습니다."
"정답 글자만 있다고 작동하지 않습니다." 프로그래머스는 SPA 구조라 단순히 텍스트만 찾으면 오작동할 수 있습니다. MutationObserver를 쓰되, 모달의 실제 노출 상태(offsetParent) 까지 체크해서 유저가 진짜 정답 화면을 마주한 그 찰나에만 팝업이 뜨도록 로직을 짰습니다.
"React/Vue 사이트에서도 값이 유실되지 않게," 요즘 에디터들은 단순히 value만 넣으면 저장이 안 됩니다. executeScript로 페이지 런타임에 직접 개입해 Input 이벤트를 강제 발생시켜, 어떤 에디터에서든 제목이 확실히 입력되게 처리했습니다.
현재 Chrome Web Store에 공식 배포되어 누구나 즉시 설치가 가능한 상태입니다.