MCP 서버 만들기 입문: AI 에이전트가 내 API를 호출하게 하는 방법

요즘 AI 개발 도구는 단순히 질문에 답하는 수준을 넘어섰습니다. 이제 AI는 코드를 읽고, 파일을 수정하고, 테스트를 실행하고, GitHub 이슈를 확인하고, 외부 API를 호출하는 방향으로 발전하고 있습니다.그런데 여기서 중요한 문제가 생깁니다. AI가 외부 도구나 데이터에 안전하고 일관된 방식으로 접근하려면 어떻게 해야 할까요?예를 들어 AI에게 이런 작업을 시키고 싶다고 해보겠습니다.“내 프로젝트의 GitHub 이슈를 조회해줘”“고객 주문 API에서 최근 주문 목록을 가져와줘”“로컬 문서에서 특정 내용을 찾아줘”“사내 데이터베이스에서 프로젝트 상태를 확인해줘”이런 작업을 하려면 AI가 외부 시스템과 연결되어야 합니다. 기존 방식이라면 각 AI 도구마다 별도의 연동 코드를 만들어야 했습니다.Clau..

AI 코딩 에이전트 제대로 쓰기: AGENTS.md 작성법

최근 개발 방식은 빠르게 바뀌고 있다. 이전에는 ChatGPT에게 코드를 물어보고, 답변을 복사해서 프로젝트에 붙여 넣는 방식이 많았다.하지만 이제는 Cursor, Claude Code, GitHub Copilot, Codex 같은 AI 코딩 에이전트가 실제 코드베이스를 읽고, 파일을 수정하고, 테스트를 실행하고, PR 단위 작업까지 수행하는 방향으로 발전하고 있다. 이때 중요한 문제가 생긴다AI는 우리 프로젝트의 규칙을 어떻게 알 수 있을까?사람 개발자는 README를 읽고, 기존 코드를 보고, 팀 컨벤션을 파악하면서 작업한다. 하지만 AI 에이전트에게는 프로젝트 규칙을 더 명확하게 알려줘야 한다.이때 사용하는 파일이 바로 `AGENTS.md`다. 쉽게 말해 AI 에이전트를 위한 작업 지침서다.READ..

UI 상태 하나 바꾸겠다고 오늘도 useState와 onMouseEnter를 번갈아 가며 자바스크립트 코드를 짜셨나요?혹은 복잡한 CSS 계층 구조를 잡기 위해 프로젝트 시작부터 습관적으로 Sass(SCSS) 환경부터 세팅하고 계시진 않나요? 이제 무거운 자바스크립트 연산과 외부 전처리기에서 벗어날 때가 되었습니다.2026년 현재, 순수 네이티브 CSS만으로도 우리가 JS로 힘들게 구현했던 수많은 로직들을 단 몇 줄의 코드로 우아하게 처리할 수 있는 시대가 열렸습니다. 불필요한 렌더링을 줄이고 프론트엔드의 성능과 가독성을 한 단계 끌어올려 줄 모던 CSS의 두 가지 마법.이제는 선택이 아닌 필수가 될 수도 있는 Nesting과 :has() 선택자의 진짜 위력을 실무 예제와 함께 살펴보겠습니다. CSS N..

React 개발자라면 요즘 매일같이 듣는 단어가 있을 겁니다. 바로 'React Server Components(RSC)'죠. "Next.js 13 이후로 그냥 기본으로 쓰는 거 아니야?" 혹은 "기존 SSR(서버 사이드 렌더링)이랑 이름만 다르고 비슷한 거겠지"라고 생각하며 무심코 넘어가셨나요? 만약 여전히 단순한 텍스트나 정적 데이터를 띄우기 위해 수백 KB의 자바스크립트 번들을 통째로 브라우저에 내려보내고 있다면, 여러분은 지금 React 렌더링 패러다임의 가장 거대한 변화를 놓치고 있는지도 모릅니다. '클라이언트'와 '서버'의 경계를 허물고, 번들 사이즈 0(Zero)의 기적을 만들어내는 RSC. 오늘은 매번 헷갈리던 RSC의 진짜 정체와, 왜 이것이 단순한 기능 추가를 넘어 프론트엔드 아키텍처의..

Storybook으로 React 컴포넌트 문서화하기 - 실무 가이드🎯 왜 Storybook인가?프론트엔드 개발을 하다 보면 이런 상황을 겪게 됩니다:"이 버튼 컴포넌트 어떻게 쓰는 거지?""props가 뭐가 있더라?""디자이너님, 이 상태 확인해 주세요" (매번 로컬 서버 켜기...)Storybook은 이 모든 문제를 해결합니다. 컴포넌트를 독립적으로 개발하고, 문서화하고, 테스트할 수 있는 워크샵이죠.🚀 5분 만에 시작하기설치# 기존 React 프로젝트에 추가npx storybook@latest init설치가 끝나면 자동으로 .storybook 폴더와 예제 스토리가 생성됩니다.실행npm run storybook# http://localhost:6006 에서 확인첫 번째 Story 작성하기Button..

원문: https://fintlabs.medium.com/optimized-multi-stage-docker-builds-with-turborepo-and-pnpm-for-nodejs-microservices-in-a-monorepo-c686fdcf051f 아래 번역글은 원문 글쓴이의 허가를 받고 진행한 번역본입니다. 원문 번역 이후에 실제로 프로젝트에 반영하면서 수정, 추가 한 내용들 남기겠습니다. microservices와 monorepo의 세계에서 Docker 빌드를 최적화 하는 것은 효율성과 성능에 중요합니다. 소개 (Introduction)Multi-stage Docker builds는 가벼우면서 효율적인 컨테이너를 생성하는 기술입니다. 그러나 Turborepo와 PNPM를 함께 사용할 때 mi..