느려도 한걸음씩

Next.js로 어떤 프로젝트를 만들지 고민을 많이 한 끝에, 현재 서비스되고 있는 사이트 중 하나를 클론 코딩하기로 결정했습니다. 💡 선택한 클론 코딩 대상: Hola! https://holaworld.io/ Hola!스터디, 사이드 프로젝트 팀원을 구하는 가장 쉬운 방법!holaworld.io제가 클론 코딩할 서비스는 Hola!입니다. 이 서비스는 사이드 프로젝트를 함께할 팀원을 구하거나, 팀원을 모집하는 게시글을 올릴 수 있는 플랫폼입니다. 🔧 Supabase로 posts 테이블 만들기백엔드는 Supabase를 사용할 예정입니다. 가장 먼저 게시글을 저장할 posts 테이블을 설계하고 생성해보겠습니다. create table public.posts ( id uuid primary ke..

이번 포스트부터 Next.js와 Supabase를 사용한 프로젝트 일지를 써보려고합니다. 제일 먼저, 프로젝트를 생성하는 방법을 알아보겠습니다.1. Supabase에서 새로운 프로젝트 생성하기먼저, Supabase에서 새로운 프로젝트를 생성합니다. 그런 다음, 데이터베이스에 필요한 테이블을 만들어야 합니다. -- Create the tablecreate table instruments ( id bigint primary key generated always as identity, name text not null);-- Insert some sample data into the tableinsert into instruments (name)values ('violin'), ('viola'),..

이번 포스트에서는 Next.js App Router 환경에서 페이지별로 메타데이터(Metadata)를 설정하는 방법을 알아보겠습니다. ✅ 기본적인 메타데이터 설정Next.js에서는 각 layout.js 또는 page.js 파일에 metadata 객체를 내보내면 해당 페이지에 대한 메타 정보를 설정할 수 있습니다.// app/layout.jsimport MainHeader from "@/components/main-header/main-header";import "./globals.css";export const metadata = { title: "NextLevel Food", description: "Delicious meals, shared by a food-loving community.",}..

이번 포스트에서는 Next.js에서 서버 액션(Server Action)을 이용해 데이터를 추가한 후, 페이지 캐시를 갱신하여 변경 사항이 바로 반영되도록 하는 방법을 살펴보겠습니다. ✅ 문제 상황아래는 사용자가 폼을 제출해 새로운 게시물을 추가하고, /meals 페이지로 리디렉션하는 코드입니다export async function shareMeal(prevState, formData) { "use server"; const meal = { title: formData.get("title"), summary: formData.get("summary"), instructions: formData.get("instructions"), image: formData.get("imag..

이전 포스트들에서는 데이터를 불러오는 동안의 로딩 상태 처리와 에러 페이지 구성에 대해 알아봤습니다. 이번 포스트에서는 존재하지 않는 URL을 사용자가 요청했을 때 404 페이지를 어떻게 표시하는지 알아보겠습니다.✅ not-found.js 파일로 처리하기Next.js의 App Router에서는 not-found.js 파일을 사용해 404 에러 페이지를 간단하게 구성할 수 있습니다. 이 파일은 꼭 not-found.js라는 이름을 사용해야 하며, 사용자가 존재하지 않는 URL에 접근했을 때 자동으로 이 컴포넌트가 렌더링됩니다. // app/not-found.jsexport default function NotFound() { return ( Not Found We could no..

이번 포스트에서는 비동기 데이터를 가져오는 중 오류가 발생했을 때, 사용자에게 에러 페이지를 보여주는 방법에 대해 알아보겠습니다. ✅ 기본 개념Next.js에서는 error.js라는 파일을 사용하여 각 라우트별 에러 UI를 정의할 수 있습니다.이 파일은 해당 라우트에서 에러가 발생했을 때 자동으로 렌더링되며, loading.js와 마찬가지로 페이지 폴더 안에 위치해야 합니다. ✅ 사용 예시// app/meals/error.js"use client"; // 반드시 클라이언트 컴포넌트여야 합니다!export default function Error({ error }) { return ( An error occurred! {error.message} );} ✅ 주요 ..

2025.05.02 - [FE develop/Next.js] - Next.js - (8) loading 페이지로 로딩 상태 표시하기 Next.js - (8) loading 페이지로 로딩 상태 표시하기2025.05.02 - [FE develop/Next.js] - Next.js - (7) 비동기 작업을 통해 데이터 가져오기 Next.js - (7) 비동기 작업을 통해 데이터 가져오기이번 포스트에서는 Next.js에서 비동기 작업을 통해 데이터를 가져오는hjh0806.tistory.com 지난 포스트에서는 loading.js를 사용해 비동기 데이터 패칭 중 로딩 상태를 전역적으로 표시하는 방법을 알아봤습니다.하지만 이 방법은 전체 페이지가 교체되기 때문에, 데이터와 무관한 부분까지 로딩 화면으로 대체되는 단..

2025.05.02 - [FE develop/Next.js] - Next.js - (7) 비동기 작업을 통해 데이터 가져오기 Next.js - (7) 비동기 작업을 통해 데이터 가져오기이번 포스트에서는 Next.js에서 비동기 작업을 통해 데이터를 가져오는 방법에 대해 알아보겠습니다. ✅ 기본 구조import Link from "next/link";import classes from "./page.module.css";import MealsGrid from "@/components/ihjh0806.tistory.com 저번 포스트에서는 Next.js에서 서버 컴포넌트 안에서 async/await를 사용해 데이터를 가져오는 방법을 살펴봤습니다.하지만 이렇게 데이터를 불러오는 동안 사용자는 아무런 피드백 없..