TIL · 2026년 3월 22일 · 5분 소요 Mermaid 렌더링 안 되는 문제 — allowDangerousHtml 설정 Supabase 블로그 게시글의 Mermaid 다이어그램이 렌더링되지 않는 문제를 발견했다. remarkRehype의 allowDangerousHtml 설정이 false로 되어 있어 HTML 노드가 제거되고 있었다. mermaid remark rehype markdown troubleshooting
회고 · 2026년 3월 22일 · 13분 소요 블로그 개발일지 #7 — ISR과 Edge Function으로 실시간 배포 구현 Supabase에 게시글을 올리면 자동으로 사이트에 반영되는 시스템을 만들었다. Webhook payload 커스터마이즈 제약을 Edge Function으로 우회해서, 전체 재배포 없이 변경된 페이지만 재생성한다. vercel isr supabase edge-function webhook astro
회고 · 2026년 3월 22일 · 21분 소요 블로그 개발일지 #6 — rehype-pretty-code로 코드 블록 업그레이드 기본 Shiki 하이라이팅에서 rehype-pretty-code로 전환하여 라인 번호, 라인 하이라이트, diff 표시, 복사 버튼, 언어 라벨까지 모든 기능을 갖춘 코드 블록을 구현한 과정. 정규식 패턴 설계부터 CSS 변수 기반 스타일링, 클라이언트 스크립트까지 — 3시간의 업그레이드 기록. astro rehype-pretty-code shiki code-highlighting ux
회고 · 2026년 3월 21일 · 5분 소요 모바일 청첩장 만들기 (5) - 마무리 기능과 회고 방명록, 페이드인 애니메이션, 갤러리 버그 수정까지. 결혼식 한 달 전에 마무리한 모바일 청첩장 프로젝트의 최종 회고. 약 3개월 반의 개발 과정에서 배운 것들을 정리한다. react guestbook animation side-project wedding-invitation retrospective
회고 · 2026년 3월 21일 · 4분 소요 모바일 청첩장 만들기 (4) - 피드백 반영과 버그 수정 친구 커플과 가족에게 청첩장을 보여주고 피드백을 받았다. 폰트, 여백, 카카오맵 좌표 등 사소하지만 중요한 수정사항들을 빠르게 반영한 과정을 회고한다. user-feedback bug-fix mobile-ux kakao-map wedding-invitation side-project
회고 · 2026년 3월 21일 · 4분 소요 모바일 청첩장 만들기 (3) - 이미지 최적화와 성능 개선 모바일 청첩장은 사진이 대부분이다. JPEG를 WebP로 변환하고, LQIP 패턴을 적용하고, 폰트를 선택하는 과정에서 모바일 웹 성능 최적화를 경험했다. webp lqip image-optimization web-performance mobile-first wedding-invitation
회고 · 2026년 3월 21일 · 5분 소요 모바일 청첩장 만들기 (2) - 데이터 분리와 UX 개선 MVP를 만든 다음날부터 구조 개선에 들어갔다. 하드코딩된 데이터를 JSON으로 분리하고, 스와이프와 스크롤 스냅으로 모바일 UX를 끌어올린 과정을 회고한다. react typescript scroll-snap mobile-ux wedding-invitation side-project
회고 · 2026년 3월 21일 · 4분 소요 모바일 청첩장 만들기 (1) - 하루 만에 MVP 완성하기 React + TypeScript + Vite로 친구의 모바일 청첩장을 만들어주기로 했다. 프로젝트 세팅부터 핵심 기능 구현, 컴포넌트 분리까지 하루 만에 MVP를 완성한 과정을 회고한다. react typescript vite tailwindcss mobile-first wedding-invitation side-project
TIL · 2026년 3월 20일 · 7분 소요 정규식 앵커와 멀티라인 텍스트 — GFM Alert 렌더링 버그 수정기 블로그의 GFM Alert가 렌더링되지 않던 문제를 해결했다. 원인은 remarkCallout 플러그인의 정규식 패턴이 ^ 와 $ 앵커를 사용해 멀티라인 텍스트 노드를 매칭하지 못했기 때문이다. s 플래그를 추가해 dotAll 모드를 활성화하는 것으로 해결했다. astro markdown regex gfm-alerts remark
인프라 · 2026년 3월 20일 · 10분 소요 ECS 사이드카 패턴으로 Loki에 로그 전송하기 — FireLens, Fluent Bit, Alloy 비교 AWS ECS에서 사이드카 패턴으로 Grafana Loki에 로그를 보내는 3가지 방법을 비교한다. FireLens + Fluent Bit 직접 전송, Fluent Bit → Alloy 파이프라인, EC2 전용 Alloy 단독 사이드카까지 — 각 방식의 구조, 설정, 트레이드오프를 정리한다. aws ecs loki fluent-bit firelens grafana logging
회고 · 2026년 3월 20일 · 10분 소요 블로그 개발일지 #4 — Supabase로 콘텐츠 관리 아키텍처 전환 로컬 MDX 파일 기반 블로그를 Supabase로 마이그레이션한 이유와 과정을 기록한다. 커스텀 Astro 로더 구현, MCP 서버 역할 변화, MDX에서 Markdown으로의 전환까지 — 아키텍처를 뒤집은 일주일의 기록. claude-code ai astro supabase architecture
인프라 · 2026년 3월 19일 · 9분 소요 MongoDB Atlas Private Endpoint 연결 가이드 — AWS PrivateLink 삽질기 Default VPC Public Subnet EC2에서 MongoDB Atlas Private Endpoint를 연결하는 과정과 DNS 동작 방식, Security Group 설정, 포트 범위의 이유까지 — 실제 삽질을 통해 정리한 트러블슈팅 가이드. aws mongodb private-endpoint privatelink vpc networking troubleshooting
인프라 · 2026년 3월 19일 · 6분 소요 AWS VPC 핵심 개념 정리 — 서브넷, AZ, IGW, Interface Endpoint VPC, 서브넷, 가용영역(AZ), 인터넷 게이트웨이, Interface Endpoint까지 — MongoDB Atlas Private Endpoint를 설정하다 헷갈렸던 AWS 네트워크 개념들을 한 번에 정리한다. aws vpc subnet networking private-endpoint
인프라 · 2026년 3월 19일 · 5분 소요 AWS VPC Flow Logs 활성화 및 Endpoint 트래픽 확인 가이드 VPC Flow Logs가 무엇인지, 어떻게 켜는지, 그리고 Interface Endpoint의 실제 사용 여부를 확인하는 방법을 정리한다. aws vpc flow-logs vpc-endpoint networking
아티클 · 2026년 3월 18일 · 8분 소요 LLM API 비용 추적 설계 — Gemini를 예시로 Gemini API 호출 한 번에 발생하는 비용을 정확히 파악하려면 어떤 데이터를 저장해야 하는지, DB 로그 설계부터 후처리 비용 역산 흐름까지 정리합니다. llm gemini cost-tracking db-design backend
아티클 · 2026년 3월 18일 · 12분 소요 Volta vs NVM — Node.js 버전 관리 도구 비교 Git hooks에서 발생한 NVM 이슈를 해결하며 알게 된 Volta. NVM과 Volta의 근본적인 차이점, 각 도구의 장단점과 적합한 사용 사례를 실제 경험을 바탕으로 정리합니다. nodejs volta nvm tooling devops developer-experience
TIL · 2026년 3월 17일 · 5분 소요 ECS → ECR 연결 실패 트러블슈팅 — VPC 엔드포인트 Private DNS의 함정 퍼블릭 서브넷에 있는 ECS 태스크가 ECR에 연결하지 못한 이유와, VPC 엔드포인트 보안 그룹 설정으로 해결한 과정을 정리합니다. aws ecs ecr vpc networking troubleshooting
아티클 · 2026년 3월 15일 · 19분 소요 선택적 Hydration 파헤치기 — client:* 지시어는 내부에서 어떻게 동작하는가 Astro의 client:load, client:idle, client:visible, client:media가 각각 어떤 브라우저 API 위에 구현되는지, connectedCallback과 hydrateRoot의 실제 코드를 들여다봅니다. astro frontend hydration custom-elements requestIdleCallback IntersectionObserver web-performance
아티클 · 2026년 3월 15일 · 12분 소요 Astro는 어떻게 동작하는가 — Islands Architecture와 Zero JS의 진짜 의미 Astro의 핵심 철학인 Islands Architecture와 Zero JS by default가 실제로 어떻게 구현되는지, 그리고 Next.js/Remix와 무엇이 근본적으로 다른지 파헤칩니다. astro frontend islands-architecture hydration nextjs remix web-performance
아티클 · 2026년 3월 15일 · 12분 소요 AWS ECS 아키텍처 단순화 — API Gateway가 꼭 필요할까? API Gateway + VPC Link + Internal ALB + Private ECS 구조를 해체하고, Host-based routing으로 ALB 1개에 통합하는 방법, 그리고 이 과정에서 배운 아키텍처 의사결정 원칙을 정리합니다. aws ecs alb api-gateway vpc architecture infra decision-making
회고 · 2026년 3월 15일 · 11분 소요 블로그 개발일지 #3 — OG 이미지, 공유 버튼, 그리고 remark 플러그인 카카오톡에서 한글이 깨지는 OG 이미지 수정, 공유 버튼 구현, 이미지 최적화 도입, Mermaid remark 플러그인까지 — 블로그를 다듬어간 네 가지 개선 작업을 기록한다. claude-code ai astro blog dx
회고 · 2026년 3월 15일 · 10분 소요 블로그 개발일지 #2 — 세 가지 버그와 정적 사이트의 함정 모바일 메뉴 렌더링 깨짐, 카테고리 필터 미동작, 하드코딩된 카테고리 목록까지 — Astro 정적 블로그에서 만난 세 가지 버그를 해결한 과정을 기록한다. claude-code ai astro blog debugging
회고 · 2026년 3월 15일 · 5분 소요 블로그 개발일지 #1 — Claude Code로 하루 만에 블로그 만들기 Astro + React + Tailwind 기술 블로그를 Claude Code와 협업하여 구축한 첫 번째 개발일지입니다. claude-code ai astro blog dx
TIL · 2026년 3월 15일 · 6분 소요 프로젝트별 GitHub 계정 분리하기 — SSH Key + Git Config 하나의 머신에서 여러 GitHub 계정을 프로젝트별로 사용하는 방법을 SSH key 분리와 로컬 git config 설정으로 해결합니다. git github ssh
아티클 · 2026년 3월 15일 · 7분 소요 MCP 완전 정복 3편 — SSE에서 Streamable HTTP로 SSE의 구조적 한계와 2025년 3월 Streamable HTTP로 전환한 이유, 그리고 실무에서의 의미를 설명합니다. mcp sse http-streaming protocol transport
아티클 · 2026년 3월 15일 · 6분 소요 MCP 완전 정복 2편 — JSON-RPC 2.0과 직렬화 MCP 통신의 핵심인 JSON-RPC 2.0 메시지 구조를 설명하고, 직렬화/역직렬화가 실제로 어떻게 일어나는지 단계별로 살펴봅니다. mcp json-rpc protocol serialization
아티클 · 2026년 3월 15일 · 5분 소요 MCP 완전 정복 1편 — 개념과 아키텍처 Model Context Protocol이 무엇인지, Host·Protocol·Server 세 계층이 어떻게 맞물려 동작하는지 요청 흐름 중심으로 설명합니다. mcp ai protocol architecture