π
μμ±μΌ: 2026-07-24 16:44
π οΈ κ°λ° νκ²½ κ΅¬μΆ λ° κ°μ΄λ#
μλ
νμΈμ, νλ‘ νΈμλ κ°λ°νμ
λλ€!
λ³Έ λ¬Έμλ 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();
},
});
};