코딩하다 커피 쏟음

AlphaEvolveGeminiGoogle DeepMind

AlphaEvolve — Google DeepMind의 Gemini 기반 알고리듬 발견 에이전트

AlphaEvolve는 수학·컴퓨터 과학 공개 문제부터 Google 인프라 최적화까지, 인간 전문가 수준의 알고리듬을 자율 설계하는 Gemini 기반 코딩 에이전트다.

Claude CodePluginSuperpowers

Superpowers 플러그인 — Claude Code에 14개 스킬을 주입하는 오픈소스 에이전트 프레임워크

obra/superpowers 플러그인이 Claude Code의 기본 동작을 어떻게 바꾸는지, 7단계 워크플로우와 14개 스킬 구조를 실제 설치 방법과 함께 분석한다.

2026년 5월 11일10 min read

Lighthouse 13.3 Agentic Browsing — AI 에이전트가 내 웹사이트를 잘 탐색할 수 있나

Google Lighthouse에 새로 추가된 Agentic Browsing 카테고리는 AI 에이전트가 사이트를 얼마나 잘 이해할 수 있는지를 측정한다.

LighthouseAI에이전트

LLM 위임의 함정 — 문서 편집을 맡기면 25%가 훼손된다

DELEGATE-52 벤치마크에서 GPT, Claude, Gemini 모두 위임형 문서 편집 시 평균 25% 문서를 훼손하는 것으로 나타났다.

LLMAI에이전트

LLM Wiki 패턴 — Karpathy가 제안한 지식 컴파일 전략의 실증 결과

Karpathy의 LLM Wiki 아이디어를 72-run 벤치마크로 검증한 결과, Vanilla 대비 토큰 53% 절감·처리 시간 39% 단축·품질 향상을 확인했다.

LLMAI에이전트

우로보로스 패턴 — 자기 자신을 반복 호출하는 재귀적 AI 에이전트 아키텍처

AI 에이전트가 자신의 출력을 다음 입력으로 사용하는 우로보로스 패턴의 원리, 실제 구현 사례, 그리고 Claude Code에서 이 패턴을 어떻게 적용할 수 있는지 분석한다.

AI Agent우로보로스재귀 패턴

2026년 5월 11일13 min read

VS Code 1.118 — 원격 에이전트 제어, 의미 기반 검색, Chronicle

Copilot CLI 원격 모니터링, 전체 워크스페이스 시맨틱 인덱싱, Chronicle 세션 기록 검색까지 1.118의 핵심 AI 기능을 살펴본다.

VS Code에이전트AI

VS Code 1.119 — 에이전트 브라우저 통합과 OpenTelemetry 추적

에이전트가 브라우저 탭을 직접 열고 검증하는 통합 기능과, 에이전트 행동을 OpenTelemetry로 관찰하는 기능이 추가된 1.119를 살펴본다.

VS Code에이전트AI

VS Code Copilot BYOK — 내 API 키로 원하는 모델 골라 쓰기

Bring Your Own Key 기능으로 OpenRouter, Ollama, Cerebras 등 원하는 모델을 VS Code에서 직접 사용하는 방법을 설명한다.

VS CodeCopilotAI

2026년 5월 11일6 min read

VS Code Copilot 커스텀 인스트럭션 — AI를 팀 스타일로 길들이는 법

.github/copilot-instructions.md 파일 하나로 Copilot이 프로젝트의 코딩 표준과 워크플로우를 자동으로 따르게 만드는 방법을 설명한다.

CopilotAIVS Code

VS Code 통합 에이전트 경험 — 코딩 에이전트를 한 곳에서 관리하는 법

Agent Sessions, Planning Agent, Subagents를 통해 여러 코딩 에이전트를 VS Code 하나에서 통합 관리하는 새 경험을 살펴본다.

VS Code에이전트Copilot

AI 에이전트 프롬프트 캐싱 — 응답 속도를 높이는 공짜 최적화

AI 에이전트에서 시스템 프롬프트와 도구 정의를 캐싱해 응답 속도를 높이는 프롬프트 캐싱의 동작 원리와 설정 방법을 정리한다.

AILLMAgent

2026년 5월 4일9 min read

TypeScript

FSD 아키텍처 — 코드 위치를 고민할 필요가 없어지는 설계

카카오페이가 프론트엔드 코드 구조를 개선하기 위해 FSD를 도입한 과정, 핵심 개념, 실제 폴더 구조를 정리한다.

FSD아키텍처프론트엔드

2026년 5월 4일10 min read

카카오페이 MCP Agent Toolkit — AI 에이전트로 결제 API 연동하기

카카오페이 개발팀이 MCP 표준으로 결제 Open API를 AI 에이전트에 연결한 방법과 실제 코드 구조를 살펴본다.

MCPAILLM

2026년 5월 4일8 min read

LLM 내부 동작 원리 — 백엔드 개발자를 위한 6단계 해설

토크나이징부터 반복 디코딩까지, LLM이 텍스트를 처리하는 6단계 과정을 코드와 비유로 풀어본다.

LLMAI딥러닝

2026년 5월 4일13 min read

Nuxt MCP Server — AI가 내 앱 문서를 직접 읽게 만들기

Nuxt가 공개한 MCP 서버 구축 방법과 @nuxtjs/mcp-toolkit으로 Resource, Tool, Prompt를 정의하는 실전 패턴을 정리한다.

MCPNuxtAI

2026년 5월 4일9 min read

Anthropic Managed Agents — AI 에이전트 인프라를 플랫폼에 넘기다

오케스트레이션, 세션 상태, 샌드박스를 직접 구축하지 않아도 되는 Anthropic 관리형 에이전트 플랫폼의 구조와 트레이드오프를 분석한다.

AnthropicAI 에이전트Claude

2026년 4월 27일9 min read

Claude CodeFigma MCPUX Writing

Claude Code + Figma MCP — UX 라이팅 리소스 50% 절감 실전기

수치화된 톤 스펙트럼과 Figma MCP 자동화로 반복 작업을 AI에게 넘기고 팀이 맥락과 사용자 경험에 집중하게 만든 과정을 정리한다.

2026년 4월 27일8 min read

Claude Code프롬프트 엔지니어링AI 에이전트

Claude Code 프롬프트 재현성 — 암묵지를 제거하는 자동 튜닝 워크플로우

작성자와 평가자를 분리하고 서브에이전트로 반복 실행해 프롬프트 품질을 객관적으로 끌어올리는 실전 방법론을 정리한다.

2026년 4월 27일9 min read

Google Cloud 멀티 에이전트 — A2A와 MCP로 만드는 5가지 통합 패턴

에이전트 간 통신을 위한 A2A와 외부 도구 연결을 위한 MCP가 Google Cloud에서 어떻게 통합되는지, 5가지 패턴으로 정리한다.

멀티 에이전트A2AMCP

2026년 4월 27일9 min read

mini-swe-agent — 100줄짜리 AI가 GitHub 이슈를 해결하는 방법

SWE-bench verified 74% 달성에도 핵심 코드가 100줄인 최소주의 AI 코딩 에이전트의 아키텍처와 동작 원리를 분석한다.

AI 에이전트SWE-bench오픈소스

2026년 4월 27일8 min read

AI AgentHarnessClaude Code

Agent Harness Engineering — AI 에이전트 성능을 결정하는 진짜 변수

모델보다 harness가 에이전트 성능을 더 크게 좌우한다는 사실을 Terminal Bench 결과와 함께 검증한다.

2026년 4월 22일10 min read

AWS DevOps Agent — MTTR 75% 감소를 만든 자율 인시던트 대응 에이전트

Amazon Bedrock AgentCore 기반의 AWS DevOps Agent가 인시던트를 자율 조사하는 방식과 MCP 확장, 94% 루트 코즈 정확도를 분석한다.

AWSDevOpsAI 에이전트

2026년 4월 22일8 min read

Cloudflare Agent Memory — 에이전트가 기억을 갖는 방법

Cloudflare가 공개한 관리형 Agent Memory 서비스의 수집·검색 파이프라인과 실제 API 사용법을 분석한다.

CloudflareAI AgentMemory

2026년 4월 22일10 min read

CloudflareAI AgentWorkers

Cloudflare Agents Week 2026 — 에이전트 클라우드가 온다

Cloudflare가 Agents Week에 발표한 컴퓨팅, 보안, 메모리, AI 추론 인프라를 한 번에 정리한다.

2026년 4월 22일9 min read

Cloudflare AI 코드 리뷰 — 48,000건 MR을 AI로 검토한 실전 아키텍처

Cloudflare가 48,095건의 머지 요청에 AI 코드 리뷰를 적용한 방식과 리스크 티어, 조정자 패턴, 프롬프트 주입 방지 구현을 분석한다.

AI코드 리뷰Cloudflare

2026년 4월 22일9 min read

Cloudflare 내부 AI 스택 — 93% 개발자 채택률을 만든 방법

Cloudflare가 자사 제품으로 내부 AI 엔지니어링 인프라를 구축하고 R&D 93%를 1년 안에 채택시킨 아키텍처와 운영 전략을 분석한다.

CloudflareAI에이전트

2026년 4월 22일9 min read

GitHub이 eBPF로 배포 안전성을 높이는 방법 — 순환 의존성 차단기

GitHub이 배포 스크립트의 GitHub.com 의존성을 eBPF로 감지하고 차단해 배포 순환 의존성 문제를 해결한 방법을 분석한다.

eBPFGitHub배포

2026년 4월 22일7 min read

Apache FlinkRocksDB실시간 처리

Toss의 Apache Flink + RocksDB 튜닝 — 광고 집계를 일주일로 늘린 방법

토스가 광고 Frequency Capping을 위해 Flink + RocksDB를 튜닝해서 1분~7일 슬라이딩 집계를 단일 Redis 조회로 제공한 여정을 분석한다.

2026년 4월 22일8 min read

VS Code 1.117 — BYOK와 점진적 채팅 렌더링의 등장

VS Code 1.117에서 추가된 Bring Your Own Key, 점진적 채팅 렌더링, VS Code Agents App, TypeScript 6.0.3 업데이트를 정리한다.

VS CodeCopilotBYOK

2026년 4월 22일8 min read

에이전틱 워크플로우의 멘탈 프레임워크 — AI에게 일을 맡기는 사고 체계

AI 에이전트에게 작업을 위임할 때 필요한 5단계 사고 모델을 정리한다.

AIAgentic WorkflowAgent

AI 에이전트 프로토콜 완전 정리 — MCP, A2A, AG-UI 무엇을 언제 쓰나

AI 에이전트 생태계를 지탱하는 6가지 표준 프로토콜의 역할 차이와 선택 기준을 정리한다.

MCPA2AAI Agent

2026년 4월 21일10 min read

뱅크샐러드의 LLM 코드 안전화 — DSL로 Vibe Coding을 프로덕션에 쓰는 법

LLM이 생성한 코드를 프로덕션에서 안전하게 실행하기 위해 뱅크샐러드가 선택한 DSL 기반 전략을 해부한다.

AILLMVibe Coding

2026년 4월 21일8 min read

Claude Code FDE Night 2026 — 기업 AX 전환 최전선의 현장 목소리

서울에서 열린 Claude Code FDE Night 세미나에서 나온 기업 AI 전환 전략과 현장 경험을 정리한다.

Claude CodeAXFDE

2026년 4월 21일10 min read

Context Engineering — 에이전트 품질을 결정하는 진짜 레버

프롬프트 엔지니어링을 넘어선 컨텍스트 엔지니어링의 4가지 구성요소와 실전 패턴을 정리한다.

AIContext EngineeringLLM

AICoding AgentSoftware Engineering

Cursor Rules 47종 모음 — 16개 프레임워크용 AI 코딩 규칙

React, Next.js, Django 등 주요 프레임워크에 맞춘 Cursor 룰 파일의 구조와 선택 기준을 정리한다.

CursorAIRules

2026년 4월 21일6 min read

Factory Model — 코딩 에이전트가 바꾼 소프트웨어 엔지니어링의 구조

Addy Osmani가 제안한 '공장 모델'로 AI 코딩 시대의 엔지니어 역할 변화를 짚는다.

Gemini CLIAI AgentSubagent

Gemini CLI 서브에이전트 — 전문 AI 팀을 터미널에서 구성하는 법

Gemini CLI에 도착한 서브에이전트 기능으로 복잡한 작업을 전문화된 AI에게 위임하는 방법을 알아본다.

2026년 4월 21일8 min read

GenUI vs. Vibe Coding — AI가 UI를 결정할 때와 내가 결정할 때

AI가 인터페이스를 생성하는 두 접근법의 핵심 차이와 각각이 적합한 맥락을 분석한다.

GenUIVibe CodingAI

2026년 4월 21일10 min read

Jira 티켓 조사 자동화 — Claude Code + MCP로 반복 작업 날리기

Jira 티켓 분석, 재현, 원인 추적까지 Claude Code와 MCP로 자동화하는 실전 워크플로우를 정리한다.

Claude CodeMCPJira

AI 코딩 시대 — 성장이 멈추는 개발자의 뇌에서 일어나는 일

AI에 의존할수록 AI를 잘 쓰기 어려워진다는 역설을 신경과학과 인지심리학으로 분석한다.

AI 코딩개발자 성장학습 심리학

2026년 4월 20일17 min read

배민 다국어 서비스 — 5년 백로그를 LLM으로 19일에 끝낸 이야기

5년간 미루던 다국어 번역 파이프라인을 Claude Haiku에서 Amazon Nova로 전환하며 19일 만에 완성한 우아한형제들의 기술 스택과 구현 구조.

LLM다국어번역 자동화

Bun v1.3.12 — 브라우저 자동화와 인프로세스 Cron이 기본 내장됐다

Playwright 없이 브라우저를 제어하는 Bun.WebView, 그리고 서버 재시작 없이 작업을 스케줄링하는 Bun.cron의 기술적 구조.

Bun브라우저 자동화cron

Chrome Built-in AISummary APIofficeParser

Chrome Built-in AI — 브라우저에서 Word·Excel·PPT·PDF를 AI로 요약하기

officeParser로 오피스 문서를 텍스트로 파싱하고, Chrome Summary API로 브라우저 내에서 AI 요약을 생성하는 방법을 다룬다.

Chrome Built-in AILanguageModelOCR

Chrome Built-in AI — LanguageModel API로 이미지에서 텍스트 추출하기

Chrome의 LanguageModel API를 사용해 서버 없이 브라우저에서 이미지 OCR을 구현하는 방법과 실제 테스트 결과를 정리한다.

CSSanimation-timelinescroll()

CSS animation-timeline — 스크롤 오버플로우를 감지해 Border-Radius 동적 조절하기

CSS scroll() 타임라인으로 컨테이너 오버플로우를 감지하고 border-radius를 자동 조절하는 순수 CSS 트릭을 정리한다.

12컬럼 그리드 없이 반응형 레이아웃 — CSS Grid와 Flexbox 비교

Bootstrap의 12컬럼 시스템을 CSS Grid와 Flexbox만으로 대체하는 현대적 레이아웃 패턴을 비교한다.

CSSGridFlexbox

CSS linear() Easing — 자바스크립트 없이 스프링 애니메이션 만들기

CSS linear() 함수로 바운스와 탄성을 가진 스프링 애니메이션을 순수 CSS만으로 구현하는 방법을 정리한다.

CSSanimationlinear()

HetznerDigitalOcean서버 마이그레이션

DigitalOcean에서 Hetzner로 — 월 $1,432를 $233으로 줄인 무중단 이전기

6단계 무중단 이전 절차로 248GB 데이터와 65GB 파일을 다운타임 0분으로 이전한 실전 마이그레이션 기록이다.

Frontend Dogma RSS 유료화 — 개발자 뉴스레터 지속 가능성의 딜레마

Frontend Dogma의 전체 RSS 피드가 연 12달러 유료 기능으로 전환됐다. 독립 기술 미디어의 생존 문제를 들여다본다.

RSS오픈소스미디어

GitHub Copilot 메트릭 대시보드 — 팀 AI 코딩 효율을 수치로 보는 법

오픈소스 GitHub Copilot 메트릭 대시보드로 팀 단위 AI 코딩 도입 효과를 측정하고 시각화하는 방법을 살펴본다.

GitHub CopilotAI 코딩메트릭

하네스 엔지니어링 — 팀을 위한 AI 개발 환경을 설계하는 방법

프롬프트를 잘 쓰는 게 아니라 AI가 일하는 환경을 설계하는 것. 우아한형제들이 Rules와 Skills로 팀 맞춤형 AI 워크플로를 구축한 사례.

AIClaude Code개발 자동화

MDN이 React를 버린 이유 — 콘텐츠 사이트에서 Web Components가 맞는 선택인 이유

13년간 React 기반으로 운영하던 MDN이 Web Components와 자체 서버 컴포넌트 시스템으로 프론트엔드를 전면 재구축한 배경과 기술적 판단.

Web ComponentsMDNReact

Node.js 인기 레포 6개의 미문서 환경변수 — 스캔 결과 공개

Express, NestJS, Supabase 등 6개 Node.js 프로젝트를 스캔해 실제 env 사용량과 문서화 수준의 격차를 분석한다.

Node.js환경변수보안

npm 패키지 2주 다운로드 추적 — 데이터로 보는 배포 채널 효과

텍스트 분석 라이브러리를 배포하고 2주간 모든 다운로드와 트래픽 소스를 추적한 실제 데이터를 공개한다.

npm오픈소스배포

무료 npm 패키지를 유료 REST API로 — Cloudflare Workers 기반 아키텍처

JavaScript 전용 텍스트 분석 패키지를 모든 언어에서 쓸 수 있는 유료 API로 변환한 실제 아키텍처를 분석한다.

npmCloudflare WorkersAPI

pnpm 모노레포에서 React 19로 단계적 마이그레이션하기 — 타입 오염 문제와 해결

우아한형제들이 pnpm catalogs로 React 18/19를 동시에 운영하다 마주친 98개 타입 에러의 원인과 packageExtensions 해결법.

pnpmReact 19모노레포

2026년 4월 20일7 min read

Frontend

React Gantt 차트 라이브러리 벤치마크 — 6개 직접 비교

SVAR, DHTMLX, Bryntum, Syncfusion, DevExtreme, KendoReact를 100,000개 태스크 기준으로 로딩 속도, 스크롤, CRUD 성능을 비교한다.

ReactGantt성능

2026년 4월 20일7 min read

VS Code 1.115 — 에이전트 앱 프리뷰와 터미널 도구 확장

병렬 에이전트 세션 관리를 위한 VS Code Agents App과 백그라운드 터미널 자동화 기능이 추가된 1.115 릴리즈를 살펴본다.

VS Code에이전트AI

webpage-mcp — 기존 브라우저를 AI 에이전트 MCP 서버로 바꾸는 도구

Chrome 확장으로 브라우저를 MCP 서버로 변환해 AI 에이전트가 기존 로그인 세션을 활용한 웹 자동화를 가능하게 하는 도구를 살펴본다.

MCP브라우저 자동화AI 에이전트

2026년 4월 20일7 min read

Frontend

Zustand 소프트 삭제 — enumerable:false로 컴포넌트 크래시 없이 처리하기

JavaScript property descriptor의 enumerable 플래그를 활용해 삭제된 엔티티를 투명하게 처리하는 Zustand 패턴을 소개한다.

Zustand상태 관리JavaScript

2026년 4월 18일6 min read

SVG 아이콘 — 코드 배포 없이 프로덕트 팀이 직접 관리하는 법

CSS mask-image와 S3를 조합해 개발자 개입 없이 아이콘을 교체하는 패턴을 소개한다.

SVGCSS아이콘

2026년 4월 17일6 min read

VS Code 1.116 — 에이전트 디버깅, 포그라운드 터미널, 내장 Copilot

2026년 4월 VS Code 1.116이 에이전트 경험, 터미널, Chat UX, 내장 브라우저를 개선한 핵심 변경사항을 정리한다.

VS Code1.116Copilot

2026년 4월 16일12 min read

Naver FE NewsTemporalTypeScript

Naver FE News 2026년 4월 — 49MB 웹 페이지부터 Temporal Stage 4까지

Naver FE News 2026년 4월호에서 프론트엔드 개발자가 주목할 6가지 소식을 선별해 정리한다.

2026년 4월 14일12 min read

VS Code 에이전트 — 실전 개발에서 쓸 수 있게 만드는 세 가지 축

VS Code 1.110이 도입한 컨텍스트 관리, 에이전트 제어, 확장성 기능이 AI 에이전트를 실무에 투입 가능하게 만든 방식을 분석한다.

VS CodeAI AgentCopilot

2026년 4월 12일11 min read

node:vfs — Node.js에 가상 파일 시스템이 필요한 이유

Matteo Collina가 제안한 node:vfs 모듈이 해결하려는 4가지 문제와 아키텍처를 분석한다.

Node.jsVFSnode:vfs

2026년 4월 10일11 min read

Astro OAuth — Google 로그인부터 캘린더 API 연동까지

Astro에서 OAuth 2.0으로 Google 로그인을 구현하고 Calendar API까지 연동하는 전체 과정을 코드와 함께 정리한다.

AstroOAuthGoogle

2026년 4월 8일11 min read

envscan — .env.example을 손으로 관리하지 말자

코드에서 process.env 참조를 스캔해 .env.example을 자동 생성하는 envscan의 접근 방식과 기존 도구들과의 차이를 정리한다.

Node.js환경 변수DX

2026년 4월 7일9 min read

HTML Minifier 벤치마크 — 48개 사이트에서 어떤 도구가 이겼나

minify-html, htmlnano, HTML Minifier Next, @swc/html 등 주요 HTML 압축 도구를 실제 사이트로 비교한 벤치마크 결과와 선택 기준을 정리한다.

HTMLMinifier성능

2026년 4월 7일11 min read

JavaScript 이미지 프리로딩 — 5가지 방법 비교

new Image, link preload, hidden div, Cache API, fetch — 각 프리로딩 방식의 장단점과 상황별 선택 기준을 정리한다.

JavaScript성능이미지

2026년 4월 7일11 min read

React

React 상태 올리기 — 대부분의 경우 하지 않는 게 낫다

React에서 습관적으로 lift state up을 하는 안티패턴을 살펴보고, 상태를 쓰는 곳 가까이 두는 편이 왜 더 나은지 정리한다.

React상태 관리useState

2026년 4월 7일10 min read

CSS 한 줄로 업그레이드 — 지금 바로 적용할 수 있는 12가지 모던 CSS 속성

aspect-ratio부터 scrollbar-gutter까지, 한 줄 추가로 스타일시트를 현대화하는 12가지 CSS 속성을 정리한다.

CSS모던 CSS프론트엔드

2026년 4월 6일12 min read

CSSContainer QueriesCascade Layers

모던 CSS 컴포넌트 아키텍처 — 네이티브 기능만으로 설계하는 컴포넌트 시스템

CSS Nesting, Cascade Layers, Container Queries, :has() 등 네이티브 CSS 기능으로 컴포넌트 기반 아키텍처를 구축하는 방법을 정리한다.

2026년 4월 4일12 min read

Physics EngineCanvas게임 개발

JavaScript 물리 엔진 만들기 — 100줄로 구현하는 2D 물리 시뮬레이션

벡터 연산, 원 충돌 감지, 충격량 기반 응답까지 순수 JavaScript로 2D 물리 엔진을 직접 만든다.

2026년 4월 2일11 min read

Angular 1에서 React로 — Strangler 패턴으로 1년간 점진적 마이그레이션한 이야기

대규모 티켓 플랫폼을 Angular 1에서 React로 마이그레이션하면서 적용한 Strangler 패턴과 7가지 교훈을 정리한다.

ReactAngularMigration

2026년 3월 31일11 min read

Cloudflare WorkersA/B TestingEdge Computing

Cloudflare Workers로 A/B 테스트 — 엣지에서 실험 분기하기

클라이언트 사이드 A/B 테스트가 렌더링을 막는 문제를 Cloudflare Workers로 해결하는 방법을 정리한다.

2026년 3월 29일10 min read

AI 코딩의 맹점 — Artifacts 없이 에이전트는 기억을 잃는다

PRD, ADR, TDD가 AI 코딩 워크플로우에서 왜 선택이 아닌 필수인지, 실전 구조와 함께 살펴본다.

AI 코딩ArtifactsPRD

2026년 3월 28일10 min read

Next.jsi18nNext-Translate

Next-Translate 3.0 — Turbopack과 App Router를 위한 i18n 재건

1년간 공백 후 돌아온 Next-Translate 3.0이 Turbopack 지원, 비동기 params, App Router 안정화를 한 번에 처리하는 방법.

2026년 3월 27일7 min read

V8 WasmGC 투기적 최적화 — 가상 메서드를 인라인으로 만드는 법

V8이 WasmGC의 가상 메서드 디스패치에 투기적 인라이닝을 도입해 Dart와 Java 앱에서 최대 8% 성능을 끌어낸 방법.

V8WebAssemblyWasmGC

2026년 3월 26일7 min read

Vinext — Vite 위에서 Next.js를 1주일 만에 다시 만든 이야기

Cloudflare가 AI와 함께 단 일주일, $1,100의 API 비용으로 Next.js 호환 프레임워크를 Vite 위에 구축한 과정.

VinextNext.jsVite

2026년 3월 25일6 min read

TypeScript

Tsonic — TypeScript를 네이티브 바이너리로 컴파일하는 실험

TypeScript → C# → NativeAOT 파이프라인으로 네이티브 실행 파일을 만드는 Tsonic. 어떻게 동작하고, 어떤 한계가 있는지 살펴봤다.

TypeScriptNativeAOT.NET

2026년 3월 24일6 min read

VS Code 팀의 AI 에이전트 병렬화 — 월간 릴리스를 주간으로 만든 워크플로우

VS Code 팀이 월간 릴리스에서 주간 릴리스로 전환한 비결. 에이전트 세션 병렬화, 자동화 파이프라인, 품질 게이트 설계 전반을 공개했다.

VS CodeAIGitHub Copilot

2026년 3월 19일7 min read

React Compiler의 한계 — 뭘 최적화하고 뭘 못 하는가

React Compiler가 자동 메모이제이션으로 해결하는 것과 해결하지 못하는 것. 컴파일러 기반 UI 프레임워크의 능력 경계를 정리했다.

ReactReact Compiler성능

2026년 3월 12일6 min read

Native JSON Modules — 번들러 없이 JSON을 import하는 시대

Import Attributes와 함께 표준이 된 native JSON module. 어떻게 동작하고, 기존 번들러 방식과 뭐가 다른지 정리했다.

JavaScriptESMJSON

2026년 3월 5일6 min read

Babel 7.29.0 — 10년 역사의 마지막 마이너, 그리고 8 RC1

2026년 1월 31일, Babel 7의 마지막 마이너 릴리스가 공개됐다. 이 버전이 갖는 역사적 의미와 Babel 8 RC1의 핵심 변화를 정리한다.

BabelJavaScript빌드 도구

2026년 2월 28일10 min read

Bun이 빠른 건 맞다 — 그런데 당신의 이벤트 루프가 문제다

Bun으로 바꿔도 p99가 개선되지 않는 이유. 런타임 선택보다 먼저 봐야 할 진짜 병목 지점들.

BunNode.js이벤트 루프

2026년 2월 28일9 min read

Coaction v1.0 — Web Worker로 멀티스레딩 상태 관리하기

JavaScript 단일 스레드 한계를 극복하는 상태 관리 라이브러리 Coaction의 동작 방식, Zustand와의 차이, Standard/Shared 두 가지 모드 사용법을 정리한다.

CoactionWeb Worker상태 관리

2026년 2월 28일10 min read

CSS @property — 커스텀 속성에 타입을 부여하는 방법

CSS @property at-rule로 커스텀 속성에 타입 정의, 상속 제어, 폴백을 추가해 렌더링 안정성과 애니메이션 가능성을 확보하는 방법을 다룬다.

CSS@property커스텀 속성

Docfind — Rust와 WebAssembly로 만든 서버 없는 브라우저 검색 엔진

Microsoft VS Code 문서 팀이 Rust와 WebAssembly로 구현한 클라이언트 사이드 검색 엔진 Docfind의 내부 설계를 파헤친다.

RustWebAssembly검색

JavaScriptError.isErrorTC39

Error.isError() — realm을 넘나드는 안전한 에러 검사 API

instanceof Error가 iframe과 worker에서 실패하는 이유, 그리고 이를 근본적으로 해결하는 Error.isError()의 동작 원리를 정리한다.

2026년 2월 28일8 min read

Renderify — LLM이 생성한 JSX를 빌드 없이 브라우저에서 바로 실행하는 런타임 UI 엔진

Renderify가 @babel/standalone과 JSPM CDN을 이용해 LLM 생성 JSX/TSX를 zero-build로 실행하는 방식과 보안 모델, 스트리밍 렌더링 구조를 분석한다.

RenderifyLLMJSX

2026년 2월 28일12 min read

코드를 치는 손에서 지시를 내리는 입으로 — Spotify가 AI 개발을 증명한 방법

Spotify가 내부 AI 시스템 Honk과 Claude Code를 활용해 개발 워크플로우를 근본적으로 바꾼 사례를 분석한다.

SpotifyAIClaude-Code

2026년 2월 28일10 min read

회의론자의 전향 — Steve Yegge가 그리는 AI 에이전트 시대의 생존 지도

실리콘밸리 베테랑 Steve Yegge가 말하는 AI 에이전트 시대의 핵심 주장과 엔지니어에게 주는 시사점을 정리한다.

AI에이전트Steve Yegge

V8의 Sea of Nodes 탈출기 — 왜 우아한 이론이 실전에서 무너졌는가

V8 팀이 10년간 사용한 Sea of Nodes IR을 포기하고 Turboshaft로 전환한 7가지 이유와 그 교훈을 정리한다.

V8컴파일러최적화

2026년 2월 28일13 min read

VS Code 1.110 — 에이전트가 생각하고, 브라우저를 열고, 터미널을 본다

2026년 2월 VS Code 1.110이 AI 에이전트 경험을 한 단계 끌어올린 핵심 기능 6가지를 분석한다.

VS Code1.110AI Agent

Long-Distance NES — VS Code Copilot이 커서 너머까지 코드를 고치는 방법

VS Code Copilot의 Next Edit Suggestions가 파일 전체로 확장되면서, 멀리 떨어진 코드도 자동으로 제안하는 기술적 배경을 분석한다.

VS CodeCopilotNES

CI/CD의 새 언어는 자연어다 — GitHub Agentic Workflows 해부

GitHub이 마크다운 기반 AI 워크플로우를 기술 프리뷰로 공개했다. 구조, 보안 모델, 실전 시나리오를 분석한다.

GitHubAI-agentCI-CD

2026년 2월 27일11 min read

Cursor Cloud Agents — 퇴근해도 코드를 짜는 AI 개발자가 등장했다

Cursor가 발표한 Cloud Agents는 독립 VM에서 코드 작성, 브라우저 테스트, PR 제출까지 자율적으로 수행하는 AI 에이전트다.

CursorCloud AgentsAI

2026년 2월 26일17 min read

React

LCP 28초짜리 React 앱을 1초로 깎아낸 기록 — 4단계 성능 수술 프레임워크

번들 분석부터 에셋 최적화까지, React 앱의 LCP를 단계적으로 개선하는 실전 프레임워크를 다룬다.

React성능 최적화LCP

2026년 2월 26일12 min read

Claude CodeRemote ControlAI

Claude Code 원격 제어 — 커피 마시면서 코딩시키는 시대가 열렸다

Claude Code의 Remote Control 기능으로 스마트폰에서 로컬 코딩 세션을 제어할 수 있게 되었다.

2026년 2월 25일9 min read

배포 전 출국 심사 — Publint로 npm 패키지 실수를 원천 차단하는 법

npm 패키지의 exports, entry points, 모듈 포맷을 배포 전에 검증하는 Publint 도구 사용법.

npmPublint패키지

2026년 2월 25일9 min read

새벽 3시의 탐조등 — Google SRE가 Gemini CLI로 장애를 잡는 법

Google Cloud SRE 팀이 Gemini CLI를 장애 대응 워크플로우에 통합한 방법, 효과, 한계를 분석한다.

SREGoogleGemini

2026년 2월 24일12 min read

Cloudflare Code Mode — 2,500개 API를 1,000 토큰에 담는 MCP의 새로운 패턴

Cloudflare가 공개한 Code Mode는 AI 에이전트에게 수천 개의 API 엔드포인트를 단 2개 도구로 제공하는 MCP 서버 설계 패턴이다.

CloudflareMCPAI Agent

2026년 2월 23일8 min read

CSS :near() — 마우스가 '가까이' 오면 반응하는 새로운 의사 클래스

CSS Working Group에 제안된 :near() 의사 클래스는 포인터 근접성을 감지해 호버 전에 UI를 활성화하는 새로운 상호작용 패턴을 연다.

CSS:near()CSS Selectors

2026년 2월 23일9 min read

jQuery 4.0 — 10년 만의 메이저 릴리스, 무엇이 바뀌었나

jQuery가 20주년을 맞아 10년 만에 메이저 버전을 출시했다. IE 지원 축소, ES 모듈 전환, Trusted Types 등 핵심 변경 사항을 정리한다.

jQueryJavaScript라이브러리

2026년 2월 23일8 min read

달리는 차의 엔진을 바꾸다 — Nx 모노레포에서 Bun 도입까지의 여정

Nx 18에서 21까지 버전 업그레이드와 Bun 패키지 매니저 도입을 동시에 진행한 컬리의 마이그레이션 전략과 실전 이슈를 정리한다.

NxBun모노레포

2026년 2월 23일14 min read

Safari 26.3 — Zstandard 압축과 Navigation API가 온다

Safari 26.3이 Zstandard 콘텐츠 인코딩, Navigation API AbortSignal 지원, 그리고 다수의 CSS 버그 수정을 가져왔다.

SafariWebKitZstandard

2026년 2월 23일8 min read

V8 Mutable Heap Numbers — 숫자 하나 바꿀 때마다 새 객체를 만들던 비효율을 잡다

V8 엔진이 스크립트 컨텍스트의 숫자 변수를 매번 새 HeapNumber로 할당하던 방식을 제자리 수정(mutable)으로 바꿔 최대 2.5배 성능 향상을 달성했다.

V8JavaScript성능 최적화

2026년 2월 23일9 min read

Claude Code 에이전트 팀 — 여러 AI가 협업하는 새로운 방식

Claude Code의 에이전트 팀을 정리했다. 설정법, 사용 사례, 10만 줄 C 컴파일러 구축 실전 사례, 훅을 활용한 품질 관리, 토큰 비용 분석까지 다룬다.

Claude CodeAI에이전트

2026년 2월 22일20 min read

달리는 기차의 엔진을 교체하라 — 네이버 스마트스토어 Oracle→MySQL 이중 쓰기 전환기

10년 이상 운영한 Oracle을 서비스 중단 없이 MySQL로 전환한 네이버 스마트스토어 회원 파트의 이중 쓰기(dual write) 전략과 기술적 해결 과정.

MySQLOracleMigration

2026년 2월 22일12 min read

CSSbase-selectsibling-index

CSS만으로 커스텀 셀렉트 박스 — JavaScript 150줄이 사라지는 순간

Chrome 135에 도입된 appearance: base-select와 sibling-index()로 JavaScript 없이 완전한 커스텀 드롭다운을 구현하는 방법을 분석한다.

2026년 2월 21일10 min read

Google WebMCP — 웹사이트가 AI 에이전트에게 '메뉴판'을 건네는 시대

Chrome 146에 탑재된 WebMCP의 Declarative·Imperative API 구조와 웹 개발자가 준비해야 할 변화를 분석한다.

WebMCPAI AgentChrome

2026년 2월 21일11 min read

신입사원을 에이스로 — Netflix가 LLM Post-Training을 대규모 엔지니어링으로 만든 과정

Pre-training이 LLM에 넓은 언어 능력을 주지만, post-training이 실제 의도와 도메인 제약에 맞추는 단계. Netflix의 스케일링 접근법.

LLMPost-TrainingNetflix

2026년 2월 21일13 min read

Rolldown의 코드 스플리팅 — 비트셋 한 줄로 모듈의 소속을 결정하는 법

Vite의 차세대 번들러 Rolldown이 비트셋 기반 알고리즘으로 코드 스플리팅을 수행하는 원리를 분석한다.

RolldownVite번들러

2026년 2월 21일11 min read

V8 Explicit Compile Hints — 주석 한 줄로 JavaScript 시작 속도를 630ms 줄이는 법

Chrome 136에 도입된 V8의 Explicit Compile Hints 기능으로 JavaScript 초기 로딩 성능을 개선하는 원리와 사용법을 분석한다.

V8성능 최적화Chrome

2026년 2월 21일10 min read

CloudflareAI AgentMarkdown

Babel 8 Beta — CJS를 버리고 ESM 전용으로 간다

2년간의 알파를 거쳐 베타에 진입한 Babel 8의 핵심 변경사항과 마이그레이션 전략을 정리한다.

BabelESMJavaScript

2026년 2월 20일8 min read

Accept: text/markdown — AI 에이전트가 HTML 대신 마크다운을 받는 시대

Cloudflare가 AI 에이전트를 위해 HTML을 마크다운으로 자동 변환하는 기능의 동작 원리와 의미를 살펴본다.

Cloudflare WorkersStatic AssetsEdge

Cloudflare Workers Static Assets 운용 가이드 — 라우팅과 캐시를 안정적으로 잡는 방법

Workers Static Assets를 기준으로 SPA/SSR 혼합 서비스에서 라우팅, 캐시, Worker 실행 순서를 설계하는 실전 패턴을 정리한다.

2026년 2월 20일4 min read

ESLintFlat ConfigJavaScript

ESLint v10 — eslintrc의 시대가 끝났다

ESLint v10.0.0의 레거시 eslintrc 완전 제거, 파일 기반 설정 탐색, JSX 참조 추적 등 주요 변경 사항과 마이그레이션 방법을 정리한다.

JavaScript using 키워드 — try/finally 없이 리소스를 자동으로 정리하는 법

TC39 Stage 4에 도달한 Explicit Resource Management 제안을 통해 using 키워드와 Symbol.dispose의 동작 원리를 살펴본다.

JavaScriptTC39using

GitHub CopilotAgent ModeJetBrains

GitHub Copilot Agent Skills가 바꾸는 흐름 — 에디터 안에서 작업 자동화하는 법

Copilot Agent Mode와 Agent Skills를 기준으로, 반복 작업을 줄이는 실전 워크플로우를 정리한다.

2026년 2월 20일5 min read

TypeScript

TypeScript 6.0 Beta — TS 7 가기 전에 tsconfig부터 정리하자

TypeScript 6.0 Beta의 주요 변경 사항과 깨지는 기본값들을 정리하고, TS 7(Go 네이티브) 전환을 대비하는 마이그레이션 전략을 다룬다.

TypeScripttsconfig마이그레이션

V8의 JSON.stringify가 2배 빨라졌다 — 6가지 최적화 기법 해부

V8 13.8(Chrome 138)에서 적용된 JSON.stringify 성능 개선의 기술적 배경과 6가지 핵심 최적화 전략을 분석한다.

V8JSON성능 최적화

validator.js의 isLength가 뚫렸다 — 유니코드 제로 폭 문자가 만든 CVSS 7.5 취약점

CVE-2025-12758로 등록된 validator.js의 isLength() 우회 취약점의 원리, 영향, 대응 방법을 분석한다.

보안validator.jsCVE

2026년 2월 20일7 min read

VS Code 1.109 — 에디터 하나에서 Claude, Codex, Copilot을 동시에 돌리는 시대

VS Code 1.109가 도입한 멀티 에이전트 개발 환경의 3가지 실행 모드와 MCP Apps 지원을 분석한다.

VS CodeAI AgentMCP

2026년 2월 20일10 min read

코딩 에이전트 운영 설계 — Rules부터 MCP·Hooks까지 실무 적용 가이드

코딩 에이전트의 핵심 개념 7가지를 실무 적용 순서대로 정리하고, 팀 운영에 바로 쓸 수 있는 체크리스트를 제공한다.

코딩에이전트Claude CodeMCP

2026년 2월 19일11 min read

Gemini 입문 가이드 — 비개발자도 바로 쓰는 프롬프트 공략

처음 AI를 쓰는 사람도 이해할 수 있도록 Gemini 시작 방법, 질문 잘하는 법, 실수 줄이는 팁, 실전 활용 예시를 정리한다.

GeminiAI입문프롬프트

2026년 2월 19일13 min read

4명이 16명처럼 일하는 비밀 — 컬리 OMS팀의 역할 기반 AI 오케스트레이션

PM 1명과 엔지니어 3명이 12개 MSA를 운영하는 OMS팀이 Claude AI를 도입해 16명 규모 조직처럼 일하게 된 과정.

ClaudeAI 워크플로우MSA

2026년 2월 19일11 min read

불 끄기 전에 원인 조사하는 소방관은 없다 — 장애 복구를 결정짓는 First Action

우아한형제들이 70건의 장애 사례를 분석해 도출한 First Action 전략. 장애 복구 시간을 결정하는 건 원인 분석이 아니라 최초 조치다.

장애 대응SREDevOps

2026년 2월 18일12 min read

Temporal API — JavaScript Date의 30년 묵은 저주가 풀린다

Chrome 144가 Temporal API를 정식 탑재하면서 JavaScript 날짜 처리의 새 시대가 열렸다.

TemporalJavaScriptChrome

2026년 2월 17일9 min read

CSSsibling-indexscroll-driven animations

sibling-index()로 만드는 CSS 스크롤 소용돌이 — JavaScript 없이 수백 개 요소 애니메이션

CSS sibling-index()와 scroll-driven animations를 결합해 순수 CSS만으로 텍스트 보텍스 효과를 구현하는 기법을 다룬다.

2026년 2월 17일7 min read

좀비 TV 400만 대의 35초 — 2025년 DDoS 공격은 어떻게 역대 기록을 갈아치웠나

2025년 DDoS 공격이 전년 대비 두 배 이상 증가하고, 역대 최대 31.4 Tbps 공격이 기록된 Cloudflare Q4 리포트 분석.

DDoSCloudflaresecurity

2026년 2월 17일9 min read

Electrobun v1 — Bun으로 14MB짜리 데스크톱 앱을 만든다

Electron의 번들 크기 문제를 Bun 런타임과 네이티브 웹뷰로 해결하려는 새 프레임워크 Electrobun v1이 출시됐다.

ElectrobunBun데스크톱 앱

2026년 2월 17일8 min read

Interop 2026 — 브라우저 전쟁이 끝나고 표준 전쟁이 시작됐다

Chrome, Safari, Firefox가 합의한 20개 웹 표준 집중 영역과 프론트엔드 개발자가 주목해야 할 핵심 기능을 정리한다.

InteropCSS브라우저 호환성

2026년 2월 17일9 min read

중앙 교환기를 세워라 — 당근이 AI 난립을 하나의 플랫폼으로 정돈한 전략

'AI 활용에 가장 앞선 당근' 비전 아래 여러 제품 팀이 AI를 더 잘 활용할 수 있도록 구축한 GenAI 플랫폼.

당근GenAILLM Gateway

2026년 2월 16일10 min read

CSSz-indexstacking-context

CSS Stacking Context — z-index: 99999를 줬는데 왜 안 올라올까

CSS 쌓임 맥락의 생성 조건, z-index의 실제 작동 원리, 그리고 레이아웃 버그를 디버깅하는 실전 전략을 정리한다.

2026년 2월 15일9 min read

삽 대신 굴삭기 — Netflix가 400개 PostgreSQL 클러스터를 자동으로 옮긴 방법

Netflix Online Data Stores 팀이 400개에 가까운 RDS Postgres 클러스터를 Aurora Postgres로 자동 마이그레이션한 셀프서비스 워크플로우 설계 과정.

PostgreSQLAuroraAWS

2026년 2월 15일10 min read

Next.js 블로그 만들기 — 정적 블로그에 맞춤 추천 포스트 기능 추가

localStorage에 조회 이력을 저장하고, 태그 가중치 스코어링으로 정적 블로그에서도 개인화 추천을 구현하는 방법.

Next.jslocalStorage추천

2026년 2월 14일15 min read

RustCloudflaregraceful-restart

뱀의 탈피에서 배운 서버 재시작 — Rust로 커넥션 제로 로스를 구현하는 ecdysis

Cloudflare가 5년간 프로덕션에서 검증한 Rust 무중단 재시작 라이브러리 ecdysis를 오픈소스로 공개했다.

2026년 2월 14일9 min read

Bun vs Node.js vs Deno — 뭐가 다른지, 그래서 뭘 쓰면 좋은지 (2026 기준)

런타임 3대장 비교: 호환성(Node), 속도/번들(Bun), 올인원/보안(Deno). 팀/프로덕트 상황별 선택 기준과 체크리스트까지 정리.

BunNode.jsDeno

2026년 2월 13일7 min read

번들러(Bundle)란 뭐고, 왜 필요할까? — 요즘 번들러/빌드 툴 비교 가이드

번들러의 역할(모듈/의존성/트랜스파일/최적화)을 쉽게 설명하고, Vite·Rollup·esbuild·Webpack·Rspack·Turbopack 같은 도구를 상황별로 비교합니다.

BundlerViteWebpack

2026년 2월 13일9 min read

KafkaOutbox PatternSpring Boot

메시지는 보냈는데 DB는 롤백됐다면? — 아웃박스 패턴과 재시도 토픽으로 만드는 자가 치유 파이프라인

아웃박스 패턴과 Spring Kafka RetryableTopic으로 외부 채널 입고 정보를 안전하게 동기화하는 컬리의 방법.

2026년 2월 13일12 min read

Frontend

드롭다운의 정체를 밝혀라 — Combobox, Multiselect, Listbox 완전 해부

Combobox, Multiselect, Listbox, Dual Listbox의 차이점과 접근성 요구사항, 선택 기준을 ARIA 패턴 기반으로 정리한다.

UI컴포넌트접근성ARIA

2026년 2월 12일10 min read

Next.js 블로그 만들기 — 검색엔진 등록 4종 완전 정복

Google Search Console, Bing Webmaster Tools, 네이버 서치어드바이저, 다음 검색등록까지. Next.js 블로그를 검색엔진에 노출시키는 전체 과정을 정리했다.

SEO검색엔진Next.js

2026년 2월 11일9 min read

Event TrackingData PlatformDaangn

분류 번호 없는 도서관 — 당근이 행동 로그의 카오스를 정리한 방법

코드 곳곳에 하드코딩되던 사용자 행동 로그를 중앙화된 이벤트센터 플랫폼으로 정리한 당근의 개발기.

2026년 2월 11일10 min read

JiTTesting — AI가 코드를 쓰는 시대, 테스트는 누가 하나

Meta가 제안한 Just-in-Time Testing은 에이전트가 생성한 코드를 LLM이 그때그때 테스트하는 새로운 패러다임이다.

테스팅AIMeta

2026년 2월 11일10 min read

Next.js 블로그 만들기 — GitHub Pages에서 Cloudflare Pages로 이전하기

GitHub Pages의 한계를 넘어 Cloudflare Pages로 블로그를 이전한 과정. 비교, 설정, SEO까지 한 번에 정리.

Cloudflare배포SEO

2026년 2월 10일9 min read

볼링 핀 배치의 비밀 — CSS Grid auto-placement로 피라미드 레이아웃 구현하기

CSS Grid의 자동 배치 알고리즘과 nth-child 셀렉터를 조합해 반응형 피라미드 그리드를 구현하는 방법을 다룬다.

CSS Grid레이아웃nth-child

2026년 2월 10일9 min read

Next.js 블로그 만들기 — 정적 블로그에 검색 기능 추가

빌드 타임 검색 인덱스 생성과 클라이언트 사이드 필터링으로 정적 블로그에 검색 기능을 구현하기. Cmd+K 단축키, 오버레이 UI까지.

검색UXNext.js

2026년 2월 9일10 min read

죽지 않는 배포 파이프라인 — Netflix가 Temporal로 실패율을 40,000배 낮춘 이야기

Netflix Spinnaker 팀이 Temporal Durable Execution을 도입해 Cloud Operation의 일시적 장애를 사실상 제거한 마이그레이션 이야기.

TemporalNetflixSpinnaker

2026년 2월 9일11 min read

Next.js 블로그 만들기 — 스크롤 프로그레스 바와 Canvas 렌더링 이슈 해결

스크롤 진행률 프로그레스 바 구현과 Canvas 커서 효과가 GNB backdrop-blur와 충돌하며 발생한 깜빡임 이슈 해결기.

CanvasUX디버깅

2026년 2월 8일6 min read

OHP 필름을 겹치듯 — conic-gradient와 attr()로 순수 CSS 파이 차트 만들기

conic-gradient, CSS 커스텀 프로퍼티, 새로운 attr() 타입 구문을 활용해 JavaScript 없이 시맨틱한 파이 차트를 구현하는 방법을 다룬다.

CSSconic-gradientattr()

2026년 2월 8일9 min read

Next.js 블로그 만들기 — TOC와 커서 효과로 디테일 살리기

IntersectionObserver 기반 TOC(Table of Contents)와 Canvas 커서 트레일 효과 구현기. 스크롤 하이라이팅, fixed 레이아웃 처리까지.

TOCCanvasUX

2026년 2월 7일12 min read

Architecture

세 번의 리모델링 — 당근페이가 아키텍처를 갈아엎은 진짜 이유

당근페이 백엔드가 Layered에서 Hexagonal을 거쳐 Clean Architecture + Monorepo로 진화한 과정과 각 단계의 트레이드오프를 다룬다.

Clean Architecture당근백엔드

2026년 2월 7일12 min read

배경색이 바뀌면 글자색도 따라가야 한다 — contrast-color() 없이 살아남는 법

브라우저 지원이 부족한 CSS contrast-color()를 color-mix(), relative color syntax, custom properties로 근사 구현하는 방법을 정리한다.

CSScontrast-color접근성

2026년 2월 6일10 min read

Next.js 블로그 만들기 — giscus로 댓글 기능 추가

서버 없이 GitHub Discussions 기반 댓글 시스템 giscus를 Next.js 블로그에 연동하기. 다크모드 자동 전환까지.

giscusGitHub댓글

2026년 2월 5일5 min read

OOM이 터지고 나서야 깨달은 것들 — Webpack4에서 Vite로 갈아탄 5년 묵은 CMS

CI 빌드가 OOM으로 터진 뒤, 5년 동안 방치된 Webpack4 기반 CMS를 Vite로 전환하며 빌드 시간 48%, 번들 크기 81%를 줄인 과정.

ViteWebpack마이그레이션

2026년 2월 5일11 min read

포크레인 없이 못 박기 — CSS 수학 함수만으로 바 차트 그리기

CSS 수학 함수와 커스텀 프로퍼티, 시맨틱 HTML을 조합해 JavaScript 없이 반응형 바 차트를 구현하는 방법을 다룬다.

CSScalc()clamp()

2026년 2월 4일9 min read

Next.js 블로그 만들기 — 카드 그리드와 포스트 상세 페이지

Velog 스타일 카드 UI와 MDX 렌더링 상세 페이지 구현. 반응형 그리드, SEO 메타데이터, 정적 사이트 생성까지.

Next.jsReactMDX

2026년 2월 3일6 min read

Architecture

Action-Reducer-State의 귀환 — 프론트엔드 패턴이 서버를 점령한 이유

프론트엔드에서 익숙한 Redux의 Action-Reducer-State 패턴을 서버 사이드에 적용한 당근마켓의 이벤트 소싱 라이브러리 Ventyd를 분석한다.

이벤트 소싱Redux당근

2026년 2월 3일12 min read

Tailwind CSS다크모드next-themes

Next.js 블로그 만들기 — 다크모드와 Tailwind CSS v4 테마

Tailwind CSS v4의 CSS-first 설정과 next-themes를 활용한 다크/라이트 모드 구현. 커스텀 프로퍼티 기반 테마 시스템 구축기.

2026년 2월 2일7 min read

CSS @scope — 울타리 치는 네이티브 스코핑의 시대가 왔다

CSS @scope의 도넛 스코핑과 근접성 우선순위를 파헤치고, BEM·CSS Modules·CSS-in-JS와 정면 비교한다.

CSS@scopeBEM

2026년 2월 2일9 min read

Next.js 15로 개인 블로그 만들기 — 프로젝트 셋업

왜 직접 블로그를 만들었는지, 기술 스택 선정 이유와 프로젝트 초기 구성까지. Next.js 15 + Tailwind CSS v4 + MDX 기반 블로그의 시작.

Next.js블로그Tailwind CSS

2026년 2월 1일7 min read