반응형 javascript10 AIKit #2 - Adapter Pattern으로 멀티 프로바이더 지원하기 AIKit — 아키텍처 설계핵심 문제OpenAI, Claude, Gemini의 응답 구조가 전부 다르다.// OpenAI → choices[0].message.contentdata.choices[0].message.content// Claude → content[0].textdata.content[0].text// Gemini → candidates[0].content.parts[0].textdata.candidates[0].content.parts[0].text사용자가 이 차이를 알 필요 없이 response.content로 통일하고 싶었다. Adapter Pattern이 정확히 이 문제를 해결한다.4계층 아키텍처사용자 코드 ↓ ai.chat()AIKit 메인 클래스 ↓ 캐시 → 어댑터 → 검증 →.. 2026. 2. 6. AIKit #1 - 왜 AI API 통합 라이브러리를 만들었나 AIKit — 왜 만들었나문제 인식2026년 현재 AI API를 쓰는 프로젝트를 여럿 운영하고 있다. 퍼즐 게임의 힌트 생성에 OpenAI, 블로그 초안 작성에 Claude, 간단한 분류 작업에 Gemini. 프로젝트마다 AI를 붙이는 건 좋은데, 매번 같은 코드를 다르게 작성하는 게 문제였다.문제 1: API마다 구조가 다르다세 프로바이더의 API 호출 방식을 비교하면 이렇다.// OpenAI — Authorization 헤더, messages 배열const response = await fetch('https://api.openai.com/v1/chat/completions', { headers: { 'Authorization': `Bearer ${apiKey}` }, body: JSON... 2026. 2. 5. Chrome 확장 프로그램 #2 - WebGuard QA (웹 보안 스캐너) Chrome 확장 프로그램 — WebGuard QA왜 만들었나QA 업무를 하면서 배포 전에 기본적인 보안 체크를 할 일이 많다. XSS 취약점은 없는지, CSRF 토큰은 달려 있는지, API 키가 프론트엔드에 노출되어 있지는 않은지.매번 수동으로 소스를 훑어보는 건 비효율적이다. Burp Suite 같은 전문 도구는 무겁고 학습 곡선이 높다. 간단하게 "이 페이지 한번 스캔해봐"하면 주요 취약점을 잡아주는 도구가 필요했다.그래서 Chrome 확장 프로그램으로 만들었다. Ticket Timer에 이어 두 번째 확장이다.Chrome Web Store: WebGuard QA 설치하기검사 항목Quick Scan (1~3초)4가지 핵심 검사를 빠르게 수행한다.1. XSS 탐지// 인라인 이벤트 핸들러 검출docu.. 2026. 1. 31. Chrome 확장 프로그램 #1 - Ticket Timer (티켓팅 타이머) Chrome 확장 프로그램 — Ticket Timer왜 만들었나티켓팅을 해본 사람이면 안다. 오픈 시각에 0.1초가 늦으면 매진이다. 그런데 내 컴퓨터 시계가 정확한지 확인할 방법이 마땅치 않다.기존에는 time.is 같은 사이트를 옆에 띄워놓고 비교했는데, 여러 공연을 동시에 준비할 때는 탭마다 다른 시간을 관리해야 해서 번거로웠다. 핸드폰 알람까지 세팅하면 정신없다.표준시 API와 자동 동기화되는 탭별 타이머를 만들기로 했다.Chrome Web Store: 티켓팅 타이머 설치하기핵심 기능1. 서버 시간 동기화컴퓨터 시계를 믿지 않는다. Google과 Cloudflare의 HTTP 헤더에서 서버 시간을 가져와서 로컬 시간과의 오차를 계산한다.async function syncServerTime() { .. 2026. 1. 28. 이전 1 2 다음 반응형
