Web/react

[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] Server vs Client Component 완전 정리

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

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

대상이 문서는 아래와 같은 사람을 기준으로 설명합니다.HTML/CSS는 익숙하다JavaScript는 초급 수준이다React를 아주 조금 들어봤다Next.js는 처음이다실무 스타일의 관리자 페이지를 만들어보고 싶다 지금까지 만든 것나는 현재 아래 기능까지 만들었다./admin/admin/ads/admin/ads/[id] 즉,대시보드광고 목록광고 상세이 흐름을 만들었다.그리고 아래 기술들을 사용했다.Next.jsTypeScriptTailwind CSSApp RouterDynamic Routelayout.tsxmap()LinkusePathname() Next.js란?Next.js는 React 기반 프레임워크다. 쉽게 말하면:React를 더 실무적으로 편하게 쓰게 해주는 도구라고 생각하면 된다. 예를 들면..

[Next.js] 초보의 관리자 페이지 만들기 시작기

설치부터 레이아웃, 목록/상세/수정/등록 흐름까지 이번에 관리자 페이지 작업을 하게 되면서 Next.js를 처음 제대로 만져보게 됐다.원래는 React를 아주 조금 알고 있었고, HTML/CSS는 익숙한 편이지만 JavaScript와 Next.js는 거의 초보 수준이었다. 처음에는 “이걸 다 새로 만들어야 하나?”라는 막막함이 있었는데,실제로 하나씩 부딪혀보니 Next.js는 폴더 구조와 페이지 흐름을 익히는 것부터 시작하는 게 중요하다는 걸 느꼈다. 이번 글은 내가 로컬에 Next.js를 설치하고, 관리자 페이지의 기본 흐름인목록 → 상세 → 수정 → 등록구조를 만드는 과정까지 정리한 기록이다. 1. 로컬 환경 세팅먼저 Node와 npm 버전을 확인했다.node -vnpm -v 내 환경은 아래와..

[Next.js] 프로젝트 시작하기

먼저 확인할 건 Node.js 버전이다.현재 Next.js 공식 설치 문서는 최소 Node.js 20.9를 요구한다. create-next-app으로 시작하면 기본적으로 TypeScript, Tailwind CSS, ESLint, App Router, Turbopack 등을 선택해서 만들 수 있다. 터미널에서 원하는 위치로 이동한 다음:npx create-next-app@latest admin-next 질문이 나오면 이렇게 고르면 된다.TypeScript → YesESLint → YesTailwind CSS → Nosrc/ directory → YesApp Router → YesTurbopack → Yesimport alias → No설치 끝나면:cd admin-nextnpm run dev 브라우저에서h..

[Next.js] 공부 시작 전, 내 현재 수준과 학습 방향 정리

요즘 Next.js를 공부해보려고 한다.예전에 React 강의를 조금 들은 적이 있어서 프레임워크의 아주 기본적인 개념은 어렴풋이 알고 있지만, JavaScript는 아직 초보다. 대신 HTML과 CSS는 꽤 익숙한 편이다.그래서 내 목표는 “Next.js를 깊이 있게 마스터하는 것” 보다는,우선 Next.js로 웹사이트 프론트엔드를 직접 만들 수 있는 수준까지 가는 것이다. 내 현재 상태 지금 나의 상태를 정리하면 이렇다.HTML / CSS는 능숙하다JavaScript는 초보다React는 아주 조금 접해봤다프레임워크의 개념은 살짝 알고 있다목표는 실제로 웹사이트를 구현할 수 있는 프론트엔드 개발 수준이런 경우에는 처음부터 너무 어려운 개념을 한꺼번에 집어넣기보다,필요한 만큼만 순서대로 ..

[리액트] Hooks 알아보기

useState 상태(state) 관리를 위한 Hook. 함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다. 컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다. import React, { useState } from "react"; const Counter = () => { //count: 변수, setCount: 상태 업데이트 하는 함수 //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용 const [count, setCount] = useState(0); const increment = () => { setCount(counst + 1); }; return ( Count: {count} Increment ); }; useEffect 생명주기(lif..

[리액트] Redux Toolkit 사용해서 Counter 만들기

패키지 설치 # Yarn # redux 관련 yarn add react-redux @reduxjs/toolkit redux-devtools-extension # 추가 패키지 yarn add react-router-dom sass styled-components 패키지 이름 설명 react-redux 리액트에서 redux를 사용할 수 있도록 해주는 컨테이너. redux에 의존한다. @reduxjs/toolkit 리액트에서 리덕스를 좀 더 간결하게 사용할 수 있도록 하는 최신 패키지 redux-devtools-extension 리덕스의 상태를 크롬브라우저 개발자도구에 설치된 확장 기능과 연동할 수 있게 해주는 미들웨어 react-router-dom SPA앱을 만들 때 사용. URL에 따라 실행할 Javasc..