📌 Framer Motion: React에서 강력한 애니메이션 라이브러리1️⃣ Framer Motion이란?Framer Motion은 React에서 쉽게 애니메이션을 적용할 수 있도록 해주는 라이브러리입니다.CSS 애니메이션이나 react-transition-group보다 더 간단하고 강력한 기능을 제공합니다.✅ 자연스러운 모션✅ 다양한 트랜지션 효과✅ whileHover, whileTap 등과 같은 직관적인 API✅ Variants를 활용한 애니메이션 그룹 관리👉 framer-motion을 사용하면 코드가 깔끔해지고 유지보수가 쉬워집니다.2️⃣ Framer Motion 설치프로젝트에서 framer-motion을 사용하려면 먼저 설치해야 합니다.npm install framer-motion설치가 완료..

Zustand 미들웨어와 일정 시간 후 상태 초기화 구현하기🚀 Zustand를 이용한 애니메이션 상태 관리React에서 글로벌 상태 관리를 할 때 가장 가볍고 사용하기 쉬운 상태 관리 라이브러리 중 하나가 Zustand입니다.이 글에서는 zustand를 활용하여 애니메이션을 한 번만 실행하고, 일정 시간이 지나면 다시 실행되도록 구현하는 방법을 정리해보겠습니다.✅ Zustand의 기본 개념Zustand는 Redux보다 간결한 코드로 상태를 관리할 수 있는 라이브러리입니다.기본적으로 Zustand는 메모리 기반 상태 관리이므로, 페이지가 새로고침되거나 이동하면 상태가 초기화됩니다.이를 해결하기 위해 localStorage를 활용하여 상태를 유지하는 방법을 함께 적용할 것입니다.🔹 Zustand 설치Zu..

React 관심사 선택 모달 개선하기📌 기능 개요사용자가 관심사를 선택할 수 있는 모달을 만들었지만, 기존에는 선택 즉시 user 상태가 변경되는 문제가 있었습니다.이를 해결하기 위해 임시 상태(tempInterests)를 추가하고, "수정하기" 버튼을 눌러야 반영되도록 개선했습니다.🛠 구현 과정1️⃣ 임시 상태(tempInterests) 추가기존에는 interests가 바로 변경되었지만, 이제 tempInterests를 사용하여 선택한 항목을 임시 저장합니다.관심사가 변경되었을 때만 "수정하기" 버튼이 활성화됩니다.2️⃣ "수정하기" 버튼 동작tempInterests와 interests가 다를 때 버튼이 활성화됩니다.선택된 취미가 없으면 버튼이 비활성화됩니다.const [tempInterests, ..

🚀 React에서 공지사항(Notice) 페이징 최적화 & 성능 개선하기공지사항을 구현할 때, 현재 공지사항 이후의 ID를 찾고, 다음 공지사항을 요청하는 방식을 사용했어요.하지만 기존 방식대로 id+1, id+2 방식으로 가져오는 것은 문제가 발생할 수 있음 🤔📌 문제점: id+1, id+2 방식의 한계공지사항 ID가 연속되지 않을 가능성id+1이 존재하지 않을 수도 있고, id+2가 건너뛸 수도 있음예를 들어, idArray = [6, 8, 10]이면 id+1(7)이 존재하지 않아서 요청이 실패함불필요한 API 요청만약 마지막 공지사항이라면 id+1, id+2 요청 자체가 필요 없음하지만 기존 방식은 마지막인지 확인하지 않고 항상 2개 요청✅ 해결 방법: idArray를 활용한 최적화🔹 1. ..

🚀 React Query를 사용하여 FAQ 관리 성능 개선하기FAQ 관리 페이지에서 React Query를 도입하면 어떤 장점이 있을까?이전에는 useState와 useEffect를 사용하여 데이터를 관리했지만,React Query를 활용하면 API 요청 최적화, 캐싱, 상태 관리 자동화 등 다양한 성능 개선이 가능하다.✅ React Query를 사용하면 좋아지는 점1️⃣ 자동 캐싱 (데이터 요청 최적화)📌 기존 방식useEffect로 API 요청을 실행하면 항상 새로운 요청을 보내야 함같은 데이터를 다시 요청해도 캐시가 없어서 네트워크 사용량 증가📌 React Query 사용 시useQuery는 기본적으로 데이터를 캐싱하여 불필요한 API 요청을 방지같은 데이터를 여러 번 요청하지 않고, 캐시된 ..