TaesooKim.dev
githubgithub
앤디(Andy)
AI를 이용한 활동성 있는 유아용 낱말퀴즈 게임
Overview 🤔
Idea
수동적인 미디어 소비는 유아 발달에 치명적입니다! 그래서 활동성을 높이면서 학습을 시킬까 고민하다 만들게 되었습니다.
Stack
Next.jsNext.js
React React.js
Zustand
Framer Motion Framer
React QueryReact Query
PWA
Tailwind CSSTailwindCSS
Period
2024.02.19 ~ 2024.04.05
Members
FE 3, BE 2, AI 총 6 명
Achievements 🎉
Frontend Developer
UI 디자인
소셜 로그인(카카오) 구현
찰칵퀴즈(메인 퀴즈) 페이지 구현
Next.js 환경에 맞게 React Query Hydration 작업 및 캐싱키 관리
ErrorBoundary 및 Suspense를 이용한 선언전 프로그래밍 시도
PWA를 이용한 어플리케이션화
Challenges ⚔️
1. Server Rendering & Hydration
SSR 환경에서 React Query의 작동방식이 CSR과 다르다는 것을 확인하였습니다.
React Query를 통해 서버에서 prefetch한 데이터를 dehydrate후 클라이언트에서 hydrate 진행합니다.
이 과정을 통해 데이터가 소실되거나, 재요청하는 경우를 방지합니다.
2. MSW 도입기
MSW는 통신을 하이재킹해 대신 목업 데이터를 전송해주는 툴입니다. 이를 이용해 프론트엔드와 백엔드 병렬적 작업을 계획했었습니다.
하지만, Next.js 14 버전에 호환되지 않는 이슈가 있었고, express 서버가 대안으로 사용되고 있었습니다.
목업 서버까지 구성하기 일정이 촉박했기 때문에 백앤드 팀과의 협업은 문서를 통해 진행하였습니다.
Retrospective 🚩
업데이트 예정입니다!