/github-repo-project

Primary LanguageTypeScript

배포

firebase를 통해 hosting을 진행하였습니다

주소 : https://github-42f2a.web.app/

요구사항

HOME page

  • HOME화면에서 검색창을 볼 수 있다
  • 검색창에 Repository명을 입력해서 Repository를 검색할 수 있다.
  • 검색된 Repository들에 대해서 볼 수 있다
  • 검색된 Public Repository를 등록할 수 있다.
    • 등록 개수는 최대 4개로 제한하며, 최대 개수 초과 등록 시 이를 사용자에게 알려준다.
    • LocalStorage를 활용하여 등록한 repository에 대한 내용들을 저장한다
  • Repository의 이름과 설명 부분을 클릭하면, 새 탭을 열어 Repository의 창을 보여준다

All Issues Page (등록된 모든 레포지터리의 이슈들을 랜덤하게 보여주기)

  • Issue Item들을 보여준다

    • 등록된 각각의 Public Repository의 issue를 한 페이지에서 모아서 볼 수 있다.
    • 각 issue 마다 제목, Repository 명이 보이도록 한다.
    • 해당 issue를 클릭하면 새 탭으로 Github의 상세 페이지로 이동할 수 있다.
    • 페이지네이션을 통해서 계속해서 issue를 모아서 볼 수 있다.
      • Promise all를 통해 받아온 응닶값의 총 개수를 통해 페이지네이션을 구현한다

  • Promise all을 활용하여 repository에 등록된 값들을 모두 불러와 값을 섞어 랜덤하게 보여준다

  • repository가 local storage상에 저장되어 있지 않은 경우 all-issues페이지로의 이동을 막는다

  • 만일 등록된 이슈가 없다면 없다는 안내메세지를 보여준다

Issue Page (각각의 레포마다 이슈 보여주기)

  • 등록된 각각의 public repository에 대해서 볼 수 있다

  • 등록된 Repository를 삭제할 수 있다.

  • public repository를 클릭하면 issue들을 볼 수 있다

  • Issue Item들을 보여준다

    • 각 issue 마다 제목, Repository 명이 보이도록 한다.
    • 해당 issue를 클릭하면 새 탭으로 Github의 상세 페이지로 이동할 수 있다.
    • 페이지네이션을 통해서 계속해서 issue를 모아서 볼 수 있다.

issue api 관련 문제

깃허브에서 제공하는 isssue조회 api가 2가지 존재하였습니다 repository 각각의 이슈들을 보여주기 위해 아래와 같은 상황을 고려하였습니다

/repos/{owner}/{repo}/issues

  • 해당 api의 경우, total_count에 대한 응답값을 주지 않는다
  • Issue를 조회할 경우, pr과 함께 조회된다
  • pr일 경우 pull_request 의 속성이 존재한다

/search/issues

  • 해당 api의 경우, totalCount 값을 제공해주지만, repository에만 속한 issue가 정확히 조회되지 않는다
    • q에 들어가는 단어와 유사한 경우에도 issue로 검색 결과를 돌려주기 때문에, total_count가 실제 해당 repository의 issue 총 개수과 일치하지 않는다

=> 결론

  • repo에 속한 issue들을 정확하게 볼 수 있는 것이 중요하다고 판단하였습니다 그래서, /repos/{owner}/{repo}/issues 를 사용하여 이슈를 조회하기로 하였습니다

    • PR의 경우,

      • PR인 것을 모두 제외하면 page 조회마다 유저에게 보여지는 item의 개수가 랜덤하게 보여져 혼란을 일으킬 수 있다고 고려하여, PR인 경우 PR로 표시하기로 결정하였습니다

    • Pagination의 경우,

      • Repository에서의 Pagination과 달리 처음 부터 완성된 totalCount를 주는 것이 아닌 다음 버튼을 눌렀을 때마다, 응답값으로 오는 값의 개수를 아래의 기준으로 판단해 숫자를 업데이트 해나갑니다
        • 현재의 응답값의 이슈 개수가 10개일 때에 다음 페이지가 있는 것으로 임의로 판단하여 Pagination상에 보여지는 totalCount의 숫자를 더합니다

유의점

  • github의 repository가 최대 1000개 까지 검색이 가능합니다 *아래는 1000개 범위를 넘어가는 것을 조회했을 때에 나오는 결과
documentation_url : "https://docs.github.com/v3/search/"
message: "Only the first 1000 search results are available"
  • 시간당 60회의 요청만 보낼 수 있음

추가 구현 사항

  • 반응형 화면 구현
  • 응답값을 받아오는 동안 보여줄 skeleton 구현
  • 개발 과정에서 가장 많이 발생했던 요청 횟수를 넘어 발생하는 api error에 대해서 처리
  • 당장 사용하지 않는 페이지들에 대해서 다이나믹 Import 진행

사용한 라이브러리

개발

typescript, react

스타일링

emotion, material UI

상태 관리

react-query

테스트 도구

storybook

번들러

webpack, babel

배포

firebase