API · 외부 데이터 연동

Framer 사이트에 실시간 데이터(환율, 재고, 외부 게시글 등)를 가져올 수 있습니다.

방법 1. CMS로 가져오기

Framer CMS는 외부 소스(구글 시트, API 등)와 동기화할 수 있습니다. 코드 없이 콘텐츠를 외부에서 관리하고 싶을 때 적합합니다.

방법 2. 코드로 fetch


import { useEffect, useState } from "react"
 
export function withRate(Component) {
  return (props) => {
    const [rate, setRate] = useState("…")
    useEffect(() => {
      fetch("https://api.example.com/usd-krw")
        .then((r) => r.json())
        .then((d) => setRate(d.rate))
    }, [])
    return <Component {...props} text={`환율: ${rate}원`} />
  }
}

⚠️

CORS — 브라우저에서 직접 호출하면 일부 API는 CORS 정책으로 막힙니다. 이럴 때는 중간 프록시(서버리스 함수 등)를 두는 방법을 고려하세요. Vercel Functions가 흔히 쓰입니다.

국내 서비스 연동 예

네이버/카카오 지도 API 임베드
구글 시트를 데이터 백엔드처럼 사용
자체 백엔드(Spring/FastAPI 등) API 연결

다음 단계

성능 최적화