📜 Week 1

논의 주제

• 프론트엔드 폴더 분리 여부 - 분리하자!

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

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

  • 코드에디터 : 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 구성

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

  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 초기 설정 - 공통

• 데모 영상 녹화

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

목표

• 디자인을 신경써서 데모를 보여주자. (= 1차 목표)
• 디자인은 맨나중에 핵심 기능부터 구현하자.

데모 시나리오

1. 사용자가 URL에 접속하면 문제 리스트 페이지를 보여준다.
2. 사용자가 문제 리스트 중 하나를 선택하면 문제 풀이 페이지로 이동한다.
3. 사용자는 코드 에디터에 코드를 작성하여 문제를 풀이한다.
4. 사용자가 제출 버튼을 클릭하면 채점 결과를 문제 결과 페이지에서 보여준다.