[팀 프로젝트] - 코드잇 스프린트 FE11기 심화 프로젝트

코드잇 스프린트 FE11기 Part4의 8팀 소속으로 심화 프로젝트를 Coworkers라는 주제를 선정해 진행하게 되었습니다.앞으로 프로젝트를 진행하며 개발과정이나 발생한 문제와 같은 것들을 기록하기 위해 글을 작성하게 되었습니다.주제 선정 이유에 앞서 Coworker

📌 1. 공통 컴포넌트 Input Form 제작 (react-hook-form 사용) Coworkers 프로젝트에서 공통적으로 사용되는 Input Form을 제작할 때, 폼 관리 라이브러리 중 react-hook-form을 선택하여 적용하였습니다. ✅ 1. 왜 re

1. 🛠 Redux를 활용한 로그인 상태 확인 및 페이지 경로 변경 ⚠️ 문제 상황 메인 랜딩 페이지에서 사용자의 로그인 상태에 따라 다른 페이지로 이동해야 합니다. * 1️⃣ 로그인되지 않은 사용자는 /login 페이지로 이동* * 2️⃣ 로그인된 사용자는 마지막

🎬 Framer Motion을 활용한 메인 랜딩 페이지 애니메이션 적용 메인 랜딩 페이지의 사용자 경험(UX)을 향상시키기 위해 애니메이션 효과를 추가하였습니다. 이를 위해 여러 애니메이션 라이브러리를 비교한 후, Framer Motion을 최종 선택하여 적용하였습니

1. react-query를 이용한 데이터 패치 1️⃣ 서버 상태 관리를 효율적으로 하기 위해 (useQuery 활용) ✅ 기존 방식 (useState + useEffect) ❌ 문제점 불필요한 API 요청 발생 컴포넌트가 마운트될 때마다 무조건 API 요청을 실행

2. 할 일 진행상황 원형 차트 2-1. 라이브러리 선정 과정 1. npm trend를 활용한 다운로드 수 비교 1️⃣ 여러 차트 라이브러리의 다운로드 수 추이를 비교한 결과, Recharts가 가장 활발하게 사용되고 있으며, 커뮤니티의 신뢰도가 높다고 판단했습니

3. To-Do List Drag & Drop 구현 3-1. dnd-kit 라이브러리 활용 1️⃣ dnd-kit을 선택한 이유: 다른 솔루션과의 비교 드래그 앤 드롭(Drag & Drop) 기능을 구현하기 위해 다양한 라이브러리와 방법을 비교한 결과, dnd-kit이

4. Skeleton UI: 더 나은 사용자 경험을 위한 로딩 처리 Skeleton UI는 페이지가 데이터를 가져오는 동안 사용자에게 빈 화면이 아닌, 로딩 중이라는 시각적 힌트를 제공하는 디자인 패턴입니다. 이를 통해 사용자 경험(UX)을 향상시키고, 부드러운 화면

5. Key값 관련 빌드 오류 및 해결 방법 ⚠️ 발생한 문제 배열의 key 값으로 index를 사용하여 렌더링했을 때, React에서 경고가 발생하며 빌드가 실패함. 🔍 원인 분석 React는 각 요소의 변경을 추적하기 위해 key 값을 사용하는데, index를