jin's Blog

자체 기능으로 FormData를 전송할 수 있는데next.js는 위 상단에 'use client' 와 'use server'를 설정하여 쓸 수 있으나 두개가 한번에 사용은 불가능하다. 그래서 useState 같은 거나 eventHandel 을 사용할때는 use client를 사용하게 될텐데그럴경우에는 use server를 따로 컴포넌트를 분리해서 가져다가 써야한다. 아래와 같은 방법을 사용할 수 있을 거 같다."use server";export async function shareMeal(formData) { const meal = { name: formData.get("name"), email: formData.get("email"), title: formData.get("title"..

Next.js에서도 상태와 API 관리를 위한 도구로 다양한 옵션을 선택할 수 있다. Next.js는 React 기반의 프레임워크이기 때문에 React에서 사용하는 도구들을 대부분 그대로 사용할 수 있다. 하지만 Next.js의 **서버 사이드 렌더링(SSR)**과 정적 사이트 생성(SSG) 같은 특화된 기능 때문에 몇 가지 다른 패턴이나 도구가 선호되기도 한다.1. Next.js에서 상태와 API 관리에 사용할 수 있는 도구A. React Query (TanStack Query)Next.js에서 가장 많이 사용하는 서버 상태 관리 도구 중 하나가 React Query다. 특히 데이터 패칭, 캐싱, 리패칭이 필요한 API 관리에서 강력하다.특징SSR과 SSG에서 데이터를 사전 패칭 가능클라이언트 사이드에..

Next.js 소개Next.js는 React를 기반으로 한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원하며, React 프로젝트의 효율성을 높이고 SEO 최적화를 가능하게 합니다. React와 다른 점을 포함해 Next.js의 특징과 설정 방법에 대해 알아보겠습니다.React와 Next.js의 주요 차이점항목 React Next.js렌더링 방식클라이언트 사이드 렌더링(CSR)서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)파일 기반 라우팅개발자가 직접 라우팅 구현 필요pages/ 폴더를 기반으로 자동 라우팅SEOCSR로 인해 초기 로딩 시 SEO에 제약SSR/SSG 지원으로 SEO에 유리빌드 도구Vite, CRA(Create React App) 등 사용N..

React와 TypeScript로 컴포넌트 타입 설정 및 Context 사용하기React와 TypeScript를 함께 사용하면 컴포넌트와 상태를 더 안전하고 명확하게 관리할 수 있다. 이번 포스팅에서는 타입 모델 설정, React.FC 사용법, 컴포넌트에서 props를 전달하고 사용하는 방법, 그리고 useContext와 TypeScript를 조합하는 방법을 알아본다.1. 타입 모델 설정TypeScript를 사용할 때 가장 먼저 해야 할 작업은 데이터 구조에 대한 타입을 정의하는 것이다. 이는 컴포넌트의 props나 상태 관리에 큰 도움이 된다.타입 정의 예제type User = { id: number; name: string; email: string;};type Product = { id: n..

타입스크립트의 기본 타입 알아보기타입스크립트는 정적 타입 시스템을 기반으로 하는 언어로, 다양한 타입을 제공한다. 이를 통해 코드의 안정성과 가독성을 높일 수 있다. 이번 포스팅에서는 타입스크립트에서 가장 기본적으로 사용되는 타입들을 살펴보자.1. 기본적인 타입A. 숫자(Number)number 타입은 정수와 소수를 모두 포함한다.let age: number = 25;let price: number = 99.99;B. 문자열(String)string 타입은 텍스트 데이터를 다룰 때 사용된다. 작은따옴표, 큰따옴표, 템플릿 리터럴을 지원한다.let name: string = "John";let message: string = `Hello, ${name}!`;C. 불리언(Boolean)boolean 타입은 ..

타입스크립트를 알아보자!프로그래밍 언어 중 하나인 TypeScript(타입스크립트)는 JavaScript의 상위 집합(Superset)으로, JavaScript가 가지고 있는 기능에 더해 타입 시스템과 몇 가지 추가적인 기능을 제공한다. 최근 프론트엔드와 백엔드 개발 모두에서 인기를 끌며 점점 더 많은 개발자들이 타입스크립트를 사용하고 있다. 그렇다면 타입스크립트가 무엇인지, JavaScript와 어떻게 다른지 알아보자.1. 타입스크립트란?타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로, JavaScript를 확장한 언어다. JavaScript의 모든 기능을 포함하고 있으며, 타입을 명시적으로 정의할 수 있는 기능을 추가로 제공한다.주요 특징정적 타입 지원 (Static Typing..

React Query의 Query Key: 설정과 활용Query Key는 React Query에서 데이터를 구분하고 관리하기 위한 고유한 식별자다. 캐싱, 무효화, 리패칭 등의 모든 작업은 이 Query Key를 기준으로 이루어진다. 어떻게 설정하고 활용해야 하는지 아래에서 자세히 살펴보자.1. Query Key의 기본 구조Query Key는 보통 배열로 작성되며, 단순 문자열도 가능하다.배열 형태를 사용하는 이유는 데이터를 더 세부적으로 분류하고 관리할 수 있기 때문이다.기본 예제useQuery({ queryKey: ["events"], // 단순한 데이터 키 queryFn: fetchEvents,});구조화된 Key배열로 작성하면 데이터를 계층적으로 관리할 수 있다.useQuery({ query..

React Query는 서버 상태 관리를 위한 강력한 라이브러리로, 효율적인 데이터 패칭, 캐싱, 그리고 동기화 기능을 제공한다. 이번 포스팅에서는 React Query의 주요 개념과 고급 기능을 정리하고, React Router Data API(이하 RRD의 loader)와의 콤비네이션 활용법도 함께 소개한다.1. Query Key에 대한 이해React Query의 queryKey는 데이터를 식별하는 고유한 키다. 데이터 캐싱, 무효화, 갱신 등의 작업은 모두 queryKey를 기준으로 이루어진다.구조화된 Query Key: queryKey는 배열 형태로 작성하며, 데이터를 체계적으로 관리할 수 있다.const { data } = useQuery({ queryKey: ["events", userId]..

TanStack Query 사용법: 기존 방식에서 더 나은 데이터 관리로TanStack Query는 React 애플리케이션에서 데이터 패칭과 상태 관리를 더 효율적으로 처리하기 위한 도구다. 이번에는 기존 useEffect와 useState를 사용한 데이터 패칭을 TanStack Query로 교체하는 과정을 알아보고, 이를 활용하는 방법을 정리한다.1. 기존 방식에서 TanStack Query로 전환하기기존 방식에서는 데이터 패칭과 상태 관리를 위해 useEffect와 useState를 조합하여 사용했을 것이다. 하지만 이 방식은 코드의 복잡도를 증가시키고, 로딩 상태, 에러 처리 등을 별도로 관리해야 하는 번거로움이 있다.TanStack Query를 도입하면 이런 과정을 단순화할 수 있다. 먼저 데이터..

TanStack Query를 사용해야 하는 이유React 애플리케이션에서 데이터를 효율적으로 관리하고 요청 상태를 제어하는 것은 매우 중요하다. TanStack Query(이전 명칭: React Query)는 이러한 요구를 해결하기 위해 설계된 강력한 라이브러리다. 이 도구를 사용해야 하는 이유를 몇 가지로 나눠 설명한다.1. 데이터 패칭의 간소화TanStack Query는 복잡한 데이터 패칭 로직을 단순화한다. 전통적인 방법으로 데이터를 가져올 때 useEffect와 useState를 사용하며 생길 수 있는 여러 문제들을 해결한다. 이를 통해 코드를 더 깔끔하고 관리하기 쉽게 만들어 준다.2. 자동 캐싱 및 상태 관리이 라이브러리는 데이터를 자동으로 캐싱한다. 동일한 데이터 요청이 발생하면 서버에 추가..