[React] Day_60 데일리 정리

아 진짜 이미지태그 ^^...;;

 

 

오늘은 api랑 싸우는날 ^-^..

그래도 리액트때보단 이해는 빠르다(?) 어이없음;

여튼 어제 저에게 고통을 준... 4주차 강의 정리 빠르게 가볼게요.

레츠고

 

 

Next.js 강의 정리 - Next.js 고급 기능과 서드파티 라이브러리

실은 아직도 이해 못했움.

 

 

 

Next.js Caching

 

빌드 시점 및 요청 시점에서 캐싱 수행

• Full Route Cache : 빌드 시 HTML을 생성 및 캐싱 → 빠르게 제공
• Data Cache : fetch를 이용한 데이터 요청 간 캐싱
• Request Memoization : 동일한 데이터 요청을 메모이제이션하여 중복 네트워크 요청 방지

 

- Full Route Cache

const res = await fetch('https://api.example.com/data', { 
  next: { revalidate: 3600 } 
});
const data = await res.json();

 

 

- Data Cache

const res = await fetch('https://api.example.com/data', { 
  cache: 'no-store' 
});
const data = await res.json();

 

 

React Hook Form / Zod

 

React Hook Form

 

비제어 컴포넌트 기반 → 효율적인 폼 관리 + 검증 제공

 

- 장점

• 최소한의 리렌더링
• 간결한 코드
• 다양한 검증 라이브러리와 통합 가능

import { useForm } from "react-hook-form";

const SignInForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: "Email is required" })} />
      {errors.email && <p>{errors.email.message}</p>}
      <button type="submit">Sign In</button>
    </form>
  );
};

 

 

Zod

 

데이터 검증 및 타입 선언을 위한 라이브러리 → React Hook Form과 함께 사용 시, 폼 검증이 더욱 강력해짐

import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Invalid email").nonempty("Email required"),
  password: z.string().nonempty("Password required"),
});

const SignInForm = () => {
  const { register, handleSubmit, formState } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("email")} />
      {formState.errors.email && <p>{formState.errors.email.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

 

 

Authentication

 

- Middleware 설정 (중요)

요청 처리 전 리다이렉트, 헤더 수정, 또는 조건부 응답 가능!

 

[예시 코드]

import { NextResponse } from 'next/server';

export function middleware(req) {
  if (!req.cookies.get("authToken")) {
    return NextResponse.redirect("/login");
  }
}

export const config = {
  matcher: ["/protected/:path*"],
};

 

- 간단한 JSON 서버 인증

json-server-auth 활용, 간단한 인증 서버를 구성 가능!

 

[예시 코드]

{
  "users": [
    {
      "email": "user@example.com",
      "password": "$2b$10$eHUzzsY1tbOmyGVqPwVE...",
      "id": 1
    }
  ]
}

 

 

React Query

 

서버 상태 관리 라이브러리, API 요청 및 상태 관리 단순화

 

- 주요 기능

• useQuery: GET 요청을 위한 훅
• useMutation: POST, PUT, DELETE 요청을 위한 훅
• queryKey 기반의 캐싱
• 데이터 Fetching

import { useQuery } from "@tanstack/react-query";

const fetchData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
};

const { data } = useQuery(["posts"], fetchData);

 

- prefetching

const queryClient = new QueryClient();

await queryClient.prefetchQuery({
  queryKey: ["products"],
  queryFn: fetchProducts,
});

<HydrationBoundary state={dehydrate(queryClient)}>
  <ProductList />
</HydrationBoundary>

 

 

Zustand

 

가볍고 직관적인 상태 관리 라이브러리

 

- 주요 특징

• 보일러플레이트 최소화
• 효율적인 렌더링
• 유연한 API

 

- 상태 스토어 생성 예제 코드

import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

 

- 스토어 사용

const Counter = () => {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
};

 

 

 

 

마무리 - 우앙 ^-^)p

 

어헝헝 너무 힘들어요 ㅠㅡㅠ

 

 

우앙 뭔가 여러가지 일들이 많았는데

굳이굳이 언급은 안하구

여튼 조금 쉽지않네요 ^-^...

에휴 빠르게 자야겠당 그럼 굳바2

 

 

 

오늘의 KPT 회고

 

Keep: 개인과제 이미지 불러오기 성공!

Problem: 세상이 날 억까한다! (하루하루가 시트콤!)

Try: 이런건 어떻게 막죠? ㄷㄷ;;