Github API를 이용하여 등록한 Public Repository의 issue들을 모아서 보는 뷰어를 구현하는 프로젝트입니다.

📎  Go

✅ View

✅ Implement

Stack

Javascript React Recoil Styled-Components

Features

• Repository 검색창 구현
• 검색 시 Skeleton 구현
• Repository 등록 구현
• Repository 등록을 최대 4개로 제한
• 중복된 Repository 등록 제한
• 등록한 Repository issue를 모아 볼 수 있는 뷰어 구현
• 등록한 Repository 삭제 구현
• Pagenation 구현
• Repository list 또는 issue list 클릭 시, 상세 페이지 이동 구현

✅ Improvement

렌더링 최적화

React.memo를 사용하여 search input의 변화가 있을 때에만 렌더링이 일어나도록 최적화

최적화 전	최적화 후

UX/UI 개선

1. 사용자의 검색 방법 개선을 위하여 검색 버튼에서 디바운스를 이용한 검색으로 개선

개선 전	개선 후

2. 데이터를 가져오는 동안의 사용자의 화면을 개선하기 위해 로딩 적용 후 Skeleton으로 추가 개선

개선 전	개선 후

✅ Directory

├── public/
├── src/
│   ├── components/                   - page components
│   ├── recoil/                       - state 저장 및 관리
│   └── pages/                        - main page
│
├── App.js                            - 분리한 page components를 randering
├── index.js                          - entry point
├── README.md                         - 리드미(프리뷰, 배포링크, 코드컨벤션)
└── package.json                      - 사용 package 목록

✅ Code Convention

Getting Started

1. clone the repository,

$ git clone "https://github.com/sareum-k/payhere.git"

2. Install dependencies,

$ npm install

3. Setting prettier,

$ npx prettier --write .

4. start the project,

$ npm start

Commit Emoji

emoji	commit message	when to use it
🎉	Start	프로젝트 시작
✨	Feat	새로운 기능 추가
🐛	Fix	버그 수정
♻️	Refactor	코드 리팩터링
💄	Style	스타일 추가 및 업데이트
📦	Chore	패키지 추가 및 업데이트
📚	Docs	그 외 문서 추가 및 업데이트