LEVEL 36 QUEST

백엔드 로직과 API 연동

무료 웹 도구에 필요한 백엔드 로직을 구축하고, AI API와 외부 서비스를 연동하는 방법을 학습합니다.

Stage 11-2 — 백엔드 로직과 API 연동

백엔드가 필요한 경우와 필요 없는 경우

모든 무료 도구에 백엔드가 필요한 것은 아닙니다. 먼저 당신의 도구가 어떤 유형인지 판단하세요:

백엔드 불필요 (프론트엔드만으로 충분):

계산기/시뮬레이터 (단순 수학 계산)
변환기 (단위, 색상 등)
체크리스트 (로컬 스토리지 활용)
타이머/카운터
텍스트 포매터/에디터

백엔드 필요:

AI 기능이 필요한 도구 (API 키 보호)
데이터 저장/비교가 필요한 도구
외부 API 연동 (날씨, 주식 등)
사용자 데이터 통계/분석
이메일 발송 기능

중요: 가능하면 백엔드 없이 만드세요. 백엔드가 없으면 서버 비용이 0원이고, 배포가 간단하고, 유지보수가 거의 필요 없습니다.

서버리스 백엔드 구축

Vercel Serverless Functions 활용

백엔드가 필요하다면, 서버리스(Serverless)가 최선의 선택입니다. 서버를 직접 관리할 필요 없이, 함수 단위로 백엔드 로직을 실행할 수 있습니다.

Vercel Serverless Functions 기본 구조:

// api/calculate.js
export default function handler(req, res) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    const { income, hours, expenses } = req.body;

    // 유효성 검사
    if (!income || !hours) {
        return res.status(400).json({ error: '필수 입력값이 없습니다' });
    }

    // 계산 로직
    const netIncome = income - expenses;
    const hourlyRate = Math.round(netIncome / hours);
    const annualIncome = netIncome * 12;

    // 결과 반환
    res.status(200).json({
        hourlyRate,
        annualIncome,
        percentile: calculatePercentile(hourlyRate),
        tips: generateTips(hourlyRate)
    });
}
            

프론트엔드에서 호출:

async function calculateRate() {
    const response = await fetch('/api/calculate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            income: Number(incomeInput.value),
            hours: Number(hoursInput.value),
            expenses: Number(expensesInput.value)
        })
    });
    const data = await response.json();
    displayResult(data);
}
            

이 구조는 Vercel에 배포하면 자동으로 서버리스 함수로 실행됩니다. 비용: 무료 tier에서 월 100,000회 호출 가능 — 대부분의 무료 도구에 충분합니다.

AI API 연동 (OpenAI / Claude)

AI 기능이 필요한 도구(텍스트 분석, 생성 등)는 AI API를 연동해야 합니다. 중요: API 키는 반드시 서버 사이드에서 관리하세요!

OpenAI API 연동 예시:

// api/analyze.js
import OpenAI from 'openai';

const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY // 환경변수에서 로드
});

export default async function handler(req, res) {
    const { text } = req.body;

    try {
        const completion = await openai.chat.completions.create({
            model: 'gpt-4o-mini', // 저렴하고 빠른 모델
            messages: [
                {
                    role: 'system',
                    content: `당신은 쓰레드 콘텐츠 분석 전문가입니다.
                    주어진 텍스트의 바이럴 가능성을 100점 만점으로 평가하고,
                    개선 제안을 3가지 해주세요.
                    JSON 형식으로 응답하세요.`
                },
                {
                    role: 'user',
                    content: text
                }
            ],
            response_format: { type: 'json_object' },
            max_tokens: 500
        });

        const result = JSON.parse(completion.choices[0].message.content);
        res.status(200).json(result);
    } catch (error) {
        res.status(500).json({ error: '분석 중 오류가 발생했습니다' });
    }
}
            

API 비용 관리 팁:

gpt-4o-mini 모델 사용 (gpt-4 대비 1/100 가격)
max_tokens을 제한하여 비용 통제
Rate Limiting을 적용하여 악용 방지
결과를 캐싱하여 동일 요청 재호출 방지
하루 사용량 상한선 설정

API 키 보안 필수 사항

절대로 API 키를 프론트엔드 JavaScript에 직접 넣지 마세요! 브라우저 개발자 도구에서 누구나 볼 수 있습니다. 반드시 서버 사이드(Serverless Function) 또는 환경변수를 통해 관리하세요. Vercel의 경우 프로젝트 설정 > Environment Variables에서 추가합니다.

🔒

여기까지는 미리보기입니다

백엔드 로직과 API 연동
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)