LogoLogo
Lab

© 2026 Sung Yeop. All rights reserved.

DEV LOG

Trouble Shooting & Experiments

frontend

Frontend

모던 프론트엔드 인사이트와 CSS 스타일링 아이디어

backend

Backend

Spring Boot 서버사이드 솔루션과 고민들

infrastructure

Infrastructure

AWS 기반 인프라 트러블슈팅 노트

admin

Admin

자동매매, 보안 테스트, 그리고 개인 실험들

Lab

View all
Document
// pointer events · 정규화 좌표계 · LLM 변환(시뮬)

PDF 어노테이션 → AcroForm 변환기

스캔된 PDF엔 입력란이 없다. 그 위에 칸을 직접 그려 위치만 넘기면, 채울 수 있는 양식으로 구워진다. 좌표가 오가는 과정을 그대로 옮겨 봤다.

Interactive
// React · CSS 3D Transform · shiki

레이어드 아키텍처 익스플로러

컴포넌트 하나도 열어 보면 몇 겹의 책임이 쌓여 있다. 층을 띄워 두고 마우스를 올리면 그 층을 맡은 코드가 옆에 뜬다. 예시는 PDF 에디터의 네 개 층.

AI
// zustand store · CodeMirror 6 · codemirror-essentials-react

AI 인라인 Diff 에디터

글을 바로 고치는 대신, AI가 제안한 수정안을 자리에서 diff로 보여 준다. 어디가 어떻게 바뀌는지 확인하고 한 번에 받아들이거나 되돌린다.

Calendar
// click-to-assign · 공휴일 API · 본인부담금 계산

요양보호사 스케줄 캘린더

왼쪽에서 근무 조건을 잡고 달력을 클릭하면 그 설정대로 일정이 배정된다. 공휴일은 서버가 알고, 본인부담금은 클릭한 날짜에 따라 갈라진다.

Editor
useEditor({ extensions, onUpdate: renderMdx });

MDX Live Editor

Tiptap 기반 에디터에서 작성과 동시에 렌더되는 MDX 미리보기