React Native AI 기능 통합과 성능 최적화 완벽 가이드

AI API 게이트웨이 비교 분석

| 구분 | HolySheep AI | 공식 API 직접 | 일반 릴레이 서비스 | |------|-------------|---------------|-------------------| | **결제 방식** | 해외 신용카드 불필요, 로컬 결제 지원 | 해외 신용카드 필수 | 카드 종류 제한적 | | **API 키 관리** | 단일 키로 모든 모델 통합 | 모델별 별도 키 발급 | 서비스별 개별 키 | | **지원 모델** | GPT-4.1, Claude, Gemini, DeepSeek 등 | 각厂商 고유 모델만 | 일부 모델만 지원 | | **GPT-4.1 비용** | $8/MTok | $8/MTok | $10~$15/MTok | | **Claude Sonnet 4** | $15/MTok | $15/MTok | $18~$22/MTok | | **Gemini 2.5 Flash** | $2.50/MTok | $2.50/MTok | $3~$5/MTok | | **DeepSeek V3.2** | $0.42/MTok | $0.42/MTok | 미지원 또는 비쌈 | | **평균 지연 시간** | 180~250ms | 150~300ms | 300~800ms | | **무료 크레딧** | 가입 시 제공 | $5 크레딧 | Rarely provided | | **개발자 친화도** |非常高 | 중간 | 낮음~중간 | 저는 3년간 React Native로 AI 기능을 구현하며 여러 게이트웨이 서비스를 사용해보았습니다. HolySheep AI를 도입한 후 개발 효율성이 크게 향상되었고, 무엇보다 해외 신용카드 없이 결제할 수 있다는 점이 가장 큰 도움이 되었습니다. 이제 동일한 경험을 여러분과 공유하겠습니다.

프로젝트 설정과 기본 환경 구성

1. 필요한 패키지 설치

# 기본 AI 통신을 위한 HTTP 클라이언트
npm install axios

토큰 사용량 모니터링 (선택사항)
npm install @react-native-clipboard/clipboard

스트리밍 응답 처리를 위한 EventSource 폴리필
npm install eventsource

타입 정의를 위한 TypeScript 지원
npm install --save-dev @types/eventsource

2. HolySheep AI API 래퍼 클래스 생성

// src/services/HolySheepAI.ts

import axios, { AxiosInstance, AxiosError } from 'axios';
import { EventSourcePolyfill } from 'event-source-polyfill';

interface AIRequest {
  model: string;
  messages: Array<{
    role: 'system' | 'user' | 'assistant';
    content: string;
  }>;
  temperature?: number;
  max_tokens?: number;
  stream?: boolean;
}

interface AIResponse {
  id: string;
  model: string;
  choices: Array<{
    message: {
      role: string;
      content: string;
    };
    finish_reason: string;
  }>;
  usage: {
    prompt_tokens: number;
    completion_tokens: number;
    total_tokens: number;
  };
  cost?: {
    prompt_cost: number;
    completion_cost: number;
    total_cost: number;
  };
}

class HolySheepAIClient {
  private client: AxiosInstance;
  private apiKey: string;
  private baseURL = 'https://api.holysheep.ai/v1';

  // 모델별 가격표 (달러/1000토큰)
  private pricing: Record = {
    'gpt-4.1': { input: 0.008, output: 0.032 },
    'gpt-4.1-mini': { input: 0.0015, output: 0.006 },
    'claude-sonnet-4-20250514': { input: 0.015, output: 0.075 },
    'claude-3-5-sonnet-latest': { input: 0.003, output: 0.015 },
    'gemini-2.5-flash': { input: 0.0025, output: 0.01 },
    'deepseek-v3.2': { input: 0.00042, output: 0.0021 },
  };

  constructor(apiKey: string) {
    this.apiKey = apiKey;
    this.client = axios.create({
      baseURL: this.baseURL,
      headers: {
        'Authorization': Bearer ${this.apiKey},
        'Content-Type': 'application/json',
      },
      timeout: 30000,
    });
  }

  private calculateCost(model: string, usage: AIResponse['usage']): AIResponse['cost'] {
    const price = this.pricing[model] || { input: 0.008, output: 0.032 };
    return {
      prompt_cost: parseFloat((usage.prompt_tokens * price.input / 1000).toFixed(6)),
      completion_cost: parseFloat((usage.completion_tokens * price.output / 1000).toFixed(6)),
      total_cost: parseFloat(
        ((usage.prompt_tokens * price.input + usage.completion_tokens * price.output) / 1000).toFixed(6)
      ),
    };
  }

  async chat(request: AIRequest): Promise {
    try {
      const startTime = Date.now();
      const response = await this.client.post('/chat/completions', request);
      
      const result = response.data;
      result.cost = this.calculateCost(request.model, result.usage);
      
      console.log([HolySheep AI] ${request.model} 응답 시간: ${Date.now() - startTime}ms);
      console.log([HolySheep AI] 비용: $${result.cost?.total_cost} (${result.usage.total_tokens}토큰));
      
      return result;
    } catch (error) {
      this.handleError(error);
      throw error;
    }
  }

  async *streamChat(request: AIRequest): AsyncGenerator {
    const streamUrl = ${this.baseURL}/chat/completions;
    
    try {
      const response = await fetch(streamUrl, {
        method: 'POST',
        headers: {
          'Authorization': Bearer ${this.apiKey},
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ ...request, stream: true }),
      });

      if (!response.body) {
        throw new Error('스트리밍 응답을 받을 수 없습니다.');
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() || '';

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') return;
            
            try {
              const parsed = JSON.parse(data);
              const content = parsed.choices?.[0]?.delta?.content;
              if (content) yield content;
            } catch {
              // 부분 JSON 파싱 오류 무시
            }
          }
        }
      }
    } catch (error) {
      this.handleError(error);
      throw error;
    }
  }

  private handleError(error: unknown): void {
    if (error instanceof AxiosError) {
      const status = error.response?.status;
      const message = error.response?.data?.error?.message || error.message;
      
      switch (status) {
        case 401:
          console.error('[HolySheep AI] 인증 오류: API 키를 확인하세요');
          break;
        case 429:
          console.error('[HolySheep AI]_RATE_LIMIT: 요청 한도를 초과했습니다. 1초 후 재시도합니다.');
          break;
        case 500:
        case 502:
        case 503:
          console.error([HolySheep AI] 서버 오류 (${status}): 잠시 후 재시도하세요);
          break;
        default:
          console.error([HolySheep AI] 오류: ${message});
      }
    }
  }
}

export const holySheepAI = new HolySheepAIClient('YOUR_HOLYSHEEP_API_KEY');
export default HolySheepAIClient;

3. React Native Hook 구현

// src/hooks/useAIChat.ts

import { useState, useCallback, useRef } from 'react';
import { holySheepAI } from '../services/HolySheepAI';

interface Message {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  timestamp: number;
  cost?: number;
}

interface UseAIChatOptions {
  model?: string;
  temperature?: number;
  maxTokens?: number;
  systemPrompt?: string;
}

interface UseAIChatReturn {
  messages: Message[];
  isLoading: boolean;
  error: string | null;
  sendMessage: (content: string) => Promise;
  streamMessage: (content: string) => Promise;
  clearMessages: () => void;
  lastCost: number;
}

export function useAIChat(options: UseAIChatOptions = {}): UseAIChatReturn {
  const {
    model = 'gpt-4.1-mini',
    temperature = 0.7,
    maxTokens = 2048,
    systemPrompt = '당신은 유용한 AI 어시스턴트입니다.',
  } = options;

  const [messages, setMessages] = useState([
    { id: 'system-1', role: 'system', content: systemPrompt, timestamp: Date.now() },
  ]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const [lastCost, setLastCost] = useState(0);
  
  const abortControllerRef = useRef(null);

  const sendMessage = useCallback(async (content: string) => {
    const userMessage: Message = {
      id: user-${Date.now()},
      role: 'user',
      content,
      timestamp: Date.now(),
    };

    setMessages(prev => [...prev, userMessage]);
    setIsLoading(true);
    setError(null);

    try {
      const response = await holySheepAI.chat({
        model,
        messages: [
          ...messages.filter(m => m.role !== 'user').map(m => ({
            role: m.role as 'system' | 'assistant' | 'user',
            content: m.content,
          })),
          ...messages.filter(m => m.role === 'user').map(m => ({
            role: 'user' as const,
            content: m.content,
          })),
          { role: 'user', content },
        ],
        temperature,
        max_tokens: maxTokens,
      });

      const assistantMessage: Message = {
        id: response.id,
        role: 'assistant',
        content: response.choices[0].message.content,
        timestamp: Date.now(),
        cost: response.cost?.total_cost,
      };

      setLastCost(response.cost?.total_cost || 0);
      setMessages(prev => [...prev, assistantMessage]);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '알 수 없는 오류가 발생했습니다.';
      setError(errorMessage);
    } finally {
      setIsLoading(false);
    }
  }, [model, temperature, maxTokens, messages]);

  const streamMessage = useCallback(async (content: string) => {
    const userMessage: Message = {
      id: user-${Date.now()},
      role: 'user',
      content,
      timestamp: Date.now(),
    };

    const assistantMessageId = assistant-${Date.now()};
    const assistantMessage: Message = {
      id: assistantMessageId,
      role: 'assistant',
      content: '',
      timestamp: Date.now(),
    };

    setMessages(prev => [...prev, userMessage, assistantMessage]);
    setIsLoading(true);
    setError(null);

    abortControllerRef.current = new AbortController();

    try {
      let fullContent = '';
      const startTime = Date.now();

      for await (const chunk of holySheepAI.streamChat({
        model,
        messages: [
          ...messages.filter(m => m.role !== 'user').map(m => ({
            role: m.role as 'system' | 'assistant' | 'user',
            content: m.content,
          })),
          ...messages.filter(m => m.role === 'user').map(m => ({
            role: 'user' as const,
            content: m.content,
          })),
          { role: 'user', content },
        ],
        temperature,
        max_tokens: maxTokens,
        stream: true,
      })) {
        fullContent += chunk;
        setMessages(prev =>
          prev.map(msg =>
            msg.id === assistantMessageId
              ? { ...msg, content: fullContent }
              : msg
          )
        );
      }

      const elapsed = Date.now() - startTime;
      console.log([스트리밍 완료] 총 ${elapsed}ms 소요, ${fullContent.length}자);

    } catch (err) {
      if (err instanceof Error && err.name !== 'AbortError') {
        const errorMessage = err.message;
        setError(errorMessage);
        setMessages(prev => prev.filter(m => m.id !== assistantMessageId));
      }
    } finally {
      setIsLoading(false);
      abortControllerRef.current = null;
    }
  }, [model, temperature, maxTokens, messages]);

  const clearMessages = useCallback(() => {
    setMessages([{ id: 'system-1', role: 'system', content: systemPrompt, timestamp: Date.now() }]);
    setLastCost(0);
    setError(null);
  }, [systemPrompt]);

  return {
    messages,
    isLoading,
    error,
    sendMessage,
    streamMessage,
    clearMessages,
    lastCost,
  };
}

4. 샘플 AI 채팅 화면 컴포넌트

// src/screens/AIChatScreen.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
  StyleSheet,
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { useAIChat } from '../hooks/useAIChat';

const MODELS = [
  { label: 'GPT-4.1 ($8/MTok)', value: 'gpt-4.1' },
  { label: 'GPT-4.1-mini ($1.5/MTok)', value: 'gpt-4.1-mini' },
  { label: 'Claude Sonnet 4 ($15/MTok)', value: 'claude-sonnet-4-20250514' },
  { label: 'Gemini 2.5 Flash ($2.5/MTok)', value: 'gemini-2.5-flash' },
  { label: 'DeepSeek V3.2 ($0.42/MTok)', value: 'deepseek-v3.2' },
];

export default function AIChatScreen() {
  const [inputText, setInputText] = useState('');
  const [selectedModel, setSelectedModel] = useState('gpt-4.1-mini');
  const [useStreaming, setUseStreaming] = useState(true);
  
  const { messages, isLoading, error, sendMessage, streamMessage, clearMessages, lastCost } = useAIChat({
    model: selectedModel,
    temperature: 0.7,
    maxTokens: 2048,
  });

  const handleSend = async () => {
    if (!inputText.trim() || isLoading) return;
    
    const message = inputText.trim();
    setInputText('');

    if (useStreaming) {
      await streamMessage(message);
    } else {
      await sendMessage(message);
    }
  };

  const renderMessage = ({ item }: { item: typeof messages[0] }) => {
    const isUser = item.role === 'user';
    const isSystem = item.role === 'system';

    if (isSystem) return null;

    return (
      
        
          
            {item.content || (isLoading && !isUser ? '생각 중...' : '')}
          
        
        
          
            {isUser ? '나' : selectedModel.split('-')[0].toUpperCase()}
          
          {item.cost !== undefined && (
            ${item.cost.toFixed(4)}
          )}
        
      
    );
  };

  return (
    
      
        HolySheep AI Chat
        
          새 대화
        
      

      
         item.value}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => (
             setSelectedModel(item.value)}
            >
              
                {item.label}
              
            
          )}
        />
      

      
         setUseStreaming(!useStreaming)}
        >
          
            스트리밍 {useStreaming ? 'ON' : 'OFF'}
          
        
        
          총 비용: ${messages.reduce((sum, m) => sum + (m.cost || 0), 0).toFixed(4)}
        
      

       item.id}
        renderItem={renderMessage}
        contentContainerStyle={styles.messagesList}
        onContentSizeChange={() => {}}
      />

      {error && (
        
          {error}
        
      )}

      
        
        
          {isLoading ? (
            
          ) : (
            전송
          )}
        
      
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f5f5' },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  headerTitle: { fontSize: 20, fontWeight: 'bold', color: '#333' },
  clearButton: { padding: 8, backgroundColor: '#f0f0f0', borderRadius: 8 },
  clearButtonText: { color: '#666', fontSize: 14 },
  modelSelector: { backgroundColor: '#fff', paddingVertical: 8 },
  modelChip: { paddingHorizontal: 12, paddingVertical: 6, marginHorizontal: 4, borderRadius: 16, backgroundColor: '#e8e8e8' },
  modelChipSelected: { backgroundColor: '#FF6B35' },
  modelChipText: { fontSize: 12, color: '#666' },
  modelChipTextSelected: { color: '#fff', fontWeight: '600' },
  optionRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8 },
  optionButton: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 8, borderWidth: 1, borderColor: '#ccc' },
  optionButtonActive: { backgroundColor: '#4CAF50', borderColor: '#4CAF50' },
  optionText: { fontSize: 12, color: '#666' },
  optionTextActive: { color: '#fff' },
  totalCostText: { fontSize: 14, color: '#FF6B35', fontWeight: '600' },
  messagesList: { padding: 16 },
  messageContainer: { marginBottom: 12, maxWidth: '80%' },
  userMessage: { alignSelf: 'flex-end' },
  assistantMessage: { alignSelf: 'flex-start' },
  messageBubble: { padding: 12, borderRadius: 16 },
  userBubble: { backgroundColor: '#FF6B35', borderBottomRightRadius: 4 },
  assistantBubble: { backgroundColor: '#fff', borderBottomLeftRadius: 4 },
  messageText: { fontSize: 16, color: '#333', lineHeight: 22 },
  userMessageText: { color: '#fff' },
  messageMeta: { flexDirection: 'row', marginTop: 4, paddingHorizontal: 4 },
  metaText: { fontSize: 11, color: '#999' },
  costText: { fontSize: 11, color: '#4CAF50', marginLeft: 8 },
  errorBanner: { backgroundColor: '#ffebee', padding: 12, marginHorizontal: 16 },
  errorText: { color: '#c62828', fontSize: 14 },
  inputContainer: { flexDirection: 'row', padding: 16, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#e0e0e0' },
  input: { flex: 1, backgroundColor: '#f5f5f5', borderRadius: 24, paddingHorizontal: 16, paddingVertical: 12, fontSize: 16, maxHeight: 120 },
  sendButton: { marginLeft: 12, backgroundColor: '#FF6B35', borderRadius: 24, width: 60, height: 48, justifyContent: 'center', alignItems: 'center' },
  sendButtonDisabled: { backgroundColor: '#ccc' },
  sendButtonText: { color: '#fff', fontWeight: '600', fontSize: 16 },
});

성능 최적화 기법

1. 응답 캐싱 전략

// src/utils/AICache.ts

import AsyncStorage from '@react-native-async-storage/async-storage';

interface CacheEntry {
  hash: string;
  response: string;
  model: string;
  timestamp: number;
  accessCount: number;
}

class AICacheManager {
  private cachePrefix = '@holySheep_ai_cache_';
  private defaultTTL = 3600000; // 1시간
  private maxCacheSize = 100;

  private generateHash(prompt: string, model: string): string {
    const content = ${model}:${prompt};
    let hash = 0;
    for (let i = 0; i < content.length; i++) {
      const char = content.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash;
    }
    return Math.abs(hash).toString(36);
  }

  async get(prompt: string, model: string): Promise {
    const hash = this.generateHash(prompt, model);
    const key = ${this.cachePrefix}${hash};
    
    try {
      const data = await AsyncStorage.getItem(key);
      if (!data) return null;

      const entry: CacheEntry = JSON.parse(data);
      const age = Date.now() - entry.timestamp;

      if (age > this.defaultTTL) {
        await AsyncStorage.removeItem(key);
        return null;
      }

      // 접근 빈도 업데이트
      entry.accessCount += 1;
      await AsyncStorage.setItem(key, JSON.stringify(entry));

      console.log([캐시 히트] ${model} - 접근 횟수: ${entry.accessCount});
      return entry.response;
    } catch {
      return null;
    }
  }

  async set(prompt: string, model: string, response: string): Promise {
    const hash = this.generateHash(prompt, model);
    const key = ${this.cachePrefix}${hash};

    const entry: CacheEntry = {
      hash,
      response,
      model,
      timestamp: Date.now(),
      accessCount: 1,
    };

    await AsyncStorage.setItem(key, JSON.stringify(entry));
    await this.pruneOldEntries();
  }

  private async pruneOldEntries(): Promise {
    try {
      const keys = await AsyncStorage.getAllKeys();
      const cacheKeys = keys.filter(k => k.startsWith(this.cachePrefix));
      
      if (cacheKeys.length > this.maxCacheSize) {
        const entries: CacheEntry[] = [];
        for (const key of cacheKeys) {
          const data = await AsyncStorage.getItem(key);
          if (data) entries.push(JSON.parse(data));
        }

        entries.sort((a, b) => {
          const scoreA = a.accessCount / (Date.now() - a.timestamp);
          const scoreB = b.accessCount / (Date.now() - b.timestamp);
          return scoreB - scoreA;
        });

        const toRemove = entries.slice(this.maxCacheSize);
        for (const entry of toRemove) {
          await AsyncStorage.removeItem(${this.cachePrefix}${entry.hash});
        }
      }
    } catch {
      console.error('[캐시 정리 오류]');
    }
  }

  async clearAll(): Promise {
    const keys = await AsyncStorage.getAllKeys();
    const cacheKeys = keys.filter(k => k.startsWith(this.cachePrefix));
    await AsyncStorage.multiRemove(cacheKeys);
    console.log('[캐시 초기화 완료]');
  }
}

export const aiCache = new AICacheManager();

2. 연결 풀링과 요청 최적화

// src/services/ConnectionPool.ts

class AIConnectionPool {
  private connections: Map = new Map();
  private readonly maxConnections = 5;
  private readonly connectionTimeout = 30000;

  acquire(model: string): boolean {
    const current = this.connections.get(model) || 0;
    
    if (current >= this.maxConnections) {
      console.warn([연결 풀] ${model} 최대 연결 수 도달 (${current}/${this.maxConnections}));
      return false;
    }

    this.connections.set(model, current + 1);
    console.log([연결 풀] ${model} 연결 확보 (${current + 1}/${this.maxConnections}));
    return true;
  }

  release(model: string): void {
    const current = this.connections.get(model) || 1;
    const newCount = Math.max(0, current - 1);
    this.connections.set(model, newCount);
    console.log([연결 풀] ${model} 연결 해제 (${newCount}/${this.maxConnections}));
  }

  getStatus(): Record {
    return Object.fromEntries(this.connections);
  }

  async withConnection(model: string, operation: () => Promise): Promise {
    if (!this.acquire(model)) {
      // 연결 대기
      await new Promise(resolve => setTimeout(resolve, 500));
      return this.withConnection(model, operation);
    }

    try {
      return await Promise.race([
        operation(),
        new Promise((_, reject) =>
          setTimeout(() => reject(new Error('연결 타임아웃')), this.connectionTimeout)
        ),
      ]);
    } finally {
      this.release(model);
    }
  }
}

export const connectionPool = new AIConnectionPool();

자주 발생하는 오류와 해결책

오류 1: 401 인증 오류 - Invalid API Key

// 오류 메시지
// [HolySheep AI] 인증 오류: API 키를 확인하세요
// Error: Request failed with status code 401

// 해결 방법 1: API 키 확인 및 설정
// .env 파일 또는 안전하게 환경 변수 사용
const HOLYSHEEP_API_KEY = 'YOUR_HOLYSHEEP_API_KEY'; // 실제 키로 교체

// 해결 방법 2: React Native SecureStore 사용
import * as SecureStore from 'expo-secure-store';

async function getAPIKey(): Promise {
  let key = await SecureStore.getItemAsync('holysheep_api_key');
  if (!key) {
    // 최초 실행 시 사용자에게 키 입력 요청
    key = await promptUserForAPIKey();
    await SecureStore.setItemAsync('holysheep_api_key', key);
  }
  return key;
}

// 해결 방법 3: 키 형식 검증
function validateAPIKey(key: string): boolean {
  // HolySheep AI 키 형식: hs_로 시작하는 32자 이상의 문자열
  const keyPattern = /^hs_[a-zA-Z0-9]{32,}$/;
  return keyPattern.test(key);
}

// 사용 예시
async function initializeClient() {
  const apiKey = await getAPIKey();
  if (!validateAPIKey(apiKey)) {
    throw new Error('유효하지 않은 API 키 형식입니다.');
  }
  return new HolySheepAIClient(apiKey);
}

오류 2: 429 Rate Limit 초과

// 오류 메시지
// [HolySheep AI]_RATE_LIMIT: 요청 한도를 초과했습니다.

// 해결 방법 1: 지수 백오프 재시도 로직
async function retryWithBackoff(
  operation: () => Promise,
  maxRetries: number = 3,
  baseDelay: number = 1000
): Promise {
  let lastError: Error;

  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await operation();
    } catch (error) {
      lastError = error instanceof Error ? error : new Error(String(error));
      
      if (error instanceof AxiosError && error.response?.status === 429) {
        // Rate Limit의 경우 Retry-After 헤더 확인
        const retryAfter = error.response?.headers?.['retry-after'];
        const delay = retryAfter 
          ? parseInt(retryAfter, 10) * 1000 
          : baseDelay * Math.pow(2, attempt);
        
        console.log([재시도] ${attempt + 1}/${maxRetries}, ${delay}ms 후 재시도...);
        await new Promise(resolve => setTimeout(resolve, delay));
      } else {
        throw error;
      }
    }
  }

  throw lastError!;
}

// 해결 방법 2: 요청 큐 시스템
import { Queue } from 'typescript-collections';

class RequestQueue {
  private queue: Queue<() => Promise> = new Queue();
  private isProcessing: boolean = false;
  private readonly requestsPerMinute: number = 60;
  private requestTimestamps: number[] = [];

  async enqueue(operation: () => Promise): Promise {
    return new Promise((resolve, reject) => {
      this.queue.enqueue(async () => {
        try {
          // 분당 요청 수 제한
          const now = Date.now();
          this.requestTimestamps = this.requestTimestamps.filter(
            ts => now - ts < 60000
          );

          if (this.requestTimestamps.length >= this.requestsPerMinute) {
            const oldestTimestamp = this.requestTimestamps[0];
            const waitTime = 60000 - (now - oldestTimestamp);
            console.log([큐] Rate Limit 도달, ${waitTime}ms 대기...);
            await new Promise(res => setTimeout(res, waitTime));
          }

          this.requestTimestamps.push(Date.now());
          resolve(await operation());
        } catch (error) {
          reject(error);
        }
      });

      this.processQueue();
    });
  }

  private async processQueue(): Promise {
    if (this.isProcessing || this.queue.isEmpty()) return;

    this.isProcessing = true;
    while (!this.queue.isEmpty()) {
      const operation = this.queue.dequeue();
      if (operation) await operation();
    }
    this.isProcessing = false;
  }
}

export const requestQueue = new RequestQueue();

// 사용 예시
async function safeAIRequest(request: AIRequest) {
  return requestQueue.enqueue(() => 
    retryWithBackoff(() => holySheepAI.chat(request))
  );
}

오류 3: 네트워크 타임아웃 및 연결 오류

// 오류 메시지
// Error: Request timeout of 30000ms exceeded
// Error: Network Error
// Error: Connection refused

// 해결 방법 1: 타임아웃 설정 최적화
const optimizedClient = new HolySheepAIClient('YOUR_HOLYSHEEP_API_KEY');

// 커스텀 타임아웃 설정 (스트리밍 vs 일반 요청)
const timeouts = {
  chat: {
    standard: 30000,    // 30초
    streaming: 60000,   // 60초 (스트리밍은 더 긴 시간 필요)
    quick: 10000,       // 10초 (간단한 쿼리)
  },
  connect: 5000,        // 연결 수립 5초
  read: 45000,          // 읽기 45초
};

// 해결 방법 2: 네트워크 상태 감지
import NetInfo from '@react-native-community/netinfo';

class NetworkMonitor {
  private isConnected: boolean = true;
  private connectionType: string = 'unknown';

  constructor() {
    NetInfo.addEventListener(state => {
      this.isConnected = state.isConnected ?? false;
      this.connectionType = state.type ?? 'unknown';
      console.log([네트워크] 연결 상태: ${this.isConnected}, 타입: ${this.connectionType});
    });
  }

  async checkConnection(): Promise {
    const state = await NetInfo.fetch();
    this.isConnected = state.isConnected ?? false;
    return this.isConnected;
  }

  async withNetworkCheck(operation: () => Promise): Promise {
    const connected = await this.checkConnection();
    if (!connected) {
      throw new Error('네트워크 연결이 없습니다. WiFi
관련 리소스
📚 AI API 기술 문서
💰 요금제 보기
📖 개발자 문서
🚀 무료 가입
관련 문서
AI 음성 합성과 실시간 번역: 최적화 전략과 흔한 함정 해결 가이드
Gemini Vision API로 문서 OCR 처리하기: HolySheep AI 게이트웨이 활용 완벽 가이드
인도 개발자를 위한 HolySheep AI 마이그레이션 플레이북: UPI 결제와 지연 시간 최적화 완전 가이