Skill, Plugin, MCP 차이와 활용법

Codex, Claude Code, Gemini CLI의 확장 기능 비교AI 코딩 도구에 반복해서 같은 작업을 맡기다 보면, 매번 설명하던 기준과 절차를 따로 저장하고 싶어집니다. 코드 리뷰 기준을 재사용하거나 GitHub의 데이터를 불러오고, 팀원에게 같은 개발 환경을 제공하려는 경우입니다.이때 등장하는 개념이 Skill, MCP, Plugin입니다. Codex와 Claude Code는 Plugin이라는 이름을 쓰고, Gemini CLI는 비슷한 역할의 확장 패키지를 Extension이라고 부릅니다.각각 무엇을 담당하는지 구분한 뒤, 세 도구의 저장 경로와 사용법, 하나의 Skill을 함께 활용하는 방법을 살펴보겠습니다.목차Skill, MCP, Plugin의 역할Codex의 Skill과 PluginCl..

웹 지도나 3D 관제 화면을 개발하다 보면 WMS, 좌표계, LOD, 메시지 브로커처럼 서로 다른 분야의 용어를 함께 접하게 됩니다. 각각의 뜻을 알아도 실제 시스템에서 어떤 역할을 맡는지 연결하기는 쉽지 않습니다.이 글에서는 지도 데이터를 전달하는 방식부터 좌표 계산, 브라우저 렌더링, 실시간 데이터 처리까지 네 가지 영역으로 나누어 정리합니다. 센서 위치와 측정값을 지도에 표시하는 상황을 예로 들어, 구현할 때 혼동하기 쉬운 차이도 함께 살펴보겠습니다.목차지도 서비스와 데이터 형식좌표계와 공간 데이터베이스3D와 브라우저 렌더링실시간 통신과 데이터 처리참고 문서1. 지도 서비스와 데이터 형식OGC: 공간정보 표준을 만드는 기구OGC(Open Geospatial Consortium)는 서로 다른 시스템이..

개발자의 일은 오랫동안 “코드를 잘 쓰는 일”로 이해되어 왔다.물론 틀린 말은 아니다. 개발자는 결국 코드를 통해 문제를 해결한다. 하지만 AI 코딩 도구가 일상으로 들어온 지금, 이 정의는 조금 부족해졌다. 이제 코드는 더 이상 개발자만이 처음부터 끝까지 손으로 작성하는 산물이 아니다. ChatGPT, GitHub Copilot, Cursor, Claude Code 같은 도구는 함수 초안, 테스트 코드, 리팩토링 방향, 문서, 에러 원인 분석까지 빠르게 만들어낸다.Stack Overflow 2025 Developer Survey에 따르면 응답자의 84%가 개발 과정에서 AI 도구를 사용하거나 사용할 계획이 있다고 답했고, 전문 개발자의 51%는 매일 AI 도구를 사용한다고 답했다. 하지만 동시에 AI ..

상태 관리는 라이브러리 선택이 아니라 소유권, 렌더링 위치, 생명주기 설계다React 프로젝트를 시작하면 상태 관리는 대체로 단순하다. const [isOpen, setIsOpen] = useState(false);const [keyword, setKeyword] = useState("");const [selectedId, setSelectedId] = useState(null); 하지만 프로젝트가 커지면 질문이 달라진다.이 상태를 useState에 둘까?Context에 둘까?Zustand에 둘까?TanStack Query에 둘까?URL에 둘까?Server Component에서 가져올까?Server Action으로 바꿀까?localStorage에 저장할까? 상태 관리가 어려워지는 이유는 상태가 많아져서만..

상태 관리는 “어디에 저장할까”가 아니라 “누가 소유하는가”의 문제다프론트엔드 애플리케이션이 작을 때 상태 관리는 단순해 보인다. const [user, setUser] = useState(null);const [isModalOpen, setIsModalOpen] = useState(false);const [keyword, setKeyword] = useState(""); 하지만 기능이 늘어나면 상태는 빠르게 복잡해진다.사용자 정보, 권한, 상품 목록, 검색 필터, 페이지 번호, 모달 열림 여부, 폼 입력값, 선택된 행, 정렬 조건, 알림 배지, 로딩 상태, 에러 상태, 캐시, WebSocket 메시지, optimistic update까지 모두 “상태”라는 이름으로 섞이기 시작한다.이때 많은 팀이 다음 ..

Promise와 async/await 깊이 이해하기 4/4들어가며Promise 코드를 작성하는 것은 어렵지 않다.어려운 것은 작업의 생명주기를 설계하는 일이다.사용자가 페이지를 떠나면 요청을 중단해야 하는가?timeout이 발생하면 실제 네트워크 요청도 종료되는가?부모 작업이 실패하면 자식 작업은 어떻게 되는가?어떤 오류를 재시도해도 안전한가?영원히 pending인 Promise는 무엇을 메모리에 유지하는가?하나가 아닌 여러 비동기 값은 무엇으로 표현해야 하는가? Promise는 성공과 실패를 표현하지만 다음 요소를 직접 제공하지 않는다.취소timeout자원 소유권재시도 정책멱등성backpressure구조적 동시성 이 요소들은 애플리케이션 아키텍처가 별도로 설계해야 한다.1. Promise에는 취소가 없..