CLOID.AI

오늘의 실습

직접 실행해보는 AI 실습 3선. 커맨드를 복사해서 바로 시작하세요.

1
Claude Code입문

Claude Code로 컴포넌트 자동 생성

Next.js 프로젝트에서 Claude Code를 사용해 UI 컴포넌트를 자동으로 생성하고 테스트하는 실습

실행 커맨드
claude "Create a responsive card component with TypeScript and Tailwind"
실습 단계
  1. 1Claude Code 설치: npm install -g @anthropic-ai/claude-code
  2. 2프로젝트 디렉토리에서 claude 명령어 실행
  3. 3생성된 컴포넌트 확인 및 수정
2
MCP중급

MCP Filesystem 서버 연결

로컬 파일시스템에 접근하는 MCP 서버를 Claude Desktop에 연결하고 파일 읽기/쓰기를 실습

실행 커맨드
npx @modelcontextprotocol/server-filesystem ~/Desktop
실습 단계
  1. 1Claude Desktop 앱 설치
  2. 2claude_desktop_config.json에 MCP 서버 추가
  3. 3Claude에서 '파일 목록 보여줘' 요청으로 연결 확인
3
Gemini중급

Gemini API 스트리밍 응답 구현

Gemini 2.0 Flash API를 사용해 실시간 스트리밍 응답을 Next.js에 구현하는 실습

실행 커맨드
npm install @google/generative-ai
실습 단계
  1. 1Google AI Studio에서 API 키 발급
  2. 2환경 변수에 GEMINI_API_KEY 설정
  3. 3app/api/stream/route.ts 파일 생성 후 스트리밍 구현