JavaScript

MDM (Markdown+Media) ![[name:preset | attr=val]] 문법 하나로 이미지, 비디오, 오디오를 마크다운 문서에 자유롭게 임베드하고 제어하는 오픈소스 프로젝트입니다. 링크 주소 GitHub seunghan91/markdown-media · 최신 v0.3.0 (2026-04-16) Playground seunghan91.github.io/markdown-media/playground npm (Native) @markdown-media/core 1.0.0 — napi Node.js 바인딩 npm (WASM) @markdown-media/wasm 0.1.0 — 브라우저/Node 공용 WASM (PDF 포함, 1.5 MB) PyPI mdm-parser 0.1.0 데스크톱 앱 mdm-desktop v0.1.1 — macOS 코드사이닝 + 공증 완료 Chrome 확장 MDM Converter (HWP/PDF/DOCX → Markdown) — 오프라인 WASM, 권한 0개 · 심사 중 MCP 서버 law-check.com/api/mcp — mdm_convert_document · mdm_extract_text · mdm_detect_format 1분 세팅 — 상황별 최단 경로 상황 명령어 / 링크 데스크톱 앱 (GUI) mdm-desktop v0.1.1 에서 DMG 다운로드 → 드래그앤드롭 (공증 완료) Python pip install mdm-parser Node.js (Native) npm install @markdown-media/core 브라우저 / WASM npm install @markdown-media/wasm (PDF 포함 1.5 MB) CLI 파이프 cat file.hwp | hwp2mdm stream --ext hwp --mode body AI Agent (MCP) law-check.com에서 MCP 키 발급 → ~/.claude.json에 gateway 등록 MCP 설정 (Claude Code 예시) { "mcpServers": { "korea-law-hub": { "url": "https://law-check.com/api/mcp", "headers": { "Authorization": "McpKey YOUR_KEY" } } } } 설정 후 재시작하면 mdm_convert_document, mdm_extract_text, mdm_detect_format 3개 tool이 자동 로드된다. ...

PassPass 공공기관·금융 사이트에서 매번 반복되는 간편인증 정보 입력을 자동화하는 Chrome 확장프로그램입니다. 홈택스, 정부24, 민원24 등에서 본인인증 팝업이 열리면 이름·생년월일·휴대폰번호를 자동으로 입력하고, 선호하는 인증기관(PASS, 카카오, 토스 등)까지 자동으로 선택합니다. 주요 기능 간편인증(OACX) 자동입력 이름 / 생년월일 / 휴대폰번호 자동 입력 PASS · 카카오톡 · 토스 · 국민인증서 · 네이버 · 신한 · 하나 · 우리 · NH · 삼성패스 · 뱅크샐러드 자동 선택 KMC 휴대폰 본인인증 자동화 (kmcert.com) 통신사 자동 선택 (SKT / KT / LGU+ / 알뜰폰) SMS · PASS · QR 인증방식 자동 선택 이름 · 생년월일 · 주민번호 성별코드 · 휴대폰번호 자동 입력 NICE 본인인증 자동화 (nice.checkplus.co.kr) 통신사 · 인증방식 자동 선택 SMS 정보 입력 자동 처리 토스 인증 자동입력 (auth.cert.toss.im) 이름 · 휴대폰번호 · 생년월일 자동 입력 개인정보 수집·이용 동의 자동 체크 PIN 잠금 보안 숫자 4자리 PIN으로 개인정보 보호 브라우저 세션 종료 시 자동 잠금 지원 사이트 국세청 홈택스, 정부24, 국민건강보험공단, 국민연금공단, 행정안전부, 학점은행제, 법무부 전자공증, 대법원 전자소송, SRT, 우체국, 병무청, 복지로, 워크24 등 50개 이상의 공공·금융 사이트 및 KMC·NICE 인증 연동 사이트 전체를 지원합니다. ...

스터디를 운영하다 보면 세션 중간에 즉석으로 과제를 내야 할 때가 있다. 기존 관리자 페이지를 통하면 여러 단계를 거쳐야 하고, 멘티들은 새 과제가 생긴 걸 바로 알 수 없다는 문제가 있었다. 이 글에서는 새 모델 없이 기존 시스템을 재활용하여 깜짝 과제 기능을 만들고, 1회성 알림 배너로 멘티에게 즉시 알려주는 구현 과정을 정리한다. 문제 정의 과제 생성이 느리다: 관리자 대시보드에서 여러 필드를 채워야 한다 멘티가 모른다: 새 과제가 생겨도 목록을 직접 확인하기 전까지 알 수 없다 1회성이어야 한다: 알림을 본 뒤에는 다시 보여주지 않아야 한다 설계 결정: 새 모델 vs 기존 모델 재활용 처음에는 QuickAssignment나 Notification 같은 새 모델을 만들 수 있었지만, 분석해보니 기존 구조로 충분했다. ...

Chrome 확장을 유지보수하다 보면 “분명히 동작해야 하는데 왜 안 되지?“라는 상황을 꽤 자주 만난다. 이번에 짧은 시간 안에 4가지 실수를 연달아 저질렀고, 각각 원인이 달랐다. 기록해둔다. 1. 디스패치 블록의 return이 범용 감지를 막는다 Content script 끝부분에는 보통 이런 패턴이 있다. if (isSomeSpecificPage()) { doSomethingSpecific(); return; // ← 여기서 끝 } // 범용 DOM 감지 (MutationObserver 등) const observer = new MutationObserver(() => { ... }); observer.observe(document.body, { childList: true, subtree: true }); 특정 도메인에서만 동작하는 기능을 추가하면서 return으로 빠져나왔더니, 그 도메인의 팝업 창에서 범용 DOM 감지가 아예 실행되지 않았다. ...

Rails + ViewComponent + Lookbook 조합으로 컴포넌트 라이브러리를 만들 때, Stimulus 컨트롤러가 전부 스텁(빈 껍데기) 상태로 남아있는 상황을 맞닥뜨렸다. 13개 컨트롤러 중 3개만 동작하고 나머지 10개는 connect() {} 한 줄짜리였다. 이걸 전부 구현하면서 겪은 삽질을 정리한다. 이 글은 단순히 코드를 붙여넣는 게 아니라, 각 컨트롤러를 구현하면서 왜 그런 방식을 선택했는지, 어떤 문제가 발생했는지, 그리고 어떻게 해결했는지에 초점을 맞춘다. 구현 대상 총 11개 컨트롤러를 4단계로 나눠서 구현했다. 복잡도와 의존성을 기준으로 순서를 정했다. DOM 직접 조작 → 스크롤 연동 → RAF 애니메이션 → 인터랙티브 캐러셀 순서로 진행하면 각 단계에서 배운 패턴이 다음 단계에 자연스럽게 이어진다. ...

브라우저 확장 프로그램에서 form 자동입력 기능을 확장하면서 삽질한 내용들을 정리한다. 1. 다이렉트 자동차보험 사이트 content script 자동입력 문제: JS 렌더링 사이트는 WebFetch로 form 구조를 못 읽는다 한국 보험사 다이렉트 사이트들은 대부분 SPA/RIA 구조다. 삼성화재: SFMI 자체 RIA 프레임워크 현대해상, DB손보: Spring MVC .do URL 패턴 KB손보, 메리츠: 모바일/PC 별도 도메인 WebFetch로 URL을 긁어봤자 form 필드 구조가 나오지 않는다. 직접 접속해서 DevTools로 확인하거나, 업계 공통 패턴으로 커버하는 방법 중 후자를 선택했다. ...