Week 5 · 데이터 통신과 동적 기능 Day 33 / 42

Cloudflare Pages Functions로 나만의 API 만들기

지금까지 받기만 했던 데이터, 오늘은 직접 내보내봅니다

10초 핵심 요약

01

서버가 뭔지부터 — 식당 주방 비유

식당에서 손님(브라우저)이 메뉴판을 보고 "이거 주세요"라고 종업원에게 말하면, 이걸 요청(request)이라 부릅니다. 종업원은 그 주문을 주방에 전달하고, 주방에서 요리를 만들어 다시 종업원을 통해 손님 테이블로 가져다줍니다 — 이게 응답(response)입니다. 이 "주문을 받아서 요리를 만들어 돌려주는 주방" 역할을 하는 컴퓨터를 서버라고 부릅니다. Day 31에서 만든 fetch 코드는 정확히 "손님이 주문하는" 부분이었습니다. 오늘은 반대편, 즉 주문을 받아서 응답을 만들어주는 주방(서버) 쪽 코드를 직접 만들어봅니다.

02

왜 정적 사이트에 서버 코드가 필요할까

Day 1에서 "정적 사이트는 이미 완성된 HTML을 받는다"고 배웠습니다. 하지만 로그인 비밀번호 확인, 결제 처리처럼 비밀 열쇠(API 키, DB 접속 정보)가 필요한 작업은 브라우저(누구나 코드를 열어볼 수 있는 곳)에서 절대 처리하면 안 됩니다. 그래서 이런 일만 예외적으로, 요청이 올 때마다 그 순간 서버에서 짧게 실행되는 코드로 따로 둡니다. 이게 /functions/api/*이고, 이런 방식의 코드를 Pages Functions라고 부릅니다.

헷갈리지 마세요 — 사이트 전체가 매 요청마다 서버에서 다시 만들어지는 게 아닙니다. HTML/CSS/이미지는 여전히 미리 구워진 정적 파일이고, 딱 이 폴더만 예외적으로 실시간 실행됩니다.
03

가장 단순한 Function 만들기

functions/api/hello.js 파일 하나만 만들면, 별도 라우팅 설정 없이 /api/hello 주소가 곧바로 살아납니다(Day 12의 파일 기반 라우팅과 같은 원리입니다).

// functions/api/hello.js
export function onRequest(context) {
  return Response.json({ message: '안녕하세요!' });
}

onRequest는 이 주소로 요청이 올 때마다 실행되는 함수입니다. Response.json({...})은 객체를 JSON 형태로 바꿔서 응답으로 돌려줍니다 — Day 29에서 배운 그 JSON 형식 그대로입니다.

04

요청 방식(GET/POST) 구분하기

context.request.method로 이 요청이 GET(데이터 조회)인지 POST(데이터 전송)인지 구분할 수 있습니다. 로그인 폼은 POST로, 게시글 목록 조회는 GET으로 처리하는 식입니다.

export async function onRequest(context) {
  if (context.request.method === 'GET') {
    return Response.json({ posts: [/* ... */] });
  }
  return new Response('Method Not Allowed', { status: 405 });
}
POST로 온 데이터를 읽고 싶을 땐 await context.request.json()을 씁니다. 이건 Day 34에서 폼 제출과 함께 직접 다룹니다.
05

오늘의 실습 + AI 프롬프트

1functions/api/hello.js를 만들어 GET 요청 시 자기소개 JSON을 반환하도록 작성합니다.
2Day 31에서 만든 fetch 코드로 이 주소(/api/hello)를 직접 호출해 응답을 콘솔에 찍어봅니다.
AI에게 이렇게 지시해 보세요: "Cloudflare Pages Functions로 /api/posts를 만들어줘. GET 요청이면 더미 게시글 3개를 JSON 배열로 반환하고, 그 외 방식이면 405 응답을 줘."
06

Day 33 완료 체크리스트

정적 사이트에서 functions/api/*만 예외적으로 실시간 실행된다는 걸 설명할 수 있다.
파일 하나 = API 주소 하나라는 원칙으로 실제 Function을 만들어봤다.
context.request.method로 GET/POST를 구분해봤다.
스스로 설명해보기 — 정적 사이트인데 /functions/api/*만 예외적으로 요청마다 실행되는 이유를 설명할 수 있나요?

오늘의 용어

서버
요청을 받아 응답을 만들어 돌려주는, 주방 역할을 하는 컴퓨터
요청(request)
손님(브라우저)이 종업원(서버)에게 보내는 주문
응답(response)
주방(서버)이 만들어 돌려주는 결과
Pages Functions
정적 사이트 안에서 요청마다 실시간 실행되는 서버리스 코드
onRequest
해당 API 주소로 요청이 올 때마다 실행되는 함수
Response.json()
객체를 JSON 응답으로 변환해 돌려주는 함수