Next.js와 Supabase 연동하기: 초보자도 따라할 수 있는 상세 가이드
•
웹 개발을 시작하면서 가장 먼저 부딪히는 벽이 바로 프론트엔드와 백엔드를 어떻게 연결하느냐는 문제입니다. Next.js로 만든 멋진 화면에 데이터베이스를 연결하고 싶은데, 어디서부터 시작해야 할지 막막하신가요?
•
오늘은 Next.js와 Supabase를 연동하는 방법을 처음부터 끝까지 차근차근 알아보겠습니다. 프로그래밍을 이제 막 시작한 분들도 충분히 따라올 수 있도록 모든 용어와 개념을 쉽게 풀어서 설명드릴게요.
1. 기본 개념부터 차근차근 이해하기
1) API란 무엇인가요?
API를 레스토랑으로 비유해보겠습니다. 여러분이 손님이고, 주방이 데이터베이스라고 생각해보세요. 웨이터가 바로 API입니다. 손님(사용자)이 메뉴를 주문하면, 웨이터(API)가 주방(데이터베이스)에 전달하고, 요리(데이터)를 가져다주는 역할을 합니다.
Next.js에서 Supabase와 통신할 때도 마찬가지입니다. 사용자가 웹사이트에서 버튼을 클릭하면, API가 그 요청을 받아서 데이터베이스에 전달하고, 결과를 다시 화면에 보여주는 것이죠.
2) 외부 API vs 자체 API의 차이점
외부 API는 다른 회사가 만든 서비스를 사용하는 것입니다. Supabase가 제공하는 데이터베이스 접근 기능이 바로 외부 API입니다. 하지만 이걸 웹사이트에서 직접 사용하면 보안상 위험할 수 있어요. 마치 집 열쇠를 현관문 밖에 걸어두는 것과 같습니다.
그래서 우리는 자체 API를 만들어서 사용합니다. Next.js의 API Routes가 바로 이 역할을 합니다. 외부인이 직접 우리 데이터베이스에 접근하지 못하도록 중간에서 검문소 역할을 하는 거죠.
3) Next.js의 핵심 구조 이해하기
Next.js는 크게 두 가지 부분으로 나뉩니다. 서버에서 실행되는 부분과 사용자의 브라우저에서 실행되는 부분이죠.
서버 컴포넌트는 데이터를 미리 가져와서 HTML로 만들어 보내주는 역할을 합니다. 페이지를 처음 열 때 빠르게 내용을 보여줄 수 있어요. 클라이언트 컴포넌트는 사용자가 버튼을 클릭하거나 입력하는 등의 상호작용을 처리합니다.
4) Supabase가 뭔가요?
Supabase는 데이터베이스를 쉽게 사용할 수 있게 해주는 서비스입니다. PostgreSQL이라는 강력한 데이터베이스를 기반으로 하면서도, 초보자도 쉽게 사용할 수 있도록 다양한 기능을 제공합니다.
데이터 저장은 물론이고, 사용자 인증, 파일 저장, 실시간 데이터 동기화 등 웹사이트에 필요한 거의 모든 백엔드 기능을 제공합니다.
2. 프로젝트 시작하기: 첫 발걸음
1) Next.js 프로젝트 만들기
터미널을 열고 다음 명령어를 입력합니다:
npx create-next-app@latest my-app
cd my-app
npm install @supabase/supabase-js
Shell
복사
이 명령어들은 Next.js 프로젝트를 생성하고, Supabase를 사용하기 위한 도구를 설치하는 과정입니다. 마치 요리를 시작하기 전에 재료와 조리도구를 준비하는 것과 같습니다.
2) Supabase 프로젝트 설정하기
Supabase 웹사이트에서 새 프로젝트를 만든 후, 프로젝트 설정에서 URL과 API 키를 찾을 수 있습니다. 이 정보들을 안전하게 보관하기 위해 .env.local 파일을 만들어 저장합니다:
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
Plain Text
복사
이 키들은 우리 애플리케이션이 Supabase와 통신할 때 사용하는 일종의 비밀번호입니다. NEXT_PUBLIC으로 시작하는 것은 브라우저에서도 사용할 수 있고, 그렇지 않은 것은 서버에서만 사용합니다.
3) Supabase 클라이언트 설정하기
이제 Supabase와 연결하는 코드를 작성해봅시다:
// lib/supabase/client.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)
JavaScript
복사
이 코드는 Supabase와 통신할 수 있는 연결 통로를 만드는 것입니다. 전화기로 비유하면, 전화번호를 입력하고 통화 버튼을 누르기 전 상태라고 할 수 있습니다.
3. 데이터베이스 테이블 만들기
1) 테이블이란 무엇인가요?
데이터베이스의 테이블은 엑셀 시트와 비슷합니다. 행과 열로 이루어져 있고, 각 열은 특정한 종류의 정보를 저장합니다. 예를 들어 블로그를 만든다면, 게시물을 저장하는 테이블이 필요하겠죠.
2) 게시물 테이블 만들기
Supabase 대시보드에서 SQL 에디터를 열고 다음 코드를 실행합니다:
CREATE TABLE posts (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
content TEXT,
author_id UUID REFERENCES auth.users(id),
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
SQL
복사
이 코드가 하는 일을 하나씩 설명하면:
•
id: 각 게시물의 고유 번호 (자동으로 생성됨)
•
title: 게시물 제목 (반드시 입력해야 함)
•
content: 게시물 내용
•
author_id: 작성자 정보 (사용자 테이블과 연결)
•
created_at, updated_at: 작성 시간과 수정 시간
3) 보안 설정하기
데이터베이스를 만들었다고 끝이 아닙니다. 누가 어떤 데이터를 볼 수 있는지 규칙을 정해야 합니다:
-- RLS(Row Level Security) 활성화
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;
-- 모든 사람이 게시물을 읽을 수 있도록 설정
CREATE POLICY "Anyone can read posts" ON posts
FOR SELECT USING (true);
-- 로그인한 사용자만 게시물을 작성할 수 있도록 설정
CREATE POLICY "Authenticated users can create posts" ON posts
FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);
SQL
복사
4. API Routes 만들기: 데이터베이스와 통신하기
1) API Route란?
Next.js의 API Routes는 서버에서 실행되는 함수입니다. 사용자의 요청을 받아서 처리하고, 결과를 돌려주는 역할을 합니다. /app/api 폴더 안에 파일을 만들면 자동으로 API 엔드포인트가 됩니다.
2) 게시물 목록 가져오기 API
// app/api/posts/route.js
import { NextResponse } from 'next/server'
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.SUPABASE_SERVICE_ROLE_KEY
)
export async function GET(request) {
try {
// 데이터베이스에서 게시물 가져오기
const { data, error } = await supabase
.from('posts')
.select('*')
.order('created_at', { ascending: false })
if (error) throw error
// 결과를 JSON 형태로 반환
return NextResponse.json({ data })
} catch (error) {
// 에러가 발생하면 에러 메시지 반환
return NextResponse.json(
{ error: error.message },
{ status: 500 }
)
}
}
JavaScript
복사
이 코드는 데이터베이스에서 모든 게시물을 가져와서 최신순으로 정렬한 후 반환합니다. try-catch는 에러가 발생했을 때를 대비한 안전장치입니다.
3) 새 게시물 작성 API
export async function POST(request) {
try {
// 요청에서 데이터 추출
const body = await request.json()
const { title, content } = body
// 데이터베이스에 새 게시물 저장
const { data, error } = await supabase
.from('posts')
.insert([{ title, content }])
.select()
if (error) throw error
return NextResponse.json({ data })
} catch (error) {
return NextResponse.json(
{ error: error.message },
{ status: 500 }
)
}
}
JavaScript
복사
5. 프론트엔드에서 API 사용하기
1) 게시물 목록 표시하기
이제 만든 API를 실제로 사용해봅시다:
// app/posts/page.js
'use client'
import { useState, useEffect } from 'react'
export default function PostsPage() {
const [posts, setPosts] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
// 컴포넌트가 화면에 나타날 때 게시물 가져오기
fetchPosts()
}, [])
const fetchPosts = async () => {
try {
const response = await fetch('/api/posts')
const { data } = await response.json()
setPosts(data)
} catch (error) {
console.error('게시물을 가져오는 중 에러 발생:', error)
} finally {
setLoading(false)
}
}
if (loading) return <div>로딩 중...</div>
return (
<div>
<h1>게시물 목록</h1>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
<small>{new Date(post.created_at).toLocaleDateString()}</small>
</article>
))}
</div>
)
}
JavaScript
복사
이 코드는 화면이 처음 로드될 때 API를 호출해서 게시물 목록을 가져오고, 화면에 표시합니다. useState는 데이터를 저장하는 상자이고, useEffect는 특정 시점에 코드를 실행하는 도구입니다.
2) 새 게시물 작성 폼 만들기
// components/CreatePostForm.js
'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
export default function CreatePostForm() {
const router = useRouter()
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [isSubmitting, setIsSubmitting] = useState(false)
const handleSubmit = async (e) => {
e.preventDefault() // 페이지 새로고침 방지
setIsSubmitting(true)
try {
const response = await fetch('/api/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ title, content })
})
if (response.ok) {
// 성공하면 게시물 목록 페이지로 이동
router.push('/posts')
}
} catch (error) {
alert('게시물 작성 중 에러가 발생했습니다.')
} finally {
setIsSubmitting(false)
}
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="title">제목</label>
<input
id="title"
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="content">내용</label>
<textarea
id="content"
value={content}
onChange={(e) => setContent(e.target.value)}
rows={5}
/>
</div>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? '저장 중...' : '게시물 작성'}
</button>
</form>
)
}
JavaScript
복사
6. 실시간 기능 추가하기
1) 실시간 업데이트란?
실시간 업데이트는 페이지를 새로고침하지 않아도 새로운 데이터가 자동으로 화면에 나타나는 기능입니다. 채팅 앱에서 상대방이 보낸 메시지가 바로 보이는 것처럼요.
2) 실시간 게시물 업데이트 구현
// hooks/useRealtimePosts.js
import { useEffect, useState } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
export function useRealtimePosts() {
const [posts, setPosts] = useState([])
const supabase = createClientComponentClient()
useEffect(() => {
// 초기 데이터 로드
const loadPosts = async () => {
const { data } = await supabase
.from('posts')
.select('*')
.order('created_at', { ascending: false })
setPosts(data || [])
}
loadPosts()
// 실시간 구독 설정
const channel = supabase
.channel('posts-changes')
.on(
'postgres_changes',
{
event: '*', // 모든 변경사항 감지
schema: 'public',
table: 'posts'
},
(payload) => {
// 새 게시물이 추가되면
if (payload.eventType === 'INSERT') {
setPosts(current => [payload.new, ...current])
}
// 게시물이 수정되면
else if (payload.eventType === 'UPDATE') {
setPosts(current =>
current.map(post =>
post.id === payload.new.id ? payload.new : post
)
)
}
// 게시물이 삭제되면
else if (payload.eventType === 'DELETE') {
setPosts(current =>
current.filter(post => post.id !== payload.old.id)
)
}
}
)
.subscribe()
// 컴포넌트가 사라질 때 구독 해제
return () => {
supabase.removeChannel(channel)
}
}, [])
return posts
}
JavaScript
복사
이 코드는 데이터베이스의 변경사항을 실시간으로 감지하고, 화면을 자동으로 업데이트합니다. 마치 뉴스 속보가 실시간으로 업데이트되는 것과 같은 원리입니다.
7. Edge Functions 활용하기
1) Edge Functions가 뭔가요?
Edge Functions는 서버리스 함수로, 복잡한 로직을 처리할 때 사용합니다. 일반 API Routes보다 더 가볍고 빠르며, 전 세계 여러 지역에서 실행될 수 있어 사용자와 가까운 곳에서 처리됩니다.
2) 이메일 알림 Edge Function 만들기
// supabase/functions/send-notification/index.ts
import { serve } from '<https://deno.land/std@0.168.0/http/server.ts>'
import { createClient } from '<https://esm.sh/@supabase/supabase-js@2>'
serve(async (req) => {
try {
const { postId, action } = await req.json()
// Supabase 클라이언트 생성
const supabase = createClient(
Deno.env.get('SUPABASE_URL')!,
Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
)
// 게시물 정보 가져오기
const { data: post } = await supabase
.from('posts')
.select('*, author:users(*)')
.eq('id', postId)
.single()
// 이메일 발송 로직 (예시)
if (action === 'comment') {
// 게시물 작성자에게 댓글 알림 발송
console.log(`${post.author.email}에게 댓글 알림 발송`)
}
return new Response(
JSON.stringify({ success: true }),
{ headers: { 'Content-Type': 'application/json' } }
)
} catch (error) {
return new Response(
JSON.stringify({ error: error.message }),
{ status: 500 }
)
}
})
TypeScript
복사
3) Next.js에서 Edge Function 호출하기
// 댓글 작성 시 알림 발송
const sendNotification = async (postId) => {
const { data, error } = await supabase.functions.invoke(
'send-notification',
{
body: { postId, action: 'comment' }
}
)
if (error) {
console.error('알림 발송 실패:', error)
}
}
JavaScript
복사
8. 파일 업로드 기능 구현하기
1) Supabase Storage 설정
Supabase Storage는 이미지, 동영상 등의 파일을 저장할 수 있는 공간입니다. 클라우드 저장소라고 생각하면 됩니다.
2) 이미지 업로드 컴포넌트
// components/ImageUploader.js
'use client'
import { useState } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
export default function ImageUploader({ onUploadComplete }) {
const [uploading, setUploading] = useState(false)
const [preview, setPreview] = useState(null)
const supabase = createClientComponentClient()
const handleFileSelect = (e) => {
const file = e.target.files[0]
if (file) {
// 미리보기 생성
const reader = new FileReader()
reader.onloadend = () => {
setPreview(reader.result)
}
reader.readAsDataURL(file)
}
}
const uploadImage = async (file) => {
setUploading(true)
try {
// 파일명 생성 (중복 방지)
const fileExt = file.name.split('.').pop()
const fileName = `${Date.now()}.${fileExt}`
const filePath = `post-images/${fileName}`
// Supabase Storage에 업로드
const { error: uploadError } = await supabase.storage
.from('images')
.upload(filePath, file)
if (uploadError) throw uploadError
// 공개 URL 가져오기
const { data } = supabase.storage
.from('images')
.getPublicUrl(filePath)
onUploadComplete(data.publicUrl)
} catch (error) {
alert('이미지 업로드 실패: ' + error.message)
} finally {
setUploading(false)
}
}
return (
<div>
<input
type="file"
accept="image/*"
onChange={handleFileSelect}
disabled={uploading}
/>
{preview && (
<div>
<img src={preview} alt="미리보기" style={{ maxWidth: '200px' }} />
<button
onClick={() => uploadImage(e.target.files[0])}
disabled={uploading}
>
{uploading ? '업로드 중...' : '업로드'}
</button>
</div>
)}
</div>
)
}
JavaScript
복사
9. 사용자 인증 시스템 구축하기
1) 인증이 왜 필요한가요?
인증 시스템은 웹사이트에서 "당신이 누구인지" 확인하는 과정입니다. 로그인을 통해 각 사용자에게 맞춤형 서비스를 제공하고, 권한을 관리할 수 있습니다.
2) 회원가입과 로그인 구현
// components/AuthForm.js
'use client'
import { useState } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
export default function AuthForm() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [isLogin, setIsLogin] = useState(true)
const [loading, setLoading] = useState(false)
const supabase = createClientComponentClient()
const router = useRouter()
const handleSubmit = async (e) => {
e.preventDefault()
setLoading(true)
try {
if (isLogin) {
// 로그인
const { error } = await supabase.auth.signInWithPassword({
email,
password,
})
if (error) throw error
router.push('/dashboard')
} else {
// 회원가입
const { error } = await supabase.auth.signUp({
email,
password,
options: {
emailRedirectTo: `${location.origin}/auth/callback`
}
})
if (error) throw error
alert('확인 이메일을 보냈습니다. 이메일을 확인해주세요!')
}
} catch (error) {
alert(error.message)
} finally {
setLoading(false)
}
}
return (
<div>
<h2>{isLogin ? '로그인' : '회원가입'}</h2>
<form onSubmit={handleSubmit}>
<input
type="email"
placeholder="이메일"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="비밀번호"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit" disabled={loading}>
{loading ? '처리 중...' : (isLogin ? '로그인' : '회원가입')}
</button>
</form>
<button onClick={() => setIsLogin(!isLogin)}>
{isLogin ? '회원가입하기' : '로그인하기'}
</button>
</div>
)
}
JavaScript
복사
3) 인증 상태 관리하기
// providers/AuthProvider.js
'use client'
import { createContext, useContext, useEffect, useState } from 'react'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
const AuthContext = createContext({})
export function AuthProvider({ children }) {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
const supabase = createClientComponentClient()
useEffect(() => {
// 현재 로그인 상태 확인
const checkUser = async () => {
const { data: { session } } = await supabase.auth.getSession()
setUser(session?.user ?? null)
setLoading(false)
}
checkUser()
// 인증 상태 변화 감지
const { data: { subscription } } = supabase.auth.onAuthStateChange(
(event, session) => {
setUser(session?.user ?? null)
}
)
return () => subscription.unsubscribe()
}, [])
return (
<AuthContext.Provider value={{ user, loading }}>
{children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)
JavaScript
복사
10. 성능 최적화 팁
1) 데이터 캐싱하기
같은 데이터를 반복해서 가져오는 것은 비효율적입니다. Next.js의 캐싱 기능을 활용해봅시다:
// app/posts/[id]/page.js
export default async function PostPage({ params }) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_SITE_URL}/api/posts/${params.id}`,
{
next: { revalidate: 60 } // 60초 동안 캐시
}
)
const { data: post } = await response.json()
return (
<article>
<h1>{post.title}</h1>
<div>{post.content}</div>
</article>
)
}
JavaScript
복사
2) 페이지네이션 구현하기
많은 데이터를 한 번에 불러오면 느려집니다. 페이지 단위로 나누어 보여주는 것이 좋습니다:
// hooks/usePagination.js
import { useState, useCallback } from 'react'
export function usePagination(itemsPerPage = 10) {
const [currentPage, setCurrentPage] = useState(1)
const [totalItems, setTotalItems] = useState(0)
const totalPages = Math.ceil(totalItems / itemsPerPage)
const fetchPage = useCallback(async (page) => {
const offset = (page - 1) * itemsPerPage
const response = await fetch(
`/api/posts?limit=${itemsPerPage}&offset=${offset}`
)
const { data, count } = await response.json()
setTotalItems(count)
return data
}, [itemsPerPage])
const goToPage = (page) => {
if (page >= 1 && page <= totalPages) {
setCurrentPage(page)
}
}
return {
currentPage,
totalPages,
fetchPage,
goToPage,
hasNextPage: currentPage < totalPages,
hasPrevPage: currentPage > 1
}
}
JavaScript
복사
3) 이미지 최적화
Next.js의 Image 컴포넌트를 사용하면 이미지를 자동으로 최적화할 수 있습니다:
import Image from 'next/image'
export default function PostCard({ post }) {
return (
<div>
{post.image_url && (
<Image
src={post.image_url}
alt={post.title}
width={800}
height={400}
loading="lazy" // 지연 로딩
placeholder="blur" // 로딩 중 블러 효과
blurDataURL={post.blur_data_url} // 블러 이미지 데이터
/>
)}
<h3>{post.title}</h3>
<p>{post.excerpt}</p>
</div>
)
}
JavaScript
복사
11. 에러 처리와 사용자 경험 개선
1) 에러 바운더리 구현
애플리케이션에서 에러가 발생했을 때 전체가 멈추지 않도록 에러 바운더리를 설정합니다:
// components/ErrorBoundary.js
'use client'
import { Component } from 'react'
export default class ErrorBoundary extends Component {
constructor(props) {
super(props)
this.state = { hasError: false, error: null }
}
static getDerivedStateFromError(error) {
return { hasError: true, error }
}
componentDidCatch(error, errorInfo) {
console.error('에러 발생:', error, errorInfo)
}
render() {
if (this.state.hasError) {
return (
<div>
<h2>문제가 발생했습니다</h2>
<p>잠시 후 다시 시도해주세요.</p>
<button onClick={() => this.setState({ hasError: false })}>
다시 시도
</button>
</div>
)
}
return this.props.children
}
}
JavaScript
복사
2) 로딩 상태 표시
사용자가 기다리는 동안 로딩 상태를 보여주는 것이 중요합니다:
// components/LoadingSpinner.js
export default function LoadingSpinner() {
return (
<div className="spinner-container">
<div className="spinner"></div>
<style jsx>{`
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`}</style>
</div>
)
}
JavaScript
복사
3) 사용자 친화적인 에러 메시지
기술적인 에러 메시지 대신 사용자가 이해하기 쉬운 메시지를 보여줍니다:
// utils/errorMessages.js
export const getErrorMessage = (error) => {
const errorMessages = {
'Invalid login credentials': '이메일 또는 비밀번호가 올바르지 않습니다.',
'User already registered': '이미 가입된 이메일입니다.',
'Network request failed': '인터넷 연결을 확인해주세요.',
'Permission denied': '권한이 없습니다.',
}
return errorMessages[error.message] || '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'
}
JavaScript
복사
12. 배포 준비하기
1) 환경 변수 설정
개발 환경과 프로덕션 환경의 설정을 분리합니다. Vercel이나 Netlify 같은 호스팅 서비스에서는 대시보드에서 환경 변수를 설정할 수 있습니다.
2) 데이터베이스 마이그레이션
데이터베이스 구조 변경사항을 관리하는 방법입니다:
# Supabase CLI 설치
npm install -g supabase
# 새 마이그레이션 생성
supabase migration new add_user_profile
# 마이그레이션 적용
supabase db push
Shell
복사
3) 성능 모니터링
애플리케이션의 성능을 지속적으로 모니터링하는 것이 중요합니다:
// utils/performance.js
export const measurePerformance = (metricName, startTime) => {
const endTime = performance.now()
const duration = endTime - startTime
// 성능 데이터 수집 (예: Google Analytics)
if (typeof window !== 'undefined' && window.gtag) {
window.gtag('event', 'timing_complete', {
name: metricName,
value: Math.round(duration),
})
}
console.log(`${metricName}: ${duration.toFixed(2)}ms`)
}
JavaScript
복사
마무리하며
•
Next.js와 Supabase를 연동하는 방법을 처음부터 끝까지 살펴보았습니다. 처음에는 복잡해 보일 수 있지만, 하나씩 따라하다 보면 어렵지 않게 구현할 수 있을 거예요.
•
중요한 것은 한 번에 모든 것을 완벽하게 만들려고 하지 말고, 작은 기능부터 시작해서 점진적으로 발전시켜 나가는 것입니다. 기본적인 CRUD(Create, Read, Update, Delete) 기능부터 시작해서, 실시간 기능, 파일 업로드, 인증 시스템 등을 하나씩 추가해 나가세요.
•
개발하면서 막히는 부분이 있다면 공식 문서를 참고하거나 개발자 커뮤니티에 질문하는 것도 좋은 방법입니다. Next.js와 Supabase 모두 활발한 커뮤니티를 가지고 있어 도움을 받기 쉽습니다.
•
이제 여러분도 풀스택 개발자로서의 첫 발을 내딛었습니다. 계속해서 학습하고 실험하면서 더 나은 애플리케이션을 만들어 나가시길 바랍니다!
