구현 계획

• 메세지 전달용 모달

  • 로그아웃, 문제 출제, 문제 풀이 제출 등 중요한 이벤트에서 사용할 메세지 전달용 모달 구현

• 문제 출제 페이지

  • 문제 출제 페이지 문제 제목, 언어, 레벨 입력 추가
  • 테스트 케이스 에디터 레이아웃 수정
  • API 요청에 사용할 디바운싱 함수 구현
  • 문제 출제 가이드라인 작성
  • 출제 코드 검증 과정
  • 에러 핸들링 및 성공 시 문제 리스트 페이지('/')로 리다이렉트

• 문제 리스트 페이지 무한 스크롤 구현

  Intersection Observer API - Web API | MDN

• 문제 채점 API에 대기 큐 적용

  • 대기 큐를 메모리로 관리하느냐, 따로 DB? 외부 자료구조를 통해 관리하느냐
  • 문제 채점 방법

    • 워커 스레드로 처리

      Worker threads | Node.js v17.1.0 Documentation

      Node.js Worker Threads

      웹 워커 사용하기 - Web API | MDN

      웹워커는 브라우저 환경 워커스레드는 nodejs환경

      • 무한 루프 처리

        aged-water-pk1zf

        green-water-g48oi

    • 채점을 하는 도커 이미지를 만들고, 도커 위에 다수의 컨테이너로 처리(언어별)

      Seccomp security profiles for Docker

• 3차 목표(상기 기능 다 구현하고 여유가 되면...)

  • 질문 및 답변 게시판 레이아웃 구현
  • CRUD API 개발

목표

1. Naming 변경
2. 로그아웃 모달
3. 홈 페이지 문제 리스트 무한 스크롤
4. history? 새로고침, 뒤로 가기 이슈(코드 작성중 뒤로가기 누르면 내용 없어지는데 진짜 갈거냐고 물어보는 모달창)
5. 문제 출제 페이지 가이드라인
   1. chai 공식문서 링크 제공?
6. 코드 에디터 내의 백틱 사용 시 iframe 생기는 현상
   1. code.replaceAll(\,`\\);`
7. 워커 스레드를 이용한 동시 채점 및 무한 루프 방지
   1. 대기 큐, 웹소켓, worker thread
   2. 테스트 방법도 생각
8. 비동기 테스트 API 마무리

데모 시나리오

1. 동시 채점 (비동기 채점, 대기큐와 실시간 처리 과정) - 여러 사용자가 작성된 코드를 동시에 제출할 때 대기큐를 이용한 채점 과정을 보여준다.
2. 각 이벤트에 대한 모달(alert X) - 사용자가 어떤 행동을 하고, 어떤 결과가 나왔다.