홈

© 2026 Ki Chang. All rights reserved.

본 블로그의 콘텐츠는 CC BY-NC-SA 4.0 라이선스를 따릅니다.

소개JSON Formatter개인정보처리방침이용약관

© 2026 Ki Chang. All rights reserved.

콘텐츠: CC BY-NC-SA 4.0

소개|JSON Formatter|개인정보처리방침|이용약관

Prettier + husky + lint-staged로 팀 코드 스타일 자동화하기

코드 스타일 논쟁을 없애고 git commit 시 자동으로 포매팅되는 환경을 구축한 경험. Prettier 설정부터 husky + lint-staged 연동, git-blame-ignore-revs까지 실제 적용 과정을 정리했습니다.

2026. 1. 31.

GA4 내부 트래픽 제외 설정: 내 방문 기록이 데이터를 오염시키고 있었다

블로그 트래픽을 분석하다가 이상한 패턴을 발견했습니다. 한 명의 사용자가 58분간 31페이지를 조회한 기록. 알고 보니 제 자신이었습니다. GA4에서 내부 트래픽을 제외하는 방법을 정리했습니다.

2026. 1. 30.

블로그에 임베딩 기반 관련 글 추천 시스템 구축하기

Gemini Embedding API와 코사인 유사도를 활용해 블로그에 관련 글 추천 시스템을 구축한 경험을 공유합니다. 태그 기반의 단순한 방식에서 벗어나, 글의 실제 내용을 분석해 더 정확한 관련 글을 추천하는 방법을 소개합니다.

2026. 1. 29.

개인 블로그에 AI 검색 달기 (2) - MongoDB Atlas Vector Search 구현

MongoDB Atlas Vector Search 인덱스 설정부터 NestJS에서 하이브리드 검색을 구현하는 과정. $vectorSearch의 null 필터 제한사항과 RRF 알고리즘, 유사도 임계값 튜닝까지.

2026. 2. 2.

개인 블로그에 AI 검색 달기 (1) - 왜 하이브리드 검색인가

블로그 검색 기능을 개선하면서 키워드 검색의 한계를 느꼈습니다. 벡터 검색과 키워드 검색을 결합한 하이브리드 검색을 선택한 이유와 아키텍처 설계 과정을 공유합니다.

2026. 2. 1.

Claude Code에서 Google Analytics MCP 연동하기

Claude Code에서 Google Analytics MCP를 연동하는 방법을 단계별로 설명합니다. Google Cloud 설정, 인증, 패키지 설치부터 실제 활용 사례까지 다루며, 터미널에서 자연어로 트래픽 데이터를 분석하는 방법을 안내합니다.

2026. 1. 28.

Claude Code에서 Grafana MCP 연동하기: AI 기반 모니터링 자동화

Claude Code에 Grafana MCP를 연동하면 AI가 직접 대시보드를 조회하고, Prometheus 쿼리를 실행하며, 인시던트를 관리할 수 있습니다. 설정 방법과 실제 활용 사례를 정리했습니다.

2026. 1. 27.

Claude Code에서 Coolify MCP 연동하기: 인프라 관리 자동화

Claude Code에 Coolify MCP를 연동하여 AI 에이전트로 서버 배포, 모니터링, 관리를 자동화하는 방법을 단계별로 설명합니다.

2026. 1. 26.

소프트웨어 개발 비용, 어떻게 산정할까? - 4가지 방법론과 실제 적용 사례

개인 블로그 프로젝트(42,000줄)를 4가지 비용 산정 방법론으로 분석해봤습니다. 기능점수(FP), COCOMO, 시장 시세, 유사 프로젝트 비교까지 - 각 방법의 원리와 실제 적용 결과를 공유합니다.

2026. 1. 25.

두쫀쿠 지도는 어떻게 만들었을까: 바이럴 사이드 프로젝트 분석

두쫀쿠 지도(dubaicookiemap.com)의 기술 스택과 수익 모델을 분석했습니다. Next.js 15 + Vercel + Supabase 조합, 쿠팡 파트너스와 리틀리 후원을 활용한 수익화 전략까지 사이드 프로젝트에서 참고할 만한 패턴을 정리했습니다.

2026. 1. 24.

Playwright E2E 테스트: 프론트엔드와 백엔드를 동시에 검증하는 실전 가이드

단위 테스트만으로는 실제 사용자 경험을 보장할 수 없다는 것을 깨달았습니다. Playwright E2E 테스트를 통해 프론트엔드와 백엔드를 동시에 구동하고, 실제 사용자 시나리오를 검증한 경험을 정리했습니다.

2026. 1. 23.

PM2 vs Coolify: 상황에 맞는 Node.js 배포 전략 선택하기

Node.js 배포 도구인 PM2와 Coolify의 차이점을 분석하고, 프로젝트 특성에 따른 선택 기준을 제시합니다.

2026. 1. 22.

Liveness와 Readiness: 컨테이너 헬스체크의 두 가지 관점

Docker나 Kubernetes 환경에서 헬스체크를 구현할 때 Liveness와 Readiness의 차이를 이해하고, NestJS Backend와 Next.js Web에서 실제로 구현한 경험을 정리했습니다.

2026. 1. 21.

미리 개발하지 말자: 운영에서 사용하지 않는 코드는 제거되어야 한다

첫 웹서비스 프로젝트에서 미리 개발한 코드가 3개월째 사용되지 않고 있습니다. 기획 전에 미리 만든 코드가 왜 문제인지, AI 시대에 미사용 코드를 어떻게 다뤄야 하는지 경험을 정리했습니다.

2026. 1. 20.

Obsidian으로 프로젝트를 구조적으로 관리하기

ERD, 플로우차트, 명세, 백로그를 Obsidian에서 통합 관리하고, Claude Code와 연동하여 프로젝트를 구조적으로 분해하는 방법을 정리했습니다.

2026. 1. 19.

요즘 고민하는 것 : 추상화

AI 시대에 추상화와 테스트 코드가 왜 더 중요해졌는지에 대한 고민. 자연어보다 인터페이스로 명세를 작성하고, 테스트로 검증하는 것이 더 정확하고 신뢰할 수 있다는 생각을 정리했습니다.

2026. 1. 18.

3,655개 테스트 케이스로 검증하는 정기결제 시스템

정기결제 로직 변경 후 모든 케이스의 정확성을 어떻게 증명할까요? 2년치 날짜와 5가지 결제 주기를 조합한 3,655개 테스트 케이스 설계와 자동화 검증 시스템 구축 경험을 공유합니다.

2026. 1. 17.

PHP에서 Time Travel 테스트 구현하기: 미래 시점 결제 시뮬레이션

정기결제 시스템을 테스트하기 위해 PHP에서 시간 조작 테스트를 구현한 경험. HTTP 헤더를 활용한 가상 시간 설정과 배치 시뮬레이션 방법을 정리했습니다.

2026. 1. 16.

월말 정기결제의 함정: 31일→28일→31일 문제 해결하기

1월 31일에 시작한 정기결제의 2월 결제일은? 월마다 다른 마지막 날짜로 인한 정기결제 시스템의 엣지 케이스와 "원래 의도 보존" 전략을 통한 해결 방법을 공유합니다.

2026. 1. 15.

NestJS에서 Drizzle ORM을 선택한 이유: TypeORM, Prisma와의 비교

새로운 SaaS 모듈에 MySQL을 도입하면서 TypeORM, Prisma, Drizzle ORM을 비교했습니다. 각 ORM의 장단점과 Drizzle을 선택한 이유를 실제 코드 예시와 함께 정리했습니다.

2026. 1. 14.

UNION ALL로 분산된 이벤트 로그 통합하기

여러 테이블에 분산된 이벤트 로그를 통합 타임라인으로 제공해야 했습니다. UNION ALL로 SQL 레벨에서 통합하고, TypeScript Discriminated Union으로 타입 안전성을 확보한 경험을 정리했습니다.

2026. 1. 13.

NestJS 슬로우 쿼리 자동 감지: 스택 트레이스 캡처부터 Slack 알림까지

슬로우 쿼리가 발생했을 때 SQL은 쉽게 알 수 있지만, 어디서 호출했는지는 파악하기 어렵습니다. Knex Proxy 패턴으로 호출 스택을 자동 캡처하고 Slack으로 알림받는 시스템을 구현했습니다.

2026. 1. 12.

TypeScript verbatimModuleSyntax 마이그레이션 실전 가이드

TypeScript 5.0의 verbatimModuleSyntax 옵션을 모노레포 프로젝트에 적용하면서 배운 것들을 정리했습니다. 타입과 값의 import를 명확히 구분하는 것이 왜 중요한지, 그리고 실제 마이그레이션 과정에서 마주친 패턴들을 공유합니다.

2026. 1. 11.

k6와 실시간 Pool 모니터링으로 시스템 한계점 찾기

k6로 시스템 한계점을 찾는 Breakpoint 테스트와 NestJS Connection Pool 실시간 모니터링 시스템을 구현한 경험. 최적 RPS를 찾기까지의 과정을 정리했습니다.

2026. 1. 10.

NestJS 마이크로서비스 부하테스트: 전략 설계와 7가지 요구사항

Production 환경을 로컬에서 재현하여 시스템 한계점을 찾는 부하테스트 전략을 설계한 경험. 7가지 요구사항 정의부터 아키텍처 설계까지의 과정을 정리했습니다.

2026. 1. 9.

macOS에서 OCI HeatWave MySQL 접속하기: Bastion SSH 터널 설정 가이드

Oracle Cloud HeatWave MySQL에 로컬에서 접속하기 위한 OCI CLI 설정과 Bastion SSH 터널 구성 과정을 정리했습니다. API 키 등록부터 터널 스크립트 작성, 트러블슈팅까지 전체 흐름을 다룹니다.

2026. 1. 8.

Next.js 배포 시 빈 캐시 문제 해결: 런타임 워밍에서 빌드 타임 정적 생성으로

Next.js + Coolify 환경에서 배포 직후 빈 캐시와 no available server 에러가 발생하는 문제를 해결한 경험. 런타임 캐시 워밍의 한계를 겪고, 빌드 타임 정적 생성으로 전환하여 근본적으로 해결했습니다.

2026. 1. 7.

OCI HeatWave MySQL + NestJS 연동: Bastion을 통한 보안 연결 가이드

Oracle Cloud HeatWave MySQL을 로컬 개발 환경에서 안전하게 연결하고, NestJS + TypeORM으로 연동하는 전체 과정. Bastion SSH 터널 설정부터 Security List 트러블슈팅까지 실제 경험을 바탕으로 정리했습니다.

2026. 1. 6.

Claude Code에서 블로그 글 작성하기: MCP를 직접 만들어 활용한 경험

Claude Code로 개발하면서 얻은 지식을 블로그에 정리하고 싶었습니다. 하지만 AI에게 블로그 관리자 권한을 모두 주기엔 불안했고, 필요한 API만 분기 처리하기엔 번거로웠습니다. MCP(Model Context Protocol)를 직접 만들어서 권한을 명확히 분리하고, Few-shot 예시와 SEO 가이드라인을 1회 호출로 제공하도록 개선한 경험을 공유합니다.

2026. 1. 4.

자유수영 데이터 수집: 불편함에서 시작된 나만의 정보 플랫폼 구상

자유수영 정보를 찾기 어려운 불편함에서 시작해, 직접 수영장 데이터를 수집하고 업데이트하는 나만의 플랫폼을 구상했습니다. 데이터 정확도 유지를 위한 기술적 접근을 소개합니다.

2026. 1. 3.

소규모 서비스 개발: MSA 대신 모놀리식 아키텍처를 선택하는 것이 합리적일 수 있다는 생각

소규모 서비스 개발 시 MSA 대신 모놀리식 아키텍처가 합리적일 수 있습니다. 낮은 트래픽과 간단한 기능, 효율적인 비용 관리를 위한 현명한 선택 이유를 알아봅니다.

2026. 1. 2.

6년간의 웹빌더 회사 경험: 개발 여정을 돌아보며 얻은 실질적인 배움

6년간 웹빌더 회사에서 다양한 웹 시스템 유지보수 및 고도화를 경험하며 사용자 경험과 안정성을 중시한 개발 여정을 소개합니다. 개인 프로젝트로 AI 웹 서비스를 구축하며 얻은 실질적인 배움도 공유합니다.

2025. 12. 31.

프로토타입 페이지를 숨기고 싶을 때, HTTP Basic Authentication

아직 공개하기 어려운 프로토타입 페이지를 쉽고 안전하게 숨기는 방법을 찾고 있나요? Next.js 미들웨어로 HTTP Basic 인증을 구현해 외부 접근과 검색 엔진 노출을 효과적으로 차단하세요.

2025. 12. 29.

작은 서비스에도 모니터링이 필요한 이유 - NestJS + Prometheus + Grafana Cloud 구축기

작은 서비스도 리소스 제약 때문에 모니터링이 필수입니다. NestJS에 Prometheus와 Grafana Cloud를 연동하여 효율적인 리소스 관리 시스템을 구축하는 방법을 알아보세요.

2025. 12. 28.

내가 Next.js ISR을 선택한 이유: 블로그 SEO, 그 고민의 시작과 해결

Next.js ISR을 선택하여 블로그 SEO 문제를 해결하는 방법을 알아보세요. React CSR의 한계를 극복하고, 검색 엔진 최적화와 소셜 미리보기를 완벽 지원하는 ISR의 핵심 원리를 소개합니다.

2025. 12. 27.

Traefik으로 www 리디렉션 설정하기: 404 에러 해결 과정

Traefik에서 www 서브도메인이 404 에러를 반환할 때, non-www로 리디렉션하는 설정 방법을 상세히 설명합니다. Traefik 라우터와 미들웨어를 활용해 이 문제를 해결하세요.

2025. 12. 27.

개발자의 블로그 임시저장 개선기: 사용자 경험을 위한 UI/UX 성찰

블로그 임시저장 기능의 UI/UX 개선 과정을 통해 사용자 경험의 본질을 탐구합니다. 네이버, Velog 등 기존 플랫폼의 한계를 극복하고 개발자 블로그에 최적화된 설계 인사이트를 얻어가세요.

2025. 12. 26.

제가 경험한 SEO 글쓰기의 어려움과 AI 에디터 개발

SEO 글쓰기의 어려움을 겪고 계신가요? 저자가 직접 겪은 메타 정보, alt 속성, 슬러그 고민을 해결하기 위해 개발한 AI 에디터가 어떻게 글쓰기를 혁신하는지 알아보세요.

2025. 12. 24.

Claude Code 사용량 관리, 작은 불편함이 크롬 익스텐션 개발로 이어진 과정

Claude Code 사용량 관리에 불편함을 느껴 직접 크롬 확장 프로그램을 개발했습니다. 개인적인 불편함 해소에서 시작된 개발 경험과 그 과정에서 얻은 인사이트를 공유합니다.

2025. 12. 23.

Proxmox와 함께한 셀프 호스팅 여정: 홈서버 운영을 접게 된 솔직한 이야기

Proxmox 홈서버로 셀프 호스팅을 시작했지만, 예상치 못한 네트워크 불안정성과 전기 요금 부담으로 운영을 중단했습니다. 실제 경험을 통해 얻은 솔직한 교훈을 공유합니다.

2025. 12. 21.

AI 기반 강아지 MBTI 서비스 개발기: 느린 응답 시간, UI/UX로 풀어낸 성찰

AI 기반 강아지 MBTI 서비스 개발 중 느린 응답 시간 난관을 UI/UX 개선으로 극복한 과정을 소개합니다. 사용자 경험을 최우선으로 기술적 한계를 돌파한 인사이트를 얻어가세요.

2025. 12. 19.

직접 구축한 개발 블로그의 '관리자 페이지', 서버에 올리지 않은 이유

직접 개발한 블로그의 관리자 페이지를 서버에 올리지 않고 운영하는 독특한 방식을 소개합니다. 개인적인 작업 환경과 효율성, 서버 비용 절감을 위한 저자의 이유를 자세히 알아보세요.

2025. 12. 18.

그누보드 위에 예약 시스템 개발하며 느낀점

그누보드를 활용해 교육 예약 시스템을 개발하며 겪은 과정과 느낀 점을 공유합니다. 정원 관리, 지역 제한 등 실제 운영 3일차 경험을 담았습니다.

2025. 12. 17.

AI에게 나의 말투를 따라할 수 있게 하려면 어떻게 해야할까

AI가 내 말투를 따라 글을 써준다면? 나만의 블로그 글 1년치를 AI에 학습시켜, 독특한 필체를 유지하면서도 풍부한 콘텐츠를 만드는 방법을 고민합니다.

2025. 12. 16.

Coolify 설치 가이드: 우분투 서버에 나만의 PaaS 환경 구축하기

우분투 서버에 오픈소스 PaaS Coolify를 설치하여 나만의 앱 배포 환경을 구축하는 방법을 알아보세요. Docker 기반의 자동화된 배포로 개발 효율성을 극대화하고 비용을 절감할 수 있습니다.

2025. 12. 16.

개인 블로그 첫 배포 & 도메인 연결 완료: Sitemap 개선과 다음 개발 로드맵

개인 블로그 첫 배포와 도메인 연결을 성공적으로 완료하고, Sitemap.xml 오류 해결을 통해 SEO 기본을 다졌습니다. 향후 코드 스니펫 및 이미지 첨부 기능으로 블로그를 고도화할 계획을 확인하세요.

2025. 12. 15.

MVP 전략으로 개인 블로그 첫 배포하기: 완벽주의 극복 개발기

완벽주의에 갇혀 첫 블로그 배포를 미루고 있다면? MVP 전략으로 최소 기능 구현 후 개인 블로그를 성공적으로 첫 배포한 경험과 인사이트를 공유합니다.

2025. 12. 12.