전체 글147 Claude Agent SDK로 플래너 + 실행자 멀티 에이전트 만들어보기 시작하며요즘 개발자들 사이에서 멀티 에이전트가 화제라, 직접 만들어보면서 배워보기로 했다. 목표는 단순했다.플래너 에이전트가 작업 요청을 받아서 어떤 순서로 처리할지 계획만 세우고, 계획이 서면 실행자 서브에이전트를 호출해서 계획을 넘긴다. 그러면 실행자가 실제로 파일을 만들거나 코드를 작성하는 방식이다.@anthropic-ai/claude-agent-sdk (TypeScript)로 구현했고, 처음부터 끝까지 직접 코드를 짜면서 부딪힌 문제들을 그대로 기록했다. 완성된 코드만 던져놓기보다는 어디서 왜 막혔는지, 그걸 어떻게 확인했는지를 남기는 게 더 값진 것 같아서 시행착오를 그대로 살렸다. 1단계. query() 한 번 호출해보기가장 기본적인 형태부터 시작했다. import { query } from .. 2026. 9. 17. 인앱웹뷰에서 화면마다 히스토리를 관리했더니 벌어진 일 최근 EV Pay 카드를 발급하고 나면 미션을 수행할 수 있는 페이지를 만들었다. 앱 안에 인앱웹뷰로 만들었는데 인앱웹뷰로 구현할 때 중요한 점은 안드로이드의 물리 뒤로가기 버튼에도 우리가 의도한대로 '뒤로가기'를 실행해야한다. 하지만 안드로이드 물리 뒤로가기 버튼은 우리가 만든 UI를 전혀 모르고 이 버튼을 누르면 웹뷰의 브라우저 히스토리로 back()을 보내고, 더 되돌아갈 칸이 없으면 웹뷰 자체를 종료해버린다. 즉, 물리 뒤로가기 버튼 입장에서 우리 SPA는 그냥 히스토리 스택이다. 우리가 그 스택을 어떻게 쌓느냐에 따라 '레이어가 하나 닫히는 것'과 '앱이 웹뷰를 통째로 날려버리는 것'이 결정된다. 미션 중 하나였던 '충전 방법 확인하기' 화면에서 이 문제가 특히 까다로웠다. 이 라우트는 미션 목.. 2026. 9. 9. 브라우저 렌더링 1. HTML 파싱과 리소스 다운로드1.1 병렬 다운로드, 순차적 결합다운로드는 병렬이다. 리소스 다운로드는 병렬, 파싱 결과의 결합 지점은 순차적이다.브라우저가 HTML을 파싱하다가 를 만나면, CSS 파일 다운로드를 백그라운드로 요청해두고 HTML 파싱은 멈추지 않고 계속 진행한다. 이미지, 다른 리소스들도 마찬가지로 발견되는대로 병렬다운로드가 걸린다. 그런데 script를 만나게 되면(defer, async가 없는) HTML 파싱이 멈추고 브라우저는 이 스크립트를 실행하기 전에 먼저 그때까지 요청된 CSS 다운로드가 끝나기를 기다린다. 1.2 최적화 원칙CSS는 preload로 다운로드는 미리 시작하되, rel="stylesheet"로 바뀌기 전까지는 렌더 블로킹 리소스로 취급되지 않는다. Nex.. 2026. 9. 3. 무한 스크롤 최근 무한 스크롤을 구현해야 할 일이 생겼는데, 기본적인 구현부터 접근해보지 않았던 구현 방법까지 생각해보기로 했다. Next.js v16과 TanStack Query v5, react-intersection-observer를 사용했다.기본적인 무한스크롤의 코드이다."use client";import { useInfiniteQuery } from "@tanstack/react-query";import { useEffect } from "react";import { useInView } from "react-intersection-observer";import { fetchItems } from "@/lib/items";import type { CategoryId } from "@/lib/categorie.. 2026. 8. 19. B2B 어드민 서비스에 웹 접근성 적용하기 웹 접근성이란웹 접근성(Web Accessibility, 흔히 a11y로 표기)은 장애 여부, 사용 환경, 보조 기술 사용 여부와 관계없이 모든 사용자가 웹 콘텐츠를 인지하고, 조작하고, 이해할 수 있도록 만드는 설계 원칙이다. 시각 장애가 있어 스크린 리더로 화면을 "듣는" 사용자, 손 떨림이나 마비로 마우스 대신 키보드만 쓰는 사용자, 밝은 곳에서 낮은 대비 화면을 봐야 하는 사용자까지 모두를 포함하는 개념이다.국제 표준인 WCAG(Web Content Accessibility Guidelines)는 접근성을 네 가지 원칙(POUR)으로 정리한다.인지 가능(Perceivable): 이미지에는 대체 텍스트를, 색상만으로 정보를 전달하지 않는 것.운용 가능(Operable): 마우스 없이 키보드만으로도 .. 2026. 7. 27. 글 요약 MCP 만들기 매번 글을 쓰고 나면 링크드인에 올리기 전에 매번 어떤 포맷으로 옮길지 새로 고민하게 된다. 핵심 요약을 몇 개 뽑을지, 어떤 얘기를 담을지 이런 결정을 글 쓸때마다 하고 있었다. 그래서 이 반복을 MCP 서버로 고정해버리기로 했다. 글을 발행한 후 가져와서 "대괄호 제목 -> 화살표 불릿 5개 -> 링크"라는 고정된 크로스포스팅 포맷으로 변환해주는 도구이다. 클로드 데스크탑에 연결해두면 "최신 글 가져와서 링크드인에 올릴 소개글 만들어줘" 한마디로 끝난다. 1. 구조MCP 서버가 하는 일을 3개의 독립된 도구로 쪼갰다. 이렇게 나눈 이유는 RSS 요약이 항상 전체 본문이라는 보장이 없기 때문이다. 1. RSS에서 최신 글을 가져오기 : get_latest_tistory_post2. 특정 글 URL에서 .. 2026. 7. 20. 이전 1 2 3 4 ··· 25 다음
