new_bird-hyun

npm install react-toastify import { toast, ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function fetchUser() { fetch('/api/user') .then((res) => { if (!res.ok) throw new Error('사용자 정보를 불러오지 못했습니다.'); return res.json(); }) .then((data) => console.log(data)) .catch((err) => toast.error(err.message)); } export default function..

Before // 너무 많은 UI가 하나의 컴포넌트에 있음 function Profile() { return ( Se-hyun 프론트엔드 개발자 alert('Followed!')}>Follow ); } 🔹 After function ProfileInfo({ name, role }) { return ( {name} {role} ); } function FollowButton() { return alert('Followed!')}>Follow; } function Profile() { return ( ); }

export const asyncHandler = (promise) => promise .then((data) => [data, null]) .catch((error) => [null, error]); // 사용 예 const [res, err] = await asyncHandler(fetch('/api/user')); if (err) return console.error(err.message);

npm install framer-motion import { motion } from 'framer-motion'; export default function AnimatedBox() {   return (           initial={{ opacity: 0, y: 50 }}       animate={{ opacity: 1, y: 0 }}       exit={{ opacity: 0 }}       transition={{ duration: 0.5 }}     >       애니메이션 등장 요소        ); }

function shuffle(array) {   const result = [...array];   for (let i = result.length - 1; i > 0; i--) {     const j = Math.floor(Math.random() * (i + 1));     [result[i], result[j]] = [result[j], result[i]];   }   return result; } console.log(shuffle([1, 2, 3, 4, 5]));

npm install @tanstack/react-queryimport { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); function Posts() {   const { data, isLoading, error } = useQuery(['posts'], () =>     fetch('/api/posts').then(res => res.json())   );   if (isLoading) return 불러오는 중...;   if (error) return 에러!;   return (            {data.map((post: any) => ..

npm install swr import useSWR from 'swr'; const fetcher = (url: string) => fetch(url).then(res => res.json()); export default function Profile() {   const { data, error, isLoading } = useSWR('/api/user', fetcher);   if (isLoading) return 로딩 중...;   if (error) return 에러 발생;   return 안녕하세요, {data.name}님!; }

function isMobileView() {   return window.matchMedia('(max-width: 768px)').matches; } // 예시 console.log(isMobileView()); // true 또는 false