MCP(Model Context Protocol): AI와 외부 도구의 연결
AI가 파일을 읽고, DB를 조회하고, API를 호출할 수 있게 해주는 MCP. USB처럼 AI와 도구를 표준화된 방식으로 연결하는 프로토콜을 정리했다.

개발과 기술에 대한 이야기를 기록합니다.
AI가 파일을 읽고, DB를 조회하고, API를 호출할 수 있게 해주는 MCP. USB처럼 AI와 도구를 표준화된 방식으로 연결하는 프로토콜을 정리했다.

ChatGPT는 질문에 답하지만, AI Agent는 스스로 계획하고 도구를 사용해 작업을 완료한다. 이 차이가 왜 중요한지 정리했다.

AI에게 '로그인 만들어줘'라고 했더니 엉망인 코드가 나왔다. 프롬프트를 구조화하니 결과물이 완전히 달라졌다.

세 가지 AI 코딩 도구를 실제로 써보고 비교했다. 자동완성, 코드 생성, 리팩토링 각각 어디가 강한지 솔직한 후기.

10MB 이미지 업로드는 됐는데 2GB 동영상은 타임아웃이 났다. 청크 업로드, presigned URL, 그리고 재시도 로직까지 정리한 이야기.

알림 하나 보내는 건 쉽지만, 알림이 많아지면서 중복 방지, 선호도 관리, 재시도까지 고려하면 완전히 다른 문제가 된다.

SQL LIKE 검색으로 시작했다가 한계를 느꼈고, Elasticsearch를 도입했다가 운영 비용에 놀랐다. 검색 시스템의 트레이드오프를 정리했다.

결제 API 연동이 끝이 아니었다. 중복 결제 방지, 환불 처리, 멱등성까지 고려하니 결제 시스템이 왜 어려운지 뼈저리게 느꼈다.

인스타그램처럼 피드를 만들려고 했는데, 팔로워 100만 명인 사람이 글을 올리면 어떻게 되는 걸까? Push와 Pull 모델의 트레이드오프를 정리했다.

1:1 채팅은 쉬웠는데 그룹 채팅, 읽음 표시, 오프라인 메시지까지 고려하니 완전히 다른 문제였다.

URL 줄이는 거 뭐가 어렵겠어? 했는데, 해시 충돌, 만료 정책, 리다이렉트 성능까지 고려하니 시스템 디자인의 축소판이었다.

느리다고 느껴서 감으로 최적화했는데 오히려 더 느려졌다. 프로파일러로 병목을 정확히 찾는 법을 배운 이야기.

앱을 오래 쓰면 느려지는 이유가 메모리 누수였다. Chrome DevTools Memory 탭으로 범인을 찾는 과정을 정리했다.

배포 후 '잘 되는데요?' 했는데 사용자만 에러를 겪고 있었다. Sentry 도입 후 에러를 실시간으로 잡게 된 이야기.
빨간 에러 메시지가 뜨면 당황해서 그냥 구글에 복붙했는데, 스택 트레이스를 읽는 법을 알고 나니 디버깅 속도가 10배 빨라졌다.

React 앱이 느린 이유를 찾지 못해 코드만 뒤지고 있었는데, React DevTools의 Profiler와 Components 탭이 범인을 바로 찾아줬다.

API 응답이 이상한데 코드 문제인지 서버 문제인지 구분이 안 될 때, 브라우저 네트워크 탭 하나로 원인을 찾는 방법.

console.log 100개 찍어가며 디버깅하던 시절을 끝내고, 브라우저 debugger와 breakpoint로 효율적으로 버그를 잡는 방법.

검색창에 글자 하나 칠 때마다 API 콜이 날아가고, 스크롤할 때마다 이벤트가 폭주하는 문제를 디바운스와 스로틀로 해결한 이야기.

복잡한 페이지 깊숙이 있는 컴포넌트를 수정할 때마다 로그인을 다시 하고 클릭을 5번 해야 하나요? Storybook으로 컴포넌트를 격리(Isolation)해서 개발하는 CDD 방법론.
