정적 블로그에서 백엔드 통신하기 - 일반 웹과의 결정적 차이

sequenceDiagram
    participant U as 사용자
    participant F as 프론트엔드
    participant B as 백엔드 서버
    participant DB as 데이터베이스

    U->>F: 1. 로그인 (ID/PW)
    F->>B: 2. POST /api/login
    B->>DB: 3. 사용자 인증
    DB-->>B: 4. 인증 성공
    B-->>F: 5. JWT 토큰 발급
    F->>F: 6. 토큰 저장

    U->>F: 7. 데이터 요청
    F->>B: 8. GET /api/data + JWT
    B->>B: 9. JWT 검증
    B->>DB: 10. 데이터 조회
    DB-->>B: 11. 결과 반환
    B-->>F: 12. 데이터 전달
    F-->>U: 13. 화면 표시

// 1. 로그인
async function login(username, password) {
  const response = await axios.post('/api/login', { username, password })
  const { token } = response.data

  // 2. JWT 토큰 저장
  localStorage.setItem('authToken', token)
}

// 3. API 호출 시 토큰 사용
async function fetchUserData() {
  const token = localStorage.getItem('authToken') // 사용자별 인증키

  const response = await axios.get('/api/user/profile', {
    headers: {
      Authorization: `Bearer ${token}`, // 개인별 인증 토큰
    },
  })

  return response.data
}

// 절대 이렇게 하면 안 됨!
const SUPABASE_KEY = 'eyJhbGciOi...' // 소스코드에 노출!

async function saveData(email) {
  await fetch('https://api.supabase.co/rest/v1/subscribers', {
    headers: {
      apikey: SUPABASE_KEY, // 개발자 도구에서 보임!
      Authorization: `Bearer ${SUPABASE_KEY}`,
    },
    body: JSON.stringify({ email }),
  })
}

// 프론트엔드 (API 키 없음)
async function saveData(email) {
  await fetch('/api/newsletter', {
    // 내 서버로 요청
    method: 'POST',
    body: JSON.stringify({ email }),
  })
}

// 백엔드 (Node.js 서버)
app.post('/api/newsletter', async (req, res) => {
  const { email } = req.body
  const SUPABASE_KEY = process.env.SUPABASE_KEY // 환경변수 (서버에만 존재)

  await fetch('https://api.supabase.co/rest/v1/subscribers', {
    headers: {
      apikey: SUPABASE_KEY,
      Authorization: `Bearer ${SUPABASE_KEY}`,
    },
    body: JSON.stringify({ email }),
  })

  res.json({ success: true })
})

# 빌드 과정
gatsby build
→ src/ (React 코드) → public/ (정적 HTML/CSS/JS)

# 결과물
public/
├── index.html
├── about/index.html
├── blog/post-1/index.html
└── static/
    └── app.js  ← 이 파일이 브라우저에서 실행됨

// 정적 블로그에서 절대 금지!
const GA4_KEY = 'YOUR_GOOGLE_API_KEY'

function BlogStats() {
  const [stats, setStats] = useState({})

  useEffect(() => {
    fetch(
      'https://analyticsdata.googleapis.com/v1beta/properties/123456789:runReport',
      {
        headers: {
          Authorization: `Bearer ${GA4_KEY}`, // 크롬 개발자 도구에 노출!
        },
      }
    )
      .then(res => res.json())
      .then(setStats)
  }, [])

  return <div>{stats.todayVisitors}</div>
}

graph TB
    subgraph 정적 블로그 구조
        A[정적 HTML/CSS/JS]
        B[Netlify Functions]
        C[환경변수 저장소]
    end

    subgraph 외부 서비스
        D[Supabase]
        E[SendGrid]
        F[Google Analytics]
    end

    A -->|API 키 없음| B
    B -->|환경변수 사용| C
    C -.->|API 키 저장| B
    B -->|인증된 요청| D
    B -->|인증된 요청| E
    B -->|인증된 요청| F

    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#f1f8e9

프로젝트 구조:
frontend/          ← React 코드 (브라우저)
 └── src/
     └── components/

backend/           ← Node.js 서버
 ├── server.js
 ├── routes/
 └── .env          ← API 키 저장

프로젝트 구조:
src/               ← React 코드 (빌드되면 HTML/JS)
 └── components/

netlify/           ← 서버리스 함수 (Netlify에서 실행)
 └── functions/
     └── newsletter-submit.js

.env               ← 로컬 개발용 (Git에 업로드 안 함)
Netlify 대시보드   ← 배포 환경 변수 (서버에만 존재)

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 프론트엔드 (공통 - API 키 없음)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

// 일반 웹
async function submitNewsletter(email) {
  await fetch('https://myserver.com/api/newsletter', {
    // 내 Node.js 서버
    method: 'POST',
    body: JSON.stringify({ email }),
  })
}

// 정적 블로그
async function submitNewsletter(email) {
  await fetch('/.netlify/functions/newsletter-submit', {
    // Netlify Function
    method: 'POST',
    body: JSON.stringify({ email }),
  })
}

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 백엔드 (API 키 사용)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

// 일반 웹 - Node.js 서버 (backend/server.js)
app.post('/api/newsletter', async (req, res) => {
  const { email } = req.body
  const SUPABASE_KEY = process.env.SUPABASE_KEY // 환경변수

  await fetch('https://api.supabase.co/rest/v1/subscribers', {
    headers: {
      apikey: SUPABASE_KEY,
      Authorization: `Bearer ${SUPABASE_KEY}`,
    },
    body: JSON.stringify({ email }),
  })

  res.json({ success: true })
})

// 정적 블로그 - Netlify Function (netlify/functions/newsletter-submit.js)
exports.handler = async event => {
  const { email } = JSON.parse(event.body)
  const SUPABASE_KEY = process.env.SUPABASE_KEY // 환경변수 (동일!)

  await fetch('https://api.supabase.co/rest/v1/subscribers', {
    headers: {
      apikey: SUPABASE_KEY,
      Authorization: `Bearer ${SUPABASE_KEY}`,
    },
    body: JSON.stringify({ email }),
  })

  return {
    statusCode: 200,
    body: JSON.stringify({ success: true }),
  }
}

# .env (Git에 업로드하지 않음!)
SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SENDGRID_API_KEY=SG.aBcDeFgHiJkLmNoPqRsTuVwXyZ...
GA4_CREDENTIALS_JSON=eyJjbGllbnRfZW1haWwiOi...

https://app.netlify.com/sites/your-site/settings/deploys
→ Environment variables 섹션
→ Add variable 클릭

Key: SUPABASE_SERVICE_KEY
Value: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Key: SENDGRID_API_KEY
Value: SG.aBcDeFgHiJkLmNoPqRsTuVwXyZ...

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 프론트엔드 (src/components/BlogStats.jsx)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

function BlogStats() {
  const [stats, setStats] = useState({})

  useEffect(() => {
    fetch('https://myserver.com/api/blog-stats') // Node.js 서버
      .then(res => res.json())
      .then(setStats)
  }, [])

  return (
    <div>
      <p>오늘 방문자: {stats.todayVisitors}</p>
      <p>총 방문자: {stats.totalVisitors}</p>
    </div>
  )
}

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 백엔드 (backend/routes/blog-stats.js)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

const { BetaAnalyticsDataClient } = require('@google-analytics/data')

app.get('/api/blog-stats', async (req, res) => {
  // 환경변수에서 GA4 인증 정보 가져오기
  const credentials = JSON.parse(process.env.GA4_CREDENTIALS_JSON)

  const analyticsDataClient = new BetaAnalyticsDataClient({
    credentials: {
      client_email: credentials.client_email,
      private_key: credentials.private_key,
    },
  })

  // GA4에서 데이터 가져오기
  const [todayData, totalData] = await Promise.all([
    analyticsDataClient.runReport({
      property: `properties/${process.env.GA4_PROPERTY_ID}`,
      dateRanges: [{ startDate: 'today', endDate: 'today' }],
      metrics: [{ name: 'activeUsers' }],
    }),
    analyticsDataClient.runReport({
      property: `properties/${process.env.GA4_PROPERTY_ID}`,
      dateRanges: [{ startDate: '2020-01-01', endDate: 'today' }],
      metrics: [{ name: 'totalUsers' }],
    }),
  ])

  res.json({
    todayVisitors: parseInt(
      todayData[0].rows?.[0]?.metricValues?.[0]?.value || '0'
    ),
    totalVisitors: parseInt(
      totalData[0].rows?.[0]?.metricValues?.[0]?.value || '0'
    ),
  })
})

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// 프론트엔드 (src/components/BlogStats.jsx)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

function BlogStats() {
  const [stats, setStats] = useState({})

  useEffect(() => {
    fetch('/.netlify/functions/blog-stats') // Netlify Function
      .then(res => res.json())
      .then(setStats)
  }, [])

  return (
    <div>
      <p>오늘 방문자: {stats.todayVisitors}</p>
      <p>총 방문자: {stats.totalVisitors}</p>
    </div>
  )
}

// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// Netlify Function (netlify/functions/blog-stats.js)
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

const { BetaAnalyticsDataClient } = require('@google-analytics/data')

exports.handler = async event => {
  // 환경변수에서 GA4 인증 정보 가져오기 (일반 웹과 동일!)
  const credentials = JSON.parse(process.env.GA4_CREDENTIALS_JSON)

  const analyticsDataClient = new BetaAnalyticsDataClient({
    credentials: {
      client_email: credentials.client_email,
      private_key: credentials.private_key,
    },
  })

  // GA4에서 데이터 가져오기 (일반 웹과 동일!)
  const [todayData, totalData] = await Promise.all([
    analyticsDataClient.runReport({
      property: `properties/${process.env.GA4_PROPERTY_ID}`,
      dateRanges: [{ startDate: 'today', endDate: 'today' }],
      metrics: [{ name: 'activeUsers' }],
    }),
    analyticsDataClient.runReport({
      property: `properties/${process.env.GA4_PROPERTY_ID}`,
      dateRanges: [{ startDate: '2020-01-01', endDate: 'today' }],
      metrics: [{ name: 'totalUsers' }],
    }),
  ])

  return {
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      todayVisitors: parseInt(
        todayData[0].rows?.[0]?.metricValues?.[0]?.value || '0'
      ),
      totalVisitors: parseInt(
        totalData[0].rows?.[0]?.metricValues?.[0]?.value || '0'
      ),
    }),
  }
}

graph LR
    subgraph 일반 웹
        A1[사용자 인증] --> B1[JWT 토큰]
        B1 --> C1[백엔드 API 호출]
    end

    subgraph 정적 블로그
        A2[서버 인증] --> B2[환경변수]
        B2 --> C2[서버리스 함수 호출]
    end

    style A1 fill:#e3f2fd
    style A2 fill:#fff3e0