오늘도 조으네💜

Next.js

useActionState는 Next.js 14에서 도입된 새로운 React 훅으로, 서버 액션(Server Actions)과 함께 사용하여 클라이언트 컴포넌트에서 서버 액션을 호출하고, 그 상태를 관리하는 역할을 한다. 🔹 useActionState 개념서버 액션을 클라이언트 컴포넌트에서 사용할 때, 상태(state)를 관리할 수 있도록 해준다.기존 useState와 비슷하지만, 서버 액션의 요청 상태(pending, success, error) 를 다룰 수 있다.🔹 useActionState 사용법1️⃣ 서버 액션 정의 (server.ts)서버 액션은 서버에서 실행될 함수로, use server 디렉티브를 사용한다.// app/actions.ts"use server";export async fun..

2025. 2. 2.

Next.js

revalidatePath는 Next.js 13 이상에서 App Router (app 디렉토리) 를 사용할 때 특정 경로의 데이터를 다시 유효화(revalidate)하는 함수이다.이는 서버에서 캐싱된 데이터를 강제로 무효화하고, 최신 데이터를 다시 불러오도록 하는 역할을 한다. 사용 예제1. 기본 사용법import { revalidatePath } from 'next/cache';export async function updateData() { // 데이터 업데이트 로직 (예: DB 업데이트) // 특정 경로의 캐시를 무효화 revalidatePath('/dashboard');}이렇게 하면 /dashboard 경로의 데이터가 다시 패칭된다. 2. 서버 액션에서 사용Next.js 13.4+에서 서..

2025. 2. 2.

Next.js

서버 액션(Server Actions)은 Next.js 14에서 도입된 기능으로, 클라이언트에서 직접 API 라우트를 호출하지 않고, 서버에서 실행되는 비동기 함수를 클라이언트에서 호출할 수 있도록 하는 새로운 방식이다.기존의 API Routes나 useEffect에서 fetch를 사용해 서버와 데이터를 주고받던 방식과 달리, 서버 액션을 사용하면 API 엔드포인트를 별도로 만들지 않고도 서버에서 직접 데이터를 처리할 수 있다. ✅ 서버 액션의 특징서버에서 실행되는 함수클라이언트에서 실행을 요청하지만, 함수 자체는 서버에서 실행됨.클라이언트에서는 서버 액션을 호출하는 역할만 수행.API 라우트 없이 데이터 전송 가능기존에는 pages/api 혹은 app/api를 사용해 API를 만들어야 했지만, 서버 액..

2025. 1. 31.

Next.js

서버에서 실행된다는 공통점이 있지만, 동작 방식과 목적이 다르다.✅ 핵심 차이 요약 서버 컴포넌트(Server Components, RSC)서버 사이드 렌더링(SSR)실행 위치일부 컴포넌트만 서버에서 실행전체 페이지를 서버에서 렌더링렌더링 시점빌드 타임 + 요청 시 (선택적)매 요청마다 서버에서 렌더링데이터 패칭컴포넌트 내부에서 직접 가능getServerSideProps에서 처리클라이언트 JS 크기✅ 줄어듦 (클라이언트에서 JS 실행 X)❌ 클라이언트에서 Hydration 필요인터랙션 (이벤트 핸들러)❌ 불가능 (클라이언트 JS 실행 X)✅ 가능 (Hydration 후)SEO 최적화✅ 가능 (완전한 HTML 제공)✅ 가능 (완전한 HTML 제공)주요 사용처Next.js 13+ 앱 라우터 (App Rout..

2025. 1. 30.

Next.js

1️⃣ React (CRA) 렌더링 방식React의 기본적인 렌더링 방식은 CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)이다.✅ 클라이언트 사이드 렌더링(CSR)📌 동작 방식초기 로딩 시 빈 HTML 파일을 받음JavaScript 번들을 다운로드 후 실행하여 화면을 구성API 호출을 통해 데이터를 가져오고 UI를 업데이트📌 장점✔ 초기 개발이 간단하고 빠름✔ 동적인 인터랙션이 많을 때 적합✔ 서버 부하가 적음📌 단점❌ 초기 로딩 속도가 느림 (JS 다운로드 및 실행 후 화면 렌더링)❌ SEO(Search Engine Optimization) 최적화가 어려움 (HTML이 비어 있음)❌ TTFB(Time To First Byte) 속도가 느림📌 CSR 예제 (React +..

2025. 1. 30.

React

리액트에서 use 훅이란?React 18부터 도입된 use 훅은 비동기 데이터를 쉽게 가져오고, React의 Suspense와 연계하여 사용할 수 있도록 도와주는 새로운 훅이다. 기존의 useState, useEffect처럼 상태를 관리하는 것이 아니라, 비동기 데이터를 동기적으로 사용할 수 있도록 설계된 기능이다. ✅ use 훅의 주요 기능비동기 데이터 가져오기use 훅을 사용하면 fetch, async/await 등의 비동기 데이터를 동기적으로 처리할 수 있다.Suspense와 함께 사용use는 React의 Suspense 컴포넌트와 함께 사용되어, 데이터를 불러오는 동안 로딩 UI를 표시하는 데 유용하다.서버 컴포넌트에서 활용특히 React Server Components(RSC) 에서 use를 활..

2025. 1. 30.

Next.js

useParams:서버 사이드와 클라이언트 사이드에서 모두 사용 가능.Next.js app 라우터에서 사용되며, URL 파라미터를 클라이언트와 서버에서 모두 추출할 수 있다.**서버 사이드 렌더링(SSR)**에서 서버와 클라이언트 모두에서 동작한다.주로 클라이언트 사이드에서 URL 파라미터를 추출하는 데 사용되며, 서버 사이드에서도 URL 파라미터를 접근할 수 있다.params:서버 컴포넌트에서만 사용 가능.Next.js app 라우터의 서버 컴포넌트에서는 URL 파라미터를 직접 **params**로 받아올 수 있다.서버 컴포넌트에서 URL 파라미터를 직접 다룰 때 사용되며, 클라이언트에서는 사용할 수 없다.클라이언트 컴포넌트에서는 사용할 수 없고, 서버 컴포넌트에서만 유효하다.예시:useParams (..

2025. 1. 29.

TypeScript

📌 Partial Partial 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MyEmail = Partial; const me: MyEmail = {}; // 가능 const you: MyEmail = { email: "noh5524@gmail.com" }; // 가능 const all: MyEmail = { email: "noh5524@gmail.com", address: "secho" }; // 가능 👉 Partial 구현해 보기 interface Profile { name: string; age: number; married: boolean } // case 1 type P..

2024. 3. 11.