TOEIC 어휘 앱 개발: Supabase와 React를 활용한 진행 상황 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• TOEIC 준비생 (영어 학습자)
• React 및 Supabase 기술 습득 중인 개발자
• 난이도: 중간 (기초 React/Supabase 지식 요구)

핵심 요약

• Supabase 인증 시스템 (supabase-js 라이브러리) 사용으로 사용자 인증 구현
• React 기반 웹 앱에서 단어 목록(WordList) 및 의미(Meaning) 페이지 개발 완료
• Supabase 데이터베이스에 단어 저장 및 프론트엔드에서 데이터 불러오기 성공
• 현재 문제점: 페이지 전환 후 새로고침 실패, UI 디자인 불만, 학습한 단어 필터링 기능 미구현

섹션별 세부 요약

1. 현재 개발 진행 상황

• 인증 시스템 구현: Supabase의 auth 모듈을 활용한 사용자 로그인/로그아웃 기능 구현
• 기능 구현:

- 단어 목록(WordList) 페이지: TOEIC 핵심 어휘 목록 표시

- 의미(Meaning) 페이지: 단어별 설명 및 예문 제공

• 데이터 관리: Supabase의 PostgreSQL 데이터베이스에 단어 정보 저장 및 React에서 fetch API로 데이터 동기화

2. 개선이 필요한 문제점

• 기술적 이슈:

- React Router에서 페이지 전환 후 window.location.reload() 호출 실패

- UI 디자인: 현재 사용 중인 Tailwind CSS 스타일이 사용자 경험에 부적합

• 기능 미구현:

- 학습한 단어 필터링 기능 미구현 (예: remembered_words 필터링)

- 모바일 기기 최적화 미완료

결론

• React Router v6을 활용한 네비게이션 구현 및 Tailwind CSS로 UI 개선 권장
• Supabase의 filter() API 활용하여 remembered_words 필터링 기능 구현
• 기능 확장 방향: AI 기반 단어 추천 알고리즘(Word2Vec 활용) 추가 고려