개요

• 학습 및 라이프 효율성 향상 목적의 개인용 웹 서비스
• 목표
  1. 스스로 전체 시스템(FE, BE) 개발 및 운영을 경험함으로써 웹 서비스 이해도 향상을 목표
  2. 점진적으로 새로운 서비스 개발 및 고도화와 동시에 시장에 수요가 있다 고려되는 서비스는 별도 서비스로 분리하여 시장에 배포 및 운영하는 경험을 목표

기술 스택

FE

• TypeScript

• React 18

• Zustand 4

• PostCSS

  BE

• JavaScript

• Express 4

• Notion API

주요 개발 및 설계 사항

• 인증 및 인가 시스템 (Cookie, Session 활용)
• 키워드 노트 서비스 (Notion Database API 활용)
  • 전체 키워드 노트 리스트 조회
  • 개별 키워드 노트 상세 조회
  • 다음 복습 일시 설정
• error boundary를 활용한 전역 에러 처리
• 팝업을 다루는 인터페이스 모듈화 (zustand 활용)
• input 데이터를 다루는 인터페이스 모듈화 (custom hook 활용)
  • 데이터 검증 (+ 유효하지 않은 데이터 일 경우 에러 메시지 처리)
  • onChange 호출 시에 원하는 데이터 포맷으로 convert

이슈 사항

• 인증 방법 선택 - Session vs JWT

화면

• 메인페이지

  

• 로그인 페이지

  

• 키워드 노트 리스트 페이지

  

• 키워드 노트 상세 팝업