기획 README.md
팀명 : 경기사천왕 - 경기도 내 동서남북를 지배하는 4명의 개발자들
구성원
| J094 박춘화 | J165 이창엽 | J205 최낙훈 | J206 최영근 |
|---|---|---|---|
 |
 |
 |
 |
Bug 잡기 어렵지 않아요~! 🐛
개발을 하면서 버그를 잡느라 시간을 낭비한 경험이 있으신가요? 누구나 개발을 하면서 다양한 버그를 맞닥뜨리게 되는데요, 혼자 디버깅을 하면서 버그를 고치는것도 좋지만 버그를 찾아내고 해결하는 과정을 서로 공유할 수 있다면, 혹은 다른 사람이 마주친 버그를 내가 해결해볼 수 있다면, 더욱 값진 경험이 되지 않을까요?
실제 개발과정에서 마주칠만한 버그가 포함된 코드를 출제자가 출제합니다. 사용자는 출제된 코드를 디버깅하여 의도된 동작을 하도록 수정하고 제출합니다. 해당 코드에 대한 체크포인트를 만족하는지 확인하면서 디버깅에 관련된 능력들을 향상 시킬 수 있습니다.
Frontend
- React를 사용하기로 결정했습니다.
- 타입스크립트를 사용하지만 HTML 엘리먼트, 이벤트 및 React 타입을 공부해서 사용하기는 부적절하다고 판단했습니다.
- 타입스크립트 설정(
tsconfig.json)에allowJs: true를 추가하여 자바스크립트와 혼용해서 사용하기로 결정했습니다.
Backend
- Express를 사용하기로 결정했습니다.
- 백엔드는 프론트엔드에 비해 데이터베이스에 저장할 데이터의 타입(코드에 대한 타입)이 엄격해야하기 때문에 타입스크립트만을 사용하기로 결정했습니다.
- 데이터베이스는 어떤 것을 사용할지 아직 미정입니다.
- 1차 목표 기능들을 구현하는데 데이터베이스가 필요하지 않기 때문입니다.
- 2차 목표 기능들을 구현하면서 결정할 예정입니다.
개발 도구
로그인 페이지
- 깃허브 OAuth를 이용해 로그인을 진행하고 깃허브아이디를 유저 아이디로 저장합니다.
- 로그인이 완료되면 문제 리스트 페이지로 이동합니다.
문제 리스트 페이지
- 문제들은 카테고리로 분류합니다.
- 문제의 제목을 클릭하면 해당 문제 풀이 페이지로 이동합니다.
- 표지판 안의 불의 개수에 따라 문제의 난이도 표시합니다.
- 풀이 여부 라벨을 추가하여 사용자가 풀었던 문제인지 구분합니다.
문제 풀이 페이지
- 로그인한 사용자만 문제 풀이 페이지로 이동 가능합니다.
- 좌측 상단에 문제에 대한 설명 표시합니다.
- 좌측 하단에 코드 실행 결과 표시합니다.
- 우측의 코드 에디터에서 주어진 코드를 수정합니다.
- 우측 하단의 실행 버튼을 누르면 코드 실행 결과 표시합니다.
- 문제풀이 프로토타입 👇
문제 결과 페이지
- 앞 전 문제 페이지에서 '제출' 버튼을 클릭하면 문제에 대한 결과 페이지로 이동합니다.
- 성공한 단위 테스트에는 연두색 표시, 실패한 단위 테스트에는 빨간색을 표시합니다.
- 좌측 하단에는 (모든 테스트를 성공했다 ? 문제 리스트로 돌아가는 버튼 : 해결하고 있던 문제로 가는 버튼)을 표시합니다.
- 우측에는 해당 문제와 비슷한 문제들의 목록을 표시합니다.
문제 출제 페이지
- 좌측 상단에 문제에 대한 설명을 작성하는 마크다운 에디터가 존재합니다.
- 미리보기 버튼을 클릭하여 작성한 마크다운 문서를 미리보기 가능합니다.
- 좌측 하단에는 버그가 포함되어있는 코드를 작성할 수 있는 에디터가 존재합니다.
- 우측에는 테스트의 이름과 테스트를 진행 할 수 있는 내부 함수 로직을 작성합니다.
- "+" 버튼을 누르면 테스트 케이스를 추가할 수 있습니다.
- 제출 버튼을 누르면 해당 문제가 제출되고 문제 리스트 페이지로 라우팅 된다.
회원 정보 페이지
- 로그인한 회원의 정보(제출한 문제 리스트, 푼 문제의 개수, 시도했지만 풀지 못한 문제의 개수 등)를 요약해서 보여줍니다.
- 잔디 심기 기능은 당일 푼 문제의 개수를 기준으로 채워집니다.