new_bird-hyun

import { useState, useEffect } from 'react'; export function useLocalStorage(key, initialValue) {   const [value, setValue] = useState(() => {     if (typeof window === 'undefined') return initialValue;     const stored = localStorage.getItem(key);     return stored !== null ? JSON.parse(stored) : initialValue;   });   useEffect(() => {     localStorage.setItem(key, JSON.stringify(value));   }, ..

// 에러 핸들링을 함수로 추상화 const safeAsync = (fn) => async (...args) => {   try {     return [await fn(...args), null];   } catch (err) {     return [null, err];   } }; // 예제 const fetchUser = async (id) => {   const res = await fetch(`/api/user/${id}`);   if (!res.ok) throw new Error('User not found');   return res.json(); }; (async () => {   const [user, error] = await safeAsync(fetchUser)(1);   if (e..

import React, { useMemo, useCallback, useState } from 'react'; const ExpensiveList = React.memo(({ data, onClick }) => {   console.log('리렌더링: ExpensiveList');   return data.map((item, i) =>  onClick(item)}>{item}); }); export default function OptimizationExample() {   const [count, setCount] = useState(0);   const data = useMemo(() => ['React', 'Next.js', 'JavaScript'], []);   const handleClick ..

function debounce(fn, delay) {   let timer = null;   return (...args) => {     clearTimeout(timer);     timer = setTimeout(() => {       fn(...args);     }, delay);   }; } // 사용 예시 const onSearch = debounce((query) => {   console.log('Searching for:', query); }, 300); onSearch('he');   // 무시 onSearch('hey');  // 무시 onSearch('heyy'); // 300ms 뒤 실행

// 고차함수로 정렬 조건 생성 const createSorter = (key, order = 'asc') => {   return (a, b) => {     if (a[key]     if (a[key] > b[key]) return order === 'asc' ? 1 : -1;     return 0;   }; }; const data = [   { name: 'Se-hyun', age: 29 },   { name: 'Hyeji', age: 27 },   { name: 'Maru', age: 3 }, ]; console.log([...data].sort(createSorter('age')));      // 오름차순 console.log([...data].sort(createSorter('name'..

const users = [   { name: 'Alice', role: 'admin' },   { name: 'Bob', role: 'user' },   { name: 'Charlie', role: 'admin' },   { name: 'David', role: 'user' }, ]; // role 기준으로 그룹화 const groupedByRole = users.reduce((acc, user) => {   acc[user.role] = acc[user.role] || [];   acc[user.role].push(user);   return acc; }, {}); console.log(groupedByRole); /* {   admin: [     { name: 'Alice', role: 'admi..

Prisma로 알림 전송 기록 DB에 저장하기알림 히스토리를 사용자에게 표시하는 방법npm install prisma @prisma/client npx prisma init schema.prismamodel Notification {   id        Int      @id @default(autoincrement())   userId    String   title     String   message   String   sentAt    DateTime @default(now()) }   알림 저장 (/pages/api/sendNotification.js)import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient()..

Web Push 구독 정보를 사용자별로 저장하고 구분하는 방법실무에서 필요한 “구독 취소” 기능 추가알림 수신 여부를 제어하는 UI 구성 lib/db.js (메모리 대신 구독 정보 DB로 관리 )export const subscriptions = []; pages/api/subscribe.js (사용자 ID와 함께 구독 등록)import { subscriptions } from '../../lib/db'; export default function handler(req, res) { if (req.method === 'POST') { const { userId, subscription } = req.body; const exists = subscriptions.find((sub) => sub.userId..