개발메모장

이 글에서는 Staged Changes 기준으로, 사용자가 입력한 한 줄 프롬프트가 Inngest 이벤트로 들어가면 E2B 샌드박스 안에서 Agent Kit 에이전트가 터미널·파일 쓰기·읽기 도구로 실제 Next.js 화면을 구현하고, 결과 URL·파일·요약을 반환하는 구성을 정리한다. 배경이전에는 "프롬프트 → 코드 스니펫 한 번 생성 → 샌드박스 URL 반환" 수준이었다. 사용자 문장 하나로 실제로 동작하는 페이지까지 만들려면, 샌드박스 안에서 패키지 설치·파일 생성·수정·읽기를 반복할 수 있어야 한다. 그래서 Inngest 함수 안에 코드 에이전트를 두고, 에이전트가 도구(terminal, createOrUpdateFile, readFile) 를 쓰다가 작업이 끝나면 로 "끝났다"고 알리게 했다...

Inngest 함수 안에서 E2B 샌드박스를 띄우고, Agent Kit으로 프롬프트 기반 코드 스니펫을 생성한 뒤, 생성된 샌드박스 URL과 결과를 반환하는 구성을 정리한다.E2B란?E2B는 클라우드에서 코드 실행용 격리 환경(샌드박스)을 제공하는 서비스이다. 미리 정의한 Docker 이미지로 템플릿을 만들어 두면, 런타임에 그 템플릿으로 샌드박스를 생성하고 연결할 수 있다.이번 구성에서는 Next.js + shadcn이 설치된 E2B 템플릿을 만들고, Inngest 함수에서 해당 템플릿으로 샌드박스를 띄운다.전체 흐름사용자 입력(프롬프트)이 이벤트로 들어온다.Inngest 함수가 E2B 샌드박스를 생성하고 sandboxId를 얻는다.Agent Kit이 프롬프트를 받아 Next.js/React 스니펫 코..

Inngest로 백그라운드 잡 붙이고, GPT 요약 에이전트까지 한 번에 가져가기이 글에서는 Next.js + tRPC 프로젝트에서 버튼 한 번으로 백그라운드 잡 실행부터 GPT 요약까지 이어지게 만든 구성을 정리한다.Inngest란?Inngest는 이벤트가 발생하면 등록된 함수를 백그라운드에서 실행해 주는 서비스이다.Inngest를 쓰는 경우요청은 빨리 끝내고, 이메일·알림·무거운 연산은 나중에 처리하고 싶을 때tRPC mutation 한 번 호출 → 이벤트 발행 → 백그라운드 함수 실행까지 한 파이프라인으로 묶고 싶을 때Inngest Agent Kit이란?Inngest Agent Kit은 Inngest 함수 안에서 LLM 에이전트(요약, 분류, 추출 등)를 실행할 수 있게 해 주는 라이브러리이다. 이..

앱에 타입 안전한 API 레이어를 붙이기 위해 tRPC과 TanStack Query를 연동했다.1. 왜 tRPC인가엔드투엔드 타입 안전성: 서버 프로시저의 input/output이 그대로 클라이언트 타입으로 전달된다.REST/GraphQL 대비: 스키마 파일 없이 라우터만 작성하면 클라이언트에서 자동 완성된다.Next.js App Router와 궁합: 서버/클라이언트 컴포넌트, RSC와 함께 쓰기 좋게 설계돼 있다.이번에는 App Router + React 19 환경에서 tRPC v11 기준으로 클라이언트/서버/API 라우트까지 한 번에 잡는 구성을 목표로 했다.2. 추가한 패키지{ "@tanstack/react-query": "^5.76.1", "@trpc/client": "^11.1.2", "@..

1. Slack API 설정1.1 Slack App 생성Slack API 웹사이트 접속Create New App 클릭 → From scratch 선택App 이름과 워크스페이스 선택1.2 Bot Token 발급좌측 메뉴에서 OAuth & Permissions 선택Scopes 섹션에서 권한 추가Install to Workspace 클릭생성된 Bot User OAuth Token 복사1.3 채널 ID 확인Slack 워크스페이스에서 채널 우클릭 → View channel details하단에서 채널 ID 확인 2. Python 코드 작성2.1 필요한 패키지 설치pip install slack_sdk pytz 2.2 Slack 클래스 구현from slack_sdk import WebClientfrom slack_..

HTTP API 설계 기초HTTP API는 웹 애플리케이션이나 서비스에서 데이터를 주고받기 위해 설계되는 인터페이스이다.API를 설계할 때 가장 중요한 요소 중 하나는 리소스 식별(Resource Identification) 이다.API 요구사항 예시회원 정보를 관리하는 API를 설계한다고 가정한다.기능 요구사항은 다음과 같다.회원 목록 조회회원 조회회원 등록회원 수정회원 삭제 리소스 식별의 중요성API 설계에서 가장 중요한 점은 각 요청이 어떤 리소스를 대상으로 하는지 명확히 식별하는 것이다.URI를 통해 리소스를 정확히 구분해야 한다.같은 리소스라도 다양한 동작(GET, POST, PUT, DELETE)에 따라 URI 설계를 달리할 수 있다.리소스 식별이 명확하지 않으면 API 사용자가 혼란을 겪고,..

HTTP 개요와 메시지 구조 정리HTTP는 웹에서 데이터를 주고받기 위한 핵심 프로토콜이다. 웹 브라우저와 서버 간의 통신뿐 아니라, 서버와 서버 간의 데이터 통신에서도 사실상 표준처럼 사용되고 있다.HTTP로 전송 가능한 데이터HTTP는 특정 데이터 형식에 제한되지 않는다.다음과 같은 거의 모든 형태의 데이터를 전송할 수 있다.HTML, plain text이미지, 음성, 영상각종 파일JSON, XML(API 통신)이러한 범용성 덕분에 HTTP는 웹의 기본 통신 수단으로 자리 잡았다. HTTP 기반 프로토콜HTTP는 전송 계층 프로토콜 위에서 동작한다.TCP 기반HTTP/1.1HTTP/2UDP 기반HTTP/3HTTP의 특징HTTP는 다음과 같은 핵심적인 특징을 가진다.클라이언트 서버 구조무상태 프로토콜..

웹과 인터넷에서 리소스를 식별하거나 접근할 때 사용하는 개념이 URI이다. URI는 URL과 URN을 포함하며, 각 개념의 차이를 명확히 이해하는 것이 중요하다.URI(Uniform Resource Identifier)URI는 인터넷 상의 리소스를 식별하기 위한 규약이다.URI는 두 가지 방식으로 리소스를 나타낼 수 있다.URL(Resource Locator): 리소스의 위치를 나타낸다.URN(Resource Name): 리소스의 이름을 나타낸다.즉, URI는 URL과 URN을 모두 포함하는 상위 개념이다.URL과 URNURL(Resource Locator)URL은 특정 리소스가 어디에 위치해 있는지를 나타내는 방식이다.예시foo://example.com:8042/over/there?name=ferret..

IP(Internet Protocol)IP는 인터넷에서 데이터를 목적지까지 전달하기 위한 가장 기본적인 프로토콜이다.데이터는 패킷(Packet) 이라는 단위로 쪼개져 전송되며, 패킷에는 출발지 IP, 목적지 IP 등의 정보가 포함된다. IP의 역할지정한 IP 주소에 패킷을 전달한다.네트워크를 구성하는 여러 노드를 거쳐 목적지까지 패킷을 전달한다.패킷 전달 과정클라이언트 → 서버: 목적지 IP로 이동할 수 있는 경로의 노드들을 거쳐 패킷이 전달된다.서버 → 클라이언트: 응답 패킷 역시 출발지 IP로 이동할 수 있는 노드들을 통해 전달되는데, 이때 클라이언트 요청과는 다른 경로를 탈 수도 있다.IP 프로토콜의 한계비연결성패킷을 받을 대상이 없거나 서버가 불능 상태여도 패킷은 전송된다.프로그램 구분 불가같은 ..

개요이번에는 Turborepo 기반 모노레포에 Storybook을 붙여보자. 공통 UI 패키지를 독립적으로 개발/문서화하는 건 굉장히 중요하다. 특히 팀 단위에서 협업할 때 시각적인 UI 문서화 + 테스트 환경으로 Storybook은 사실상 필수 도구다. 프로젝트 구조my-web/├── apps/│ ├── docs/ # 문서 앱│ └── web/ # 웹 앱├── packages/│ ├── eslint-config/ # ESLint 설정│ ├── typescript-config/ # TypeScript 설정│ └── ui/ # UI 컴포넌트 라이브러리├── package.json├── turbo.json└── pnpm-w..