Next.js 프로젝트 생성 및 디렉터리 구조

1. Next.js app 프로젝트 생성$ npx create-next-app@13.5.6Need to install the following packages:create-next-app@13.5.6Ok to proceed? (y) y✔ What is your project named? … next-study✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use `src/` directory? … No / Yes✔ Would you like to use App Router? (..

• format_list_bulleted Next.js
• · 2025. 6. 15.
• textsms

TanStack Table

TanStack Table은 React에서 **표(table)**를 만들기 위한 헤드리스(Headless) 라이브러리입니다.즉, HTML 테이블 구조나 스타일을 직접 만들게 하고, 내부 동작(정렬, 필터, 페이지네이션 등)은 라이브러리가 담당합니다.1. 특징항목설명HeadlessUI는 직접 만들고, 로직만 라이브러리가 제공빠르고 가볍다DOM 조작 없이 React state 기반으로 동작고도로 커스터마이징 가능원하는 스타일이나 구성대로 테이블 구현 가능기능 분리형 구조정렬, 필터링, 페이지네이션 등을 필요한 것만 가져다 씀2. 설치npm install @tanstack/react-table 3. 기본 사용 예제 (React 19 기준)① 컬럼/데이터 정의const data = [ { name: 'Alic..

• format_list_bulleted React
• · 2025. 5. 13.
• textsms

React Query

React Query는 서버 상태(Server State) 관리를 위한 라이브러리입니다. 보통 REST API 또는 GraphQL 등의 서버에서 데이터를 가져와 사용할 때, 캐싱, 리페치, 로딩 처리, 에러 처리 등을 효율적으로 관리할 수 있게 도와줍니다.1. React Query란?useState/useEffect로 데이터 fetch 관리할 때 발생하는 반복적인 로직(로딩 상태, 에러 핸들링, 재요청 등)을 추상화해서 단순하게 만들어줍니다.클라이언트 상태(useState, useReducer 등)와는 달리, 서버에 저장된 데이터를 가져오는 작업에 최적화된 도구입니다.현재 이름은 TanStack Query이며 @tanstack/react-query로 설치합니다.2. 설치npm install @tansta..

• format_list_bulleted React
• · 2025. 5. 13.
• textsms