new_bird-hyun

npm install @tanstack/react-query// components/UserCardSkeleton.tsx export function UserCardSkeleton() { return ( ); } import { useQuery } from '@tanstack/react-query'; function UserCard() { const { data, isLoading } = useQuery(['user'], () => fetch('/api/user').then((res) => res.json()) ); if (isLoading) return ; return {data.name}님 환영합니다!; }

import { useState, useEffect } from 'react'; import { saveFormState, loadFormState } from './storageUtils'; export default function MultiStepForm() { const [step, setStep] = useState(1); const [form, setForm] = useState({ name: '', age: '' }); useEffect(() => { const saved = loadFormState('form'); if (saved) setForm(saved); }, []); const next = () => { saveFormState('form',..

export function saveFormState(key, data) { sessionStorage.setItem(key, JSON.stringify(data)); } export function loadFormState(key) { const saved = sessionStorage.getItem(key); return saved ? JSON.parse(saved) : null; }

npm install --save-dev @testing-library/react jest // Button.tsx export default function Button({ label, onClick }) { return {label}; } // Button.test.tsx import { render, screen, fireEvent } from '@testing-library/react'; import Button from './Button'; test('버튼 렌더링과 클릭 테스트', () => { const onClick = jest.fn(); render(); fireEvent.click(screen.getByText('Click me')); expect(onClick).toH..

import { useForm } from 'react-hook-form'; export default function SignupForm() { const { register, handleSubmit, formState: { errors, touchedFields }, } = useForm({ mode: 'onChange' }); const onSubmit = (data) => console.log(data); return ( {...register('email', { required: '이메일은 필수입니다', pattern: { value: /^..

const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); console.log(isValidEmail('test@example.com')); // true console.log(isValidEmail('wrong-email')); // false

상태 관리 전략 비교 (Context vs Zustand vs Redux)항목Context + useReducerZustandRedux Toolkit전역 상태✅✅✅비동기 처리❌ 직접 처리 필요✅ 내장✅ createAsyncThunk러닝 커브낮음매우 낮음높음 (툴킷으로 개선됨)리렌더링 제어❌ 어려움✅ 섬세함✅ middleware 조합 가능규모 확장성작음중소형 적합대형 프로젝트에 최적✅ Zustand는 빠르게 쓰고 유지하기 쉬운 경량 상태 관리 도구로 최근 인기도 높음tsx복사편집// zustand 예제 import create from 'zustand'; const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ c..

function throttle(fn, delay) { let lastCall = 0; return (...args) => { const now = new Date().getTime(); if (now - lastCall lastCall = now; fn(...args); }; } // 사용 예 const onScroll = throttle(() => console.log('스크롤 중!'), 500);