전체 글

[Next.js] Next.js 관리자 작업 후기

사내 관리자 FE를 하게 되었다.내가 할 수 있을까??,,, 걱정 했지만 요즘이 어떤 시대인가. 大AI 시대가 아닌가?!이제는 예전처럼 밤새 구글을 뒤지지 않아도 된다는 말! 물론 그 만큼 엄청난 양을 요구하지만 .. 쨋든 가능은 해.codex로 어찌저찌 해서 만들어 본 결과 잘 돌아가는게 신기하고...gpt 없음 난 못해.... 라는 생각만 강하게 든다 ㅜㅜ그런데 요즘 추세가 바이브코딩인데~ 나도 그렇게 해보는거지! 그래도 주변에서 많이 도와줘서 나름 재밌게! 만들었다. 앞으로 기능 추가할것도 많으니까.. gpt 의존도를 조금 낮춰보는게 목표다. 지금은 100이라면 80...정도? 하핫 codex에게 최근 질문한것들을 보고 내 부족한 점과 실수들 그리고 앞으로 어떤걸 주의깊게 봐야 하는지를 물어..

[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/..