반응형 javascript9 서버 파일 관리 시스템을 정적 데모로 재현한 이야기 왜 만들었나상업 프로젝트에서 PHP + AJAX 기반의 파일 관리 시스템을 구현한 적이 있다. 서버의 디렉토리를 트리로 탐색하고, CodeMirror로 파일을 열어보고, 생성/이름변경/삭제까지 가능한 관리자 도구였다.문제는 이걸 포트폴리오에서 보여줄 방법이 없다는 것이었다. 서버가 필요한 시스템이니 GitHub Pages에서는 동작하지 않는다. 스크린샷만으로는 "이런 걸 만들었습니다"라고 말하기에 부족했다.그래서 프론트엔드만 떼어내서 정적 JSON 데이터로 동작하는 체험형 데모를 만들기로 했다.라이브 데모: lukaplayground.github.io/demos/file-manager/구조demos/file-manager/├── index.html # HTML + inline CSS (단.. 2026. 2. 11. AIKit #8 - 사이드 프로젝트 개발 회고 AIKit — 개발 회고시작"또 시작하고 안 끝내는 프로젝트가 아닐까."사이드 프로젝트를 시작할 때마다 드는 생각이다. 그런데 AIKit은 달랐다. 기능이 동작하는 라이브러리가 나왔고, GitHub에 공개했고, 문서와 예제를 작성했고, 블로그 시리즈 8편을 완성했다.첫 번째 버전 (v0.1.0)처음에는 50줄짜리 AIClient 클래스였다. OpenAI API를 호출하고 응답을 반환하는 게 전부였다.// v0.1.0 — 50줄짜리 시작class AIClient { async chat(message, apiKey) { const response = await fetch('https://api.openai.com/v1/chat/completions', { headers:.. 2026. 2. 9. AIKit #6 - React & Vue에서 AIKit 사용하기 AIKit — React & Vue 연동자주 받는 질문"React에서 어떻게 쓰나요?" — AIKit은 순수 JavaScript 라이브러리다. 모든 프레임워크에서 동일하게 동작한다. 핵심은 프레임워크의 상태 관리 패턴에 맞춰 감싸는 것이다.React 연동Custom Hook// useAIKit.jsimport { useState, useRef, useCallback } from 'react';export function useAIKit(config) { const aiRef = useRef(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [messag.. 2026. 2. 8. AIKit #5 - PHP 프로젝트에서 AIKit 연동하기 AIKit — PHP 연동 가이드왜 클라이언트 사이드 AI인가"JavaScript 라이브러리를 PHP 프로젝트에 어떻게 쓰지?"라는 질문을 받는다. 답은 클라이언트 사이드에서 AI를 처리하고, PHP는 데이터 저장만 담당하는 구조다.전통적 방식 vs 클라이언트 사이드 AI항목서버 사이드 AI클라이언트 사이드 AI (AIKit)API 호출PHP → AI API브라우저 → AI API서버 부하모든 요청이 서버 경유서버 부하 0응답 속도서버 왕복 추가직접 통신 (빠름)프로바이더 변경백엔드 재배포프론트엔드만 수정아키텍처브라우저├── AIKit (CDN) → AI API 직접 통신└── AJAX → PHP 서버 → DB 저장PHP: 인증, 데이터 저장, 비즈니스 로직AIKit: AI 통신, 응답 처리, 클라이언트.. 2026. 2. 8. AIKit #4 - 5분 만에 AI 챗봇 만들기 AIKit — 5분 챗봇 튜토리얼목표프레임워크 없이, HTML 파일 하나로 AI 챗봇을 만든다. React도 Vue도 필요 없다. AIKit CDN 한 줄이면 된다.준비물텍스트 에디터웹 브라우저AI API 키 1개 (OpenAI, Claude, Gemini 중 아무거나)1단계: HTML 구조 전송 한 줄로 AIKit이 로드된다. 빌드 도구 없이 바로 사용 가능하다.2단계: AIKit 초기화// AIKit 인스턴스 생성const ai = new AIKit({ provider: 'openai', apiKey: localStorage.getItem('apiKey') || prompt('API Key를 .. 2026. 2. 7. 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. 이전 1 2 다음 반응형
