CODEMAPO Logo
Hero Background

안녕하세요, codemapo입니다.

Interdisciplinary DeveloperSeoul, KR

인문학적 통찰과 기술을 결합하여 가치를 만듭니다.
문이과의 경계를 넘나드는 통섭형 개발자입니다.

2026. 2. 24.

HTML5 드래그 앤 드롭이 웨일에서 안 된다: dnd-kit으로 해결한 이야기

HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.

#React#dnd-kit#Drag and Drop
2026. 2. 23.

기술 문서 작성법: README, API 문서, 변경 로그

오픈소스에 기여하려고 봤는데 README가 없어서 포기한 적이 있다. 그때 좋은 문서의 가치를 뼈저리게 느꼈다.

#Documentation#README#API Docs
2026. 2. 22.

개발 환경 자동화: dotfiles, 셸 설정, 도구 세팅

맥을 새로 사면 개발 환경 세팅에 이틀이 걸렸다. dotfiles과 자동화 스크립트를 만들고 나니 30분이면 끝난다.

#Dotfiles#Shell#Automation
2026. 2. 21.

정규표현식(RegExp) 실제: 개발자의 만능 텍스트 도구

정규표현식을 외계어처럼 느꼈는데, 실제로 자주 쓰는 패턴 20개만 익히니 텍스트 처리가 한 줄로 끝났다.

#RegExp#JavaScript#Text Processing
2026. 2. 20.

React Hook Form + Zod: 타입 안전한 폼 검증

폼 검증 로직을 직접 작성하다가 엣지 케이스 지옥에 빠졌다. React Hook Form과 Zod 조합이 폼 개발의 최적해였다.

#React Hook Form#Zod#Forms
2026. 2. 19.

Zustand 심화: 전역 상태 관리의 실제 패턴

Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.

#Zustand#State Management#React
2026. 2. 18.

Streaming SSR: 점진적 페이지 렌더링으로 체감 속도 개선

SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.

#Streaming SSR#React#Next.js
2026. 2. 17.

Server Actions: 폼 처리의 새로운 패러다임

API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.

#Server Actions#Next.js#Forms
2026. 2. 16.

React Server Components 심화: 직렬화 규칙과 실제 패턴

Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.

#React#Server Components#RSC
2026. 2. 15.

API 보안 실제: Rate Limiting, API Key 관리, IP 제한

공개 API를 운영하다 보면 예상치 못한 대량 요청에 시달릴 수 있다. Rate Limiting과 API Key 관리로 API를 보호하는 방법을 정리했다.

#API Security#Rate Limiting#API Key