논의 주제

• 프론트엔드 폴더 분리 여부 - 분리하자! 모노레포 적용!

  • 분리 했을 때의 특징
    • 프론트엔드와 백엔드를 확연히 구분해서 개발 가능
    • 여러 서버에서 동작시켜 분산하여 처리가 가능하다
  • 분리 안 했을 때의 특징
    • 빌드해서 백엔드만으로 돌려야한다.
  • 프론트,백엔드 서버 분리
    • 프론트 빌드해서 백엔드로 돌리기
      • 이유: 서버 따로 돌리면 하나가 꺼지면 기능이 제대로 동작하지 않는다.
  • 결정 : 크레딧을 최대한 사용해 로드 밸런서까지 시도 하려면 서버를 분리하는게 좋다.

• 코드 에디터 및 마크다운 에디터 선정

  • 코드에디터 : REACT ACE
  • 마크다운 에디터 : Toast UI

칸반 보드

스프린트 1주차 🚲 · boostcampwm-2021/web04-canyoufixme

구현 계획

• CRA로 프론트엔드 프로젝트를 만든다. - 공통

• 문제 리스트 페이지

  • A101, A102 - SPA 라우팅 구현
  • A103, A104, A105 - 문제 리스트 화면 layout 구성

• 문제 풀이 페이지

  • 코드 에디터, 뷰어랑 마크다운 에디터, 뷰어를 선정 - 공통

    npm

  • 코드 에디터 후보 - 공통 - REACT ACE 당선!(다크모드가 있고, 여러언어에 적용가능하다.<추후에 다른언어 서비스시 확장성 UP>)

    CodeMirror

    Document

    React Textarea Code Editor - A simple code editor with syntax highlighting.

  • 마크다운 에디터 후보 - 공통 Toast UI 당선!(사용하기 쉽고 깔끔하다.)

    Editor

    TinyMCE | Full featured examples

    StackEdit

  • A202, A203, A204, A205 - 문제 풀이 페이지 화면 layout 구성

  • 결과 채점 로직 구현(다같이 페어 프로그래밍)

    • 코드 생성 프로토타입

    unruffled-water-gqvcs

    const results = [
    	() => abc === 'def',
    	() => foo() === 'bar',
    ].map(f => f())
    
    function expect(expression) {
    	return {
    		toBe: function (value) => 
    			typeof expression === 'function'
    				? expression() === value
    				: expression === value,
    	}
    }
    
    // 1
    expect(foo).toBe(bar);
    
    // 2
    foo === bar  // => check(foo === bar)
    

  • 우리는 문제 출제자가 작성하는 테스트함수를 통합해서 테스트해주는 역할

  • 문제 출제자가 제출하는 테스트 함수의 내용이 중요하다.

  • 문제 출제자가 참고할 가이드가 필요하다 - 간단하게 어떤 걸 사용하면 어떤 테스트가 수행되는지.(가짜 함수 만들어서 출제자가 문제내기 쉽게한다.)

• 결과 페이지

  • 결과 페이지 layout 구성
  • B101, B102 - 채점 결과 출력
  • 문제 컴포넌트를 표시(문제 리스트에서 사용한 컴포넌트 재활용)

• 배포

  • 자동 배포(CD) - github action - 공통
  • nginx 초기 설정 - 공통

• 데모 영상 녹화

  • 발표자 한 명 선정
  • 데모 시나리오대로 영상 녹화(목소리 녹음)

목표