2. API 심화 개념 – 서비스 구축을 위한 핵심 개념

By 콘텐츠플로우

이 강의에서는 API의 심화 개념을 배우고, 실제 서비스를 구축하는 실습을 진행합니다.이론과 실습을 병행하여, API를 실제 프로젝트에서 어떻게 활용하는지 익힐 수 있도록 구성하였습니다. API 기본개념에 대해 아직 모르시는 분들은 api 기본 개념에 관한 내용을 글을 확인 후 진행해보시길 바랍니다.

API 심화 개념 – 서비스 구축을 위한 핵심 개념

1. API 심화 개념 – 서비스 구축을 위한 핵심 개념

1-1. API의 종류 및 실전 활용법

API는 목적과 기능에 따라 여러 가지 유형이 있습니다.
각각의 API가 어떻게 사용되는지 이해하고, 실전 프로젝트에서 적절한 API를 선택하는 것이 중요합니다.

1. REST API (Representational State Transfer)

  • 가장 널리 사용되는 API 구조입니다.
  • HTTP 요청을 사용하여 클라이언트와 서버가 데이터를 주고받습니다.
  • 특징: 경량, 표준화, 다양한 클라이언트 지원
  • 예제:
    • GET /users/1 → 특정 사용자의 정보를 가져오기
    • POST /reviews → 새로운 리뷰 추가하기

2. GraphQL API

  • 클라이언트가 원하는 데이터만 요청할 수 있습니다.
  • 특징: REST보다 유연하고, 불필요한 데이터 호출을 방지할 수 있습니다.
  • 예제:
{
  user(id: "1") {
    name
    email
    reviews {
      title
      rating
    }
  }
}

3. WebSocket API

  • 실시간 데이터 통신이 필요한 경우 적합합니다. (예: 채팅, 실시간 알림)
  • 특징: 지속적인 연결을 유지하여 빠른 응답을 제공합니다.
  • 예제: 실시간 리뷰 업데이트 기능 구현

4. Open API (공개 API)

  • 누구나 사용할 수 있도록 제공되는 API입니다.
  • 예제:
    • TMDB API (영화 & 드라마 데이터 제공)
    • OpenWeather API (날씨 정보 제공)
    • ChatGPT API (AI 텍스트 생성 API)
  • 1-2. API 인증(Authentication)과 보안(Security)
  • API는 보안이 중요합니다.
  • 허가되지 않은 사용자가 데이터를 조작하거나 가져가지 못하도록 보호해야 합니다.
  • 1. API 인증 방식
  • API Key (간단한 방식)
    • 사용자가 API 키를 요청할 때, API 요청 헤더에 포함해야 합니다.
    • 예제: Authorization: Bearer YOUR_API_KEY
  • OAuth 2.0 (SNS 로그인, 권한 관리)
    • Google, Facebook 로그인 등에서 사용됩니다.
    • Access Token을 발급받아 인증하는 방식입니다.
  • JWT (JSON Web Token) – 보안 강화
    • 클라이언트가 로그인하면 서버가 JWT를 발급하고,
    • 이후 요청 시 JWT를 포함하여 인증합니다.
  • 2. API 보안 강화 방법
  • HTTPS 사용 (SSL/TLS 암호화)
  • API 요청 제한 (Rate Limiting)
  • CORS 설정 (Cross-Origin Resource Sharing)

2. API 실습 – 실제 서비스 구축

실습 프로젝트: “슬픈 드라마 추천 API 만들기”

2-1. 프로젝트 목표 및 서비스 흐름

프로젝트 목표

  • 사용자가 슬픈 드라마 리뷰를 남기면 API가 데이터를 저장
  • API가 AI 분석을 통해 슬픈 드라마를 추천
  • API를 활용하여 웹사이트에서 추천 결과를 표시

서비스 흐름

  1. 사용자가 리뷰를 남김 → API가 DB에 저장
  2. API가 사용자의 감성 분석 (AI 활용)
  3. API가 DB에서 비슷한 감성의 드라마 추천
  4. API가 추천된 드라마를 웹사이트로 반환

3. 실습 1: API 설계 및 데이터 모델링

3-1. API 설계 (엔드포인트 정의)

HTTP 메서드엔드포인트설명
POST/reviews사용자 리뷰 추가
GET/reviews/{drama}특정 드라마의 리뷰 가져오기
GET/recommend/{user}사용자 맞춤형 슬픈 드라마 추천

3-2. 데이터 모델 설계

DB 테이블 구조 (PostgreSQL 기준)

ID사용자드라마 제목감성 점수 (0~1)리뷰 내용
1content나의 아저씨0.9감동적인 드라마였어요 ㅠㅠ
2flow미스터 션샤인0.85눈물 없이는 못 봅니다…

4. 실습 2: FastAPI를 활용한 API 구축

4-1. FastAPI 설치 및 기본 설정

bash 예제 코드

pip install fastapi uvicorn psycopg2

4-2. API 기본 코드 작성

python 예제 코드

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Review(BaseModel):
    user: str
    drama: str
    rating: int
    review: str

@app.post("/reviews")
def add_review(review: Review):
    return {"message": f"{review.drama}에 대한 리뷰가 저장되었습니다!"}

4-3. 실행 및 테스트

bash 예제 코드

uvicorn main:app --reload

API 호출 예제 (POST 요청)

http 예제코드

POST /reviews
{
    "user": "content",
    "drama": "나의 아저씨",
    "rating": 5,
    "review": "정말 감동적이었어요!"
}

5. 실습 3: AI 감성 분석 & 추천 기능 추가

5-1. 감성 분석 API 연동

python 예제 코드


from transformers import pipeline

emotion_model = pipeline("text-classification", model="j-hartmann/emotion-english-distilroberta-base")

def analyze_emotion(text):
    result = emotion_model(text)
    return result[0]["score"] if result[0]["label"] == "sadness" else 0.0

5-2. AI 추천 시스템 구현

python 예제 코드

@app.get("/recommend/{user}")
def recommend_drama(user: str):
    # 슬픈 감성 점수가 높은 드라마 추천
    return {"recommended": ["나의 아저씨", "미스터 션샤인"]}

API 요청 & 응답 예제
http 예제 코드

GET /recommend/content
{
    "recommended": ["나의 아저씨", "미스터 션샤인"]
}

6. API 배포 및 웹사이트 연동 – 실전 적용하기

이제 우리가 만든 FastAPI 기반의 API를 실제 서버에 배포하고, React 웹사이트에서 호출하는 방법을 배워보겠습니다.
배포 후 API가 정상적으로 작동하는지 테스트하고, 성능을 최적화하는 과정까지 진행합니다.

6-1. FastAPI 배포 (AWS, Vercel, Heroku 활용)

FastAPI로 만든 API를 배포하여 누구나 사용할 수 있도록 웹 서버에서 실행해야 합니다.
배포할 수 있는 대표적인 방법은 AWS, Vercel, Heroku 등이 있습니다.

FastAPI 배포를 위한 필수 개념

  1. 서버 실행 방식: FastAPI는 로컬 개발 환경에서는 uvicorn을 사용하지만,
    배포 시에는 gunicorn과 같은 WSGI 서버를 사용해야 합니다.
  2. 클라우드 서버 선택: AWS, Vercel, Heroku 등의 플랫폼을 선택해야 합니다.
  3. 도메인 연결: 배포된 API가 http://localhost:8000이 아니라,
    https://myapi.com 같은 도메인에서 동작하도록 설정합니다.

방법 1: AWS EC2로 배포하기

AWS EC2(Elastic Compute Cloud)는 클라우드에서 가상 서버를 제공하여 API를 배포할 수 있도록 합니다.

1. EC2 인스턴스 생성

  1. AWS 콘솔에서 EC2 인스턴스를 생성합니다.
  2. Ubuntu 20.04 또는 Amazon Linux 선택
  3. 최소 사양: t2.micro (무료)

2. EC2에 FastAPI 배포하기

EC2 인스턴스에 SSH로 접속 아래 코드 실행

    ssh -i your-key.pem ubuntu@your-ec2-ip

    Python 및 패키지 설치

      sudo apt update && sudo apt upgrade -y
      sudo apt install python3-pip -y
      pip3 install fastapi uvicorn

      API 실행

        uvicorn main:app --host 0.0.0.0 --port 8000

        방화벽 설정

        • AWS 보안 그룹에서 포트 8000을 열어야 합니다.
        • http://your-ec2-ip:8000/docs 에서 API가 작동하는지 확인합니다.

          3. Nginx & Gunicorn으로 배포 최적화

          3-1. Gunicorn 설치 및 실행

            pip install gunicorn
            gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app

            3-2. Nginx 설정 (Reverse Proxy)

              sudo apt install nginx -y
              sudo nano /etc/nginx/sites-available/api
              nginx복사편집server {
    listen 80;
    server_name your-api.com;
    
    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

              3-3. Nginx 적용 후 서비스 시작

                sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled
                sudo systemctl restart nginx

                3-4. 도메인 연결 및 SSL 인증서 적용

                  sudo apt install certbot python3-certbot-nginx -y
                  sudo certbot --nginx -d your-api.com

                  이제 https://your-api.com 에서 FastAPI를 사용할 수 있습니다!

                  방법 2: Vercel로 배포하기

                  Vercel은 무료로 FastAPI 애플리케이션을 배포할 수 있는 서비스입니다.

                  1. Vercel 계정 생성 후 CLI 설치

                    npm install -g vercel
                    vercel login

                    2. FastAPI 프로젝트를 Vercel에 연결 후 배포

                    vercel

                    이제 https://your-api.vercel.app에서 API를 사용할 수 있습니다.

                    방법 3: Heroku로 배포하기

                    Heroku는 간단하게 API를 배포할 수 있는 클라우드 서비스입니다.

                    1. Heroku CLI 설치

                    curl https://cli-assets.heroku.com/install.sh | sh
                    heroku login

                    2. FastAPI 프로젝트를 Heroku에 배포

                    heroku create your-api-name
                    git push heroku main

                    이제 https://your-api.herokuapp.com 에서 API를 사용할 수 있습니다.

                    6-2. React 웹사이트에서 API 호출하여 결과 표시

                    FastAPI로 배포한 API를 React 웹사이트에서 호출하여 데이터를 가져오는 방법을 배워보겠습니다.

                    1. React 프로젝트 설정

                    npx create-react-app my-app
                    cd my-app
                    npm start

                    2. React에서 API 호출 (useEffect + fetch 사용)

                    javascript

                    import { useEffect, useState } from "react";

                    function App() {
                        const [data, setData] = useState([]);

                        useEffect(() => {
                            fetch("https://your-api.com/recommend/content")
                                .then(response => response.json())
                                .then(result => setData(result.recommended));
                        }, []);

                        return (
                            <div>
                                <h1>추천 드라마</h1>
                                <ul>
                                    {data.map((drama, index) => (
                                        <li key={index}>{drama}</li>
                                    ))}
                                </ul>
                            </div>
                        );
                    }

                    export default App;

                    3. CORS 설정 (FastAPI에서 React 요청 허용하기)

                    FastAPI는 기본적으로 보안상 CORS 요청을 막습니다.

                    React에서 API를 정상적으로 호출하려면, FastAPI에서 CORS 설정을 추가해야 합니다.

                    from fastapi.middleware.cors import CORSMiddleware

                    app.add_middleware(
                        CORSMiddleware,
                        allow_origins=["*"],  # 특정 도메인만 허용 가능
                        allow_credentials=True,
                        allow_methods=["*"],
                        allow_headers=["*"],
                    )

                    이제 React에서 API를 정상적으로 호출할 수 있습니다.

                    6-3. 테스트 및 최적화 진행

                    API가 정상적으로 배포되었는지 확인하고, 성능을 최적화하는 과정입니다.

                    1. API 테스트 도구 활용하기

                    • Postman: API 요청을 직접 보내서 응답 확인
                    • cURL: 터미널에서 API 호출 테스트
                    curl -X GET "https://your-api.com/recommend/content
                    • FastAPI 내장 /docs 활용:
                      • https://your-api.com/docs 에서 API 자동 문서 확인

                    2. API 응답 속도 최적화

                    • Redis 캐싱 적용: 자주 요청되는 데이터를 Redis에 저장
                    • 데이터베이스 인덱싱: SQL에서 인덱스 추가하여 검색 속도 향상
                    • Gunicorn + Nginx 조합: 고성능 웹 서버 설정

                    3. 로깅 및 모니터링 추가

                    • FastAPI에서 logging을 사용하여 API 호출 로그 저장
                    • AWS CloudWatch, Grafana 등의 모니터링 도구 연동

                    7. 최종 프로젝트 정리

                    • API를 활용하여 사용자 리뷰를 DB에 저장
                    • AI를 활용하여 감성 분석 후 슬픈 드라마 추천
                    • 웹사이트에서 API를 호출하여 추천 결과 표시

                    8. 실전 학습으로 만들어볼 수 있는 프로젝트 응용 아이디어

                    • AI 기반 뉴스 요약 API
                    • 실시간 채팅 API (WebSocket 활용)
                    • SNS 로그인 API (OAuth 2.0 활용)

                    주요 기술 개념 정리 (Nginx, Gunicorn, Vercel, Heroku, React, CORS, FastAPI)

                    용어설명주요 역할활용 예제
                    Nginx웹 서버이자 리버스 프록시 서버정적 파일 서빙, 로드 밸런싱, 보안 강화웹사이트 트래픽 분산, API 서버 앞단에서 요청 관리
                    GunicornPython WSGI 서버FastAPI, Django, Flask 등의 애플리케이션을 실행FastAPI 배포 시, gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app 사용
                    Vercel클라우드 배포 플랫폼정적 사이트 및 백엔드 서버 배포React, Next.js, FastAPI 등의 무료 배포 지원
                    HerokuPaaS(Platform as a Service)코드만 업로드하면 자동으로 서버를 배포git push heroku main으로 FastAPI 배포
                    React프론트엔드 라이브러리UI 구성 요소(Component) 기반으로 웹 앱 제작useState, useEffect를 사용한 데이터 관리
                    CORS보안 정책(교차 출처 요청 방지)외부 도메인에서 API 요청을 할 수 있도록 허용FastAPI에서 allow_origins=["*"] 설정 필요
                    FastAPIPython 기반 웹 프레임워크API 개발을 쉽고 빠르게 구현@app.get("/") 로 API 라우팅 가능

                    Content

                    → Content View