에픽은 라벨

개발

개발 환경을 세팅한다.

• FE 개발 환경 세팅
  • Next.js, React, Typescript
  • Vanilla Extract
  • Jest, React-Testing-Library, msw
  • Eslint(Airbnb), Prettier, Storybook
  • 필요한 패키지를 설치한다. axios
• BE 개발 환경 세팅
  • SQLite 초기화 세팅
• 공통 개발 환경 세팅
  • git commit

CI/CD 파이프라인을 구축한다.

• 자동 배포 구축
  • FE 자동 배포 구축
  • BE 자동 배포 구축
  • 공통 자동 배포 구축
• CI/CD 구축
  • FE CI/CD 구축
  • BE CI/CD 구축
  • 공통 CI/CD 구축
• 수동 배포

기능

목차에 있는 문제를 풀 수 있다.

• 문제를 확인할 수 있다. (용준)
  • [FE] 사이드바 컴포넌트 구현
    • 사이드바 영역의 가로 길이가 길어지면 스크롤이 가능하다
    • 문제 목차 데이터는 프론트엔드 정적 데이터로 관리한다
    • 목차를 누르면 해당 문제 페이지로 이동한다
    • 현재 페이지인 목차에는 볼드 처리가 된다
    • 목차에서 정답여부를 확인할 수 있다
  • [FE] 화면에서 문제를 확인할 수 있다
    • 목데이터
    • 문제 조회 API 연결
    • 백틱 스타일링
  • [BE] 문제를 보낼 수 있는 GET API를 만든다.
    • 문제 상황을 영속성 데이터화한다.
      • DB를 선택한다.
      • DB를 설계한다.(DDL 포함)
      • 데이터를 삽입한다.
    • 요청받은 문제 정보를 응답한다.
    • GET 요청을 로깅한다.
    • 핵심 명령어 서빙.
    • API를 명세한다
  • [BE] 문제 상황이 컨테이너화 되어야한다.
    • 최초 접속 시 미리 준비되어 있는 컨테이너를 할당받는다.
    • 접속 이력(히스토리)이 있는 세션이라면 준비되어 있는 컨테이너에 히스토리를 적용한 뒤 할당한다.
    • 컨테이너 생성 시 서버 행동을 로깅한다.
• 그래프가 있는 경우에는 Git 그래프를 확인할 수 있다. (용준)
  • [FE] canvas 로 git 그래프를 시각화한다
    • 목데이터
  • [FE] Git 그래프 조회 API 응답 파싱
  • [FE] Git 그래프 데이터 파싱 테스트 코드 작성
    • 목데이터
  • [FE] git 그래프 조회 API 연결
  • [FE] Git 그래프 시각화에 애니메이션 적용
  • [FE] Git 그래프 줌인, 줌아웃
  • [BE] get API로 그래프에 관련된 git 명령의 결과를 제공할 수 있다.
    • 그래프 정보를 제공할 수 있는 방법을 결정한다…
    • GET 요청을 로깅한다.
• 초기화 할 수 있다. (정제)
  • [FE] 초기화 버튼
    • 클릭 이벤트
    • 초기화 API 연결
    • 초기화 성공 시 토스트 메시지
    • 초기화 실패 시 토스트 메시지
    • 깃 그래프 시각화 초기화
    • 터미널 초기화
  • [BE] 초기화된 환경을 제공한다
    • 디렉토리를 삭제한 뒤, 새로운 문제 환경을 제공한다.
    • 사용자의 초기화 행동을 기록한다.
• 전체 리셋을 할 수 있다. (정제)
  • [FE] 사이드바 하단 리셋 버튼
    • 클릭 이벤트를 부착한다.
    • 스크롤이 되지 않게 하단에 고정한다.
  • [FE] 서버에 리셋 요청
    • 전체 리셋 API를 연결한다.
    • 리셋 성공시
      1. 새로 고침을 한다.
      2. 성공 토스트 메시지를 띄운다.
    • 리셋 실패 시
      1. 실패 토스트 메시지를 띄운다.
    • 이미 프로세스가 요청중이면 중복된 요청을 받지 않는다.
  • [BE] 사용자 상태를 새롭게 만든다.
    • 세션id를 새로 발급한다.
    • 발급 이력을 로깅한다.
• 실행취소 할 수 있다. (채현)
• 핵심 명령어를 확인할 수 있다. (채현)
• 모범 답안을 확인할 수 있다. (유현)