πŸ› οΈ 개발 ν™˜κ²½ ꡬ좕 및 κ°€μ΄λ“œ#

μ•ˆλ…•ν•˜μ„Έμš”, ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œνŒ€μž…λ‹ˆλ‹€!
λ³Έ λ¬Έμ„œλŠ” React 및 TypeScript 기반 ν”„λ‘œμ νŠΈμ˜ μƒνƒœ 관리와 μ»΄ν¬λ„ŒνŠΈ ν‘œμ€€ν™”λ₯Ό μœ„ν•΄ μž‘μ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

πŸ’‘ μ£Όμš” 개발 μ§€μΉ¨:
λͺ¨λ“  비동기 데이터 νŒ¨μΉ­μ€ TanStack Queryλ₯Ό μ‚¬μš©ν•˜λ©°, UI λ””μžμΈ μ‹œμŠ€ν…œμ€ shadcn/ui μ»΄ν¬λ„ŒνŠΈλ₯Ό μ€€μˆ˜ν•©λ‹ˆλ‹€.


πŸ’» μ½”λ“œ μŠ€νƒ€μΌ μƒ˜ν”Œ (Code Block Test)#

μ•„λž˜ μ½”λ“œλŠ” 비동기 데이터 μš”μ²­ 및 μƒνƒœ 처리λ₯Ό μœ„ν•œ μ˜ˆμ‹œ μ½”λ“œμž…λ‹ˆλ‹€. μ½”λ“œ 블둝 λ‚΄μ˜ ν‚€μ›Œλ“œλŠ” λ²ˆμ—­λ˜μ§€ μ•Šκ³  원문 μ½”λ“œκ°€ κ·ΈλŒ€λ‘œ μœ μ§€λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

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

interface UserProfile {
  id: string;
  name: string;
  role: "admin" | "developer";
}

export const useFetchUser = (userId: string) => {
  return useQuery<UserProfile>({
    queryKey: ["user", userId],
    queryFn: async () => {
      const response = await fetch(`/api/v1/users/${userId}`);
      if (!response.ok) throw new Error("λ„€νŠΈμ›Œν¬ 응닡이 μ˜¬λ°”λ₯΄μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.");
      return response.json();
    },
  });
};