전체 글

[Storybook] Next.js 관리자 페이지에 Storybook을 붙이면서 알게 된 핵심 개념 정리

Next.js로 관리자 페이지를 만들면서 Storybook을 함께 적용해보고 있다.처음에는 단순히 “컴포넌트를 따로 볼 수 있는 도구” 정도로만 이해했는데,직접 Alert, Dropdown, Modal 같은 컴포넌트의 Story를 만들다 보니 몇 가지 꼭 알아야 할 개념이 있었다.이번 글에서는 Storybook을 처음 적용하면서 이해한 핵심 내용을 정리해보려고 한다. Storybook은 페이지보다 컴포넌트를 보기 위한 도구다Storybook은 관리자 페이지 전체를 실행하는 도구라기보다, 버튼이나 모달 같은 개별 UI 컴포넌트를 따로 꺼내서 확인하는 도구에 가깝다.예를 들어 관리자 페이지에는 이런 컴포넌트들이 반복해서 사용된다.ButtonBadgeAlertModalDropdownInputTab..

[Next.js] Next.js App Router 경계 정리표

🔥 1. Server vs Client 핵심 구조 구분 Server Component Client Component기본 동작기본값"use client" 필요실행 위치서버 (Node.js)브라우저상태 관리❌ 불가⭕ useState 가능이벤트(onClick)❌ 불가⭕ 가능router❌ 사용 불가⭕ useRouterhooks❌ 대부분 불가⭕ useEffect, useState데이터 fetch⭕ 직접 가능⭕ 가능 (보통 API 호출) 🧠 2. “무조건 외워야 하는 기준” 🔵 Server Component에서 가능한 것✔ 데이터 가져오기 (DB / fetch)✔ pro..

[Next.js] Next.js + TypeScript + Tailwind CSS 관리자 페이지 만들기 2

프로젝트 시작생성npx create-next-app@latest 선택한 옵션TypeScriptApp RouterTailwind CSSsrc 구조 처음 만난 에러Missing and tags in the root layout처음 실행하자마자 만난 에러. 원인App Router에서는:layout.tsx가 HTML 뼈대 역할을 한다. 그래서 반드시:태그가 필요했다. 수정export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( {children} );} App Router 구조 이해하기예전 React처럼:“컴포넌트만 만들면 되는 구조”가 아니라,폴더 구조 자체가..

Next.js App Router DELETE API 404 해결기

Next.js App Router DELETE API 404 해결기“GET은 되는데 DELETE만 404 나는 이유”최근 Next.js + TypeScript + App Router 기반으로 관리자 페이지 CRUD를 만들다가 꽤 헷갈리는 이슈를 만났다.상황은 단순했다./api/ads/1 GET 요청은 정상그런데 DELETE 요청만 404route.ts 안의 console.log도 실행되지 않음처음에는:fetch 문제인가?API 경로 문제인가?use client 문제인가?Turbopack 문제인가?엄청 헷갈렸는데, 원인은 의외로 params 구조였다. 문제 상황route.tsimport { NextResponse } from "next/server";import { ads } from "@/lib/..

[Next.js] Server vs Client Component 완전 정리

Next.js를 처음 배우면 가장 많이 헷갈리는 개념이 있다.“서버에서 데이터 쓰는 것도 서버 컴포넌트 아닌가?”“수정 페이지도 데이터 보여주는데 왜 Client야?” 이 글은 이 혼란을 완전히 정리하기 위한 내용이다. 1. 핵심 개념: 기준은 “데이터”가 아니라 “실행 위치”Next.js에서 Server / Client를 나누는 기준은 단순하다.Server / Client 구분 기준 = 어디서 실행되느냐 ✔ Server Component서버에서 실행됨HTML을 만들어서 브라우저로 전달데이터 조회에 최적화👉 특징useState ❌onClick ❌useEffect ❌“그냥 화면 만들어서 보여주는 역할” ✔ Client Component브라우저에서 실행됨사용자 인터랙션 처리상태 관리 가능👉 특징..