📜 Week 2

논의 주제

• DB 선정
  • MySQL + MongoDB
  • 개발 단계에서는 도커를 사용하고, 배포 시에는 DB 서버를 사용할 예정
• 무중단 배포 적용?
  • Docker를 사용하니까 무중단 배포를 구현 가능
  • Container 2개를 생성하고, Shell Script로 컨테이너 상태를 확인
  • 이번 주 중으로 꼭 구현해야할 목표?
• 문제 채점 기능 구현을 API? 웹 소켓?
  • API 요청을 보내서 처리하는 경우에 UX 관점에서 좋지 않음
    • 처리해야할 양이 많은 경우에는 사용자가 무한정 대기해야하는 경우가 생김
  • 대기 큐 + 웹 소켓으로 기능 구현 결정

개발 방식

두 팀(프론트,백)으로 나누어 개발 진행 코드 리뷰 철저!

구현 계획

• Frontend

  • styled component 상속 기능, props callback 기능

  • iframe sandbox 적용

  • mock, fake API 제공 (비동기 처리, 함수 호출 추적)

    https://github.com/sinonjs/sinon

    https://github.com/sinonjs/fake-timers

  • 로그인 페이지 layout 및 로그인 기능 구현

  • 문제 출제 페이지 layout 및 API 요청 기능 구현

  • 문제 풀이 페이지 UX 개선 (화면 조정, 스크롤)

• Backend
  • Mysql + MongoDB 연동
  • TypeORM 적용
  • 회원 정보, 문제에 대한 data type 설계
  • 폴더 구조
  • API 설계 및 구현
  • 문제 채점 기능 구현에 웹 소켓 사용
    • 대기 큐 구현
  • 로그인 기능
  • CI / CD - main 브랜치 push 트리거
  • 테스트 코드 작성 (Jest)
• 발표 컨셉, 주제 정하기
• 데모 영상 녹화
  • 발표는 나눠서 다 같이
  • 데모 시나리오대로 영상 녹화(목소리 녹음)

목표

• 백과 프론트 연동 후에도 기본 서비스가 원활하게 작동하도록 구현하자.
• 로그인, 문제 출제, 문제 풀이까지 작성한 데모 시나리오에 따라 기능을 모두 보여줄 수 있을 정도로 구현하자.

데모 시나리오

1. 사용자가 URL에 접속하면 홈 페이지를 보여준다.
2. 사용자가 로그인 버튼을 누르면 Github OAuth로 로그인을 하기 위해 해당 페이지로 리다이렉션된다.
3. 사용자가 로그인을 하면 문제 리스트 페이지로 이동한다.
4. 사용자가 문제 출제 페이지로 이동하여 문제를 출제한다.
5. 사용자가 문제 리스트 페이지로 이동하여 방금 출제한 문제의 문제 풀이 페이지로 이동한다.
6. 사용자가 출제한 문제를 풀이한다.