Hello Wordy

배포주소

https://words.sungho.my

Swagger API 문서

• 문서보기

프로젝트 개요

• Web Speech API 등을 활용해 자신만의 외국어 단어장을 제작 및 학습할 수 있는 외국어 학습 웹 어플리케이션
• React.js 를 이용한 프론트엔드 개발
• Express.js 와 MongoDB를 이용한 백엔드 개발

프로젝트 기간

• 2022/07/22 ~

기술스택

• 프론트엔드

  

• 백엔드

  

학습, 구현 및 개선사항

• REST api 의 설계, 구현, 및 통신
• Swagger 활용 api 문서화
• 클라이언트 및 서버 측면의 Session 기반 Authentication/Authorization 구현
• 반복적으로 처리하던 권한 별 페이지 접근 제어 로직을 Route Nesting을 활용해 하나의 Route에서 처리하도록 개선
• Custom hook을 이용한 관심사 분리
• ContextAPI를 이용한 전역상태 관리(Auth상태 및 서버상태(데이터))
• ContextAPI와 useReducer hook을 이용한 FLUX 패턴 구현
• 클라이언트의 http 생성 및 service 호출 로직에 의존성 주입(DI) 패턴을 적용해 프로그램 유연성 향상
• 반복적으로 사용하는 컴포넌트의 재사용성을 높여 생산성 향상
• ToggleButton, SideBar, Modal, 로딩처리, 반응형 웹 등 styled-components를 이용한 다양한 UI구현

기능소개

• Session Auth
  • 회원가입
  • 로그인
  • 로그아웃
• 단어장 CRUD
  • 토픽 CRUD
  • 단어 CRUD
• 학습 기능
• 북마크
• 반응형 레이아웃

Session Auth

Auth - 회원가입

• input 입력시 유효성 검사 후 메세지 출력 및 가입버튼이 활성화됩니다.
• 이름을 입력하지 않을 경우 이메일의 앞부분을 이름으로 사용합니다.
• 가입요청시 이메일의 중복 여부를 확인 후 메세지를 출력합니다.
• 가입에 성공시 자동으로 로그인이 진행됩니다.

Auth - 로그인

• 로그인 오류가 발생하면 메세지를 출력합니다.
• email과 password 인증이 완료되면 서버로부터 session-id가 담긴 쿠키를 전송받고 전역 AuthContext의 유저 상태를 업데이트합니다.
• 유저 상태에 따라 client의 route 접근이 제한되고 쿠키의 session-id로 api요청의 인가가 이루어집니다.

Auth - 로그아웃

• client 유저 상태를 업데이트하고 DB의 세션을 삭제합니다.

단어장 CRUD

CRUD 토픽

• 언어 및 토픽이름을 입력해 새로운 토픽을 생성합니다.
• 선택된 언어는 Web Speech API의 언어설정으로 사용됩니다.
• 토픽 이름과 선택된 읽기언어를 수정할 수 있습니다.
• 토픽을 삭제하면 토픽에 포함되어있는 모든 단어가 삭제됩니다.
• 학습 진행도가 표시됩니다.

CRUD 단어

• 단어를 생성, 불러오기, 수정 및 삭제할 수 있습니다.

학습 기능

• 전체 단어 혹은 미학습 단어를 선택해 학습합니다.
• 학습이 시작되면 무작위로 단어가 나타납니다.
• 매 단어마다 스스로 학습도를 평가하고 데이터에 반영됩니다. 또한 북마크여부를 수정하거나 발음을 들어볼 수 있습니다.
• 학습종료시 학습 결과를 표시합니다.

북마크

• 북마크 되어있는 단어를 한 곳에서 편집하거나 학습할 수 있습니다.

반응형 레이아웃

• 미디어쿼리를 이용해 반응형 레이아웃을 구현했습니다.