RockieTalkie | 로키토키

RockieTalkie 메인

학습 과정 중 일부

백오피스(교사)와 학습 리포트 중 일부

영어 그림책을 읽고, 다양한 액티비티(퀴즈, 낱말 찾기 등) 활동을 통해 아이들이 즐겁게 영어를 학습할 수 있는 B2B(도서관 및 교육기관) 서비스입니다. 아이들은 영어 문장을 읽으며 음성 인식 모델을 이용해 본인의 발음 정확도를 진단받을 수 있습니다. 서비스는 크게 [진단평가] - [리딩 학습 / 액티비티] - [학습 통계] - [백오피스] 영역으로 구분됩니다.

💻 기술

• Next.js, React.js, Typescript, Redux-toolkit, react-query, styled-components, PlayWright, framer-motion
• Express

👦 개발 범위

• 프론트엔드 개발을 리딩했습니다.

🛠️ 기술적 고민과 작업들

1. React-query(Tanstack-query) 도입

(1) 문제 상황

기존 서비스는 **Redux-saga와 RTK(Redux Toolkit)**를 사용하여 서버 데이터를 클라이언트 측에서 관리하는 방식을 채택했습니다. RTK 덕분에 Redux의 장황한 보일러플레이트는 어느 정도 해소되었지만, 서비스 규모가 확장될수록 다음과 같은 문제들이 드러나기 시작했습니다.

• 서버 데이터 동기화의 어려움: 클라이언트 스토어에 저장된 데이터가 서버의 최신 상태와 일치하는지 확인하고, 이를 유지하는 과정이 복잡하고 수동적이었습니다. 특히 과거의 데이터를 무효화(invalidation)하고 재요청(re-fetching)하는 로직을 직접 구현해야 하는 비효율성이 컸습니다.
• 클라이언트와 서버 사이드 상태가 혼재: 클라이언트 UI 상태와 서버 데이터 상태가 Redux 스토어에 혼재되어 있어, 상태 관리 로직이 복잡해지고 유지보수가 어려웠습니다.

이러한 문제들을 해결하기 위해 클라이언트 데이터와 서버 데이터를 명확히 분리하여 관리할 수 있는 새로운 솔루션이 필요하다는 결론을 내렸습니다.