works 조찬기 - connect-foundation/2019-07 GitHub Wiki

Who am I?

changicho

changicho

GitHub



What I did in '피키포키'

week1

1주는 개발 작업이 따로 이루어 지지 않았습니다.

  1. 그라운드 룰 문서 초안 작성

    • commit convention 결정 및 문서 작성
    • git branch 전략 결정 및 가이드 작성

구글 드라이브 공유폴더 링크

팀의 규칙을 정하는 작업을 했습니다.

commit convention의 경우 기존에 사용하던 Udacity의 가이드 라인을 변형해 제작했습니다.

가장 고려했던 부분은 atomic한 commit 단위를 유지하는 것과 이유를 꼭 한줄 적게 하는 것이였습니다.

commit의 단위가 atomic 해야 코드리뷰 시 보기 편할 것이고, commit에 이유를 적는 습관을 들이면 왜 그렇게 코딩을 했는지 스스로 되집어보는 계기가 되기 때문입니다.



week2

API 작성 양식을 정하고, 메인페이지 부분의 view와 API를 담당했습니다.

front

  1. 방 번호 입력 페이지 제작
  2. 닉네임 입력 페이지 제작

back

  1. 방 번호 검사 API 제작
  2. 닉네임 검사 API 제작
  3. inMemory 설계

메인 페이지 부분을 담당해서 개발했습니다.

방 번호 입력과 닉네임 입력에 대한 validation을 정하고, 앞으로 제작하는 API의 규칙을 정했습니다.

API는 주석 정보를 제공했으며, 주석의 양식은 apidoc으로 통일했습니다.

/**
 * @api {post} /room/checkRoomNumber 유효한 방인지 확인 요청
 * @apiName checkRoomNumber
 * @apiGroup room
 *
 * @apiParam {roomNumber} id 방의 고유한 6자리 번호.
 *
 * @apiSuccess {bool} isSuccess 방을 들어갈 수 있는지 여부
 * @apiSuccess {bool} isError 정상 동작 되지 않는 이유
 * @apiSuccess {string} message 오류가 발생한 경우, 오류 메시지
 *
 * @apiSuccessExample Success-Response:
 *     HTTP/1.1 200 OK
 *     {
 *       isSuccess: true,
 *     }
 *
 * @apiSuccessExample req.body에 인자 없음:
 *     HTTP/1.1 200 OK
 *     {
 *       isError: true,
 *       isSuccess: false,
 *       message: 'req.body에 roomNumber가 없습니다.',
 *     }
 *
 * @apiSuccessExample 열리지 않은 방에 접근하려고 함:
 *     HTTP/1.1 200
 *     {
 *       isSuccess: false,
 *       message: '존재하지 않는 방입니다. 방 번호를 다시 입력해주세요.',
 *     }
 */

API 호출 시 req.body의 key가 존재하는지 검사하는 safe guard를 구현했습니다.



week3

네이버 oauth 로그인 기능을 담당했습니다. 팀의 대문인 README 문서를 작성했습니다.

front

  1. 네이버로 로그인 페이지 제작
  2. 네이버로 로그인 후 프로필 API에서 정보를 가져오는 빈 페이지 추가

back

  1. 네이버 로그인 후 가져온 access_token으로 프로필 API를 호출하는 API 추가

프로젝트의 대문 README.md 문서를 작성했습니다.

네이버 아이디로 로그인 기능을 적용했습니다.

로그인 후 받아온 access_token을 이용해 프로필 API에서 프로필 정보를 받아왔습니다.

프로필 정보에서 필요한 부분은 JWT로 쿠키에 세팅하고, 로그인 완료 후 이동할 페이지로 redirect 시켰습니다.

이미 로그인 되어 있으면 로그인 과정없이 넘어가도록 했습니다.

week4 & week5

player 게임 진행 페이지를 제작했습니다. (week4 & week5) 게임 진행 관련 API들을 제작했습니다. (week4 & week5) dbManager 객체를 구성하고 제작했습니다. (week5) 데이터베이스 서버 관리 & 게임 관련 정보 C,R (week5) 404와 missing property에 대한 에러 처리를 했습니다. (week5)

front

  1. player 게임 진행 페이지 (대기, 퀴즈 진행, 퀴즈에서 정답 선택, 정답 확인, 결과)

back

  1. 데이터베이스 서버 생성 및 관리
  2. 데이터베이스 접근을 관리하고 쿼리를 실행시키는 dbManager 생성
  3. 퀴즈 진행 API 제작
    • player들의 선택한 항목의 수를 count 하는 API
    • player 각각의 선택에 대한 정답을 확인해주고 정답을 갱신하는 API

infra

모놀리식 구조를 3 계층 아키텍처로 변경.

refactoring

하드코딩 되어 있는 부분 constant로 뺄 수 있도록 관리

week6

player 게임 진행 페이지의 디자인을 개선 했습니다. 게임 진행에 관한 API를 통합해 호출 횟수를 줄였습니다. 버그데이에 발견한 버그와 사용자들의 의견을 종합해 Player 페이지를 개선했습니다.

이미지추가

etc

네이버 아이디로 로그인 검수 (통과)

front

Player 퀴즈 페이지 이미지 추가 모바일 페이지를 고려한 디자인 수정 게임 중간 퇴장시 생기는 오류 해결 Player Result 페이지에서 Prompt, event 제거 FlexibleInput에서 한글을입력할 때 생기는 오류 제거

back

퀴즈세트 객체 생성 부분 리펙토링 (타이틀이 같은 경우에 대한 처리) Player 퀴즈 진행 API 통합 (API 호출 횟수 감소)

database

예약어와 겹치는 칼럼명 변경, dbManager 객체의 해당 부분 수정 네이버 아이디로 로그인 기능을 위한 USER 테이블 변경

refactoring

react propTypes waring 해결

⚠️ **GitHub.com Fallback** ⚠️