Route Handler란?
Route Handler는 클라이언트가 서버에 특정 URL을 통해 요청을 보낼 때, 해당 요청을 처리하는 함수나 메서드를 의미한다. 이는 보통 웹 프레임워크에서 라우팅(Routing) 시스템의 일부로 사용되며, URL 경로와 HTTP 메서드(GET, POST, PUT, DELETE 등)에 따라 다르게 동작한다.
주요 기능
-
요청 경로 매핑 (Routing):
- 클라이언트의 요청 URL과 HTTP 메서드를 기반으로 적절한 Handler를 호출한다.
- 예를 들어,
/users경로로GET요청이 들어오면 사용자 목록을 반환하고,POST요청이 들어오면 새로운 사용자를 생성하는 식이다.
-
요청 데이터 처리:
- 클라이언트로부터 전달된 데이터를 파싱하고, 필요한 경우 유효성 검사를 수행한다.
- 예를 들어, POST 요청에서 전달된 JSON 데이터를 파싱해 객체로 변환하고, 필수 필드가 모두 포함되어 있는지 확인한다.
-
응답 생성:
- 요청을 처리한 후 클라이언트에게 적절한 응답을 생성하여 반환한다.
- 여기에는 HTTP 상태 코드 설정, 헤더 추가, 응답 본문 작성 등이 포함된다.
-
미들웨어와의 통합:
- 미들웨어는 요청 처리 과정의 중간 단계에서 추가적인 기능(예: 인증, 로깅 등)을 수행할 수 있도록 한다.
- Route Handler는 종종 미들웨어와 결합되어 사용된다.
예시 코드
- Next.js 설치 및 프로젝트 설정
npx create-next-app@latest my-supabase-app
cd my-supabase-app
npm install @supabase/supabase-js- Supabase 설정
Supabase 프로젝트를 생성하고, 프로젝트의 URL과 공개 키를 가져와 .env.local 파일에 저장한다.
.env.local 파일:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key- Supabase 클라이언트 설정
프로젝트 루트에 lib/supabase.js 파일을 생성하여 Supabase 클라이언트를 설정한다.
// lib/supabase.js
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);- API Route 설정
/pages/api/users.js 파일을 생성하여 API 라우트를 설정한다.
// pages/api/users.js
import { supabase } from '../../lib/supabase';
export default async function handler(req, res) {
if (req.method === 'GET') {
const { data: users, error } = await supabase.from('users').select('*');
if (error) {
return res.status(500).json({ error: error.message });
}
res.status(200).json(users);
} else if (req.method === 'POST') {
const { name, email } = req.body;
const { data, error } = await supabase.from('users').insert([{ name, email }]);
if (error) {
return res.status(500).json({ error: error.message });
}
res.status(201).json(data[0]);
} else {
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}- 데이터베이스 설정
Supabase 프로젝트의 데이터베이스에 users 테이블을 생성한다.
create table users (
id bigint generated by default as identity primary key,
name text,
email text
);- Next.js 페이지에서 API 호출
/pages/index.js 파일을 수정하여 사용자를 표시하고, 새로운 사용자를 추가할 수 있는 기능을 구현한다.
// pages/index.js
import { useState, useEffect } from 'react';
export default function Home() {
const [users, setUsers] = useState([]);
const [name, setName] = useState('');
const [email, setEmail] = useState('');
useEffect(() => {
fetch('/api/users')
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email }),
});
const newUser = await res.json();
setUsers((prevUsers) => [...prevUsers, newUser]);
};
return (
<div>
<h1>Users</h1>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name} ({user.email})</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<button type="submit">Add User</button>
</form>
</div>
);
}결론
Route Handler는 웹 애플리케이션에서 클라이언트의 요청을 적절히 처리하고 응답을 생성하는 중요한 역할을 담당한다. 다양한 웹 프레임워크에서 이를 구현할 수 있으며, 각 프레임워크는 고유한 방식으로 라우팅과 요청 처리를 제공한다. 따라서 개발자는 자신이 사용하는 프레임워크의 특징과 장점을 잘 이해하고, 효율적으로 Route Handler를 구현하는 것이 중요하다.
