| 이름 | 버전 |
|---|---|
| node | ^18.7.0 |
| npm | ^9.8.1 |
| react | ^18.2.0 |
| octokit | ^3.1.0 |
https://github.com/settings/tokens 에서 토큰을 발급받아오자 (🚨 token을 발급 받지 않고 사용하면 api 호출 횟수에 제한이 있다.)
git clone
echo "REACT_APP_GIHUB_API_KEY = 발급받은 token" > .env
npm install
npm start
- api 요청으로 받아온 응답 데이터를 util/sortingComments.ts 유틸 함수를 통해서 정렬
- 광고 이미지 컴포넌트 선언 : AdBanner.tsx
- IssueCardWrapper 컴포넌트에서 조건에 맞는 index 값에 따라 AdBanner 컴포넌트 노출
Screen.Recording.2023-09-14.at.18.04.58.mov
- 현재 스크롤 높이를 계산해주는 useScroll 커스텀 훅 선언
- IssueListSection에서 useEffect hook을 통해 스크롤 높이가 끝 지점인지 판단
- 끝지점일시에 page state (+1)
- api 호출 함수의 parameter에 page state 전달
- page 값을 가지고 몇 페이지의 데이터를 호출할 것인지 판단
Screen.Recording.2023-09-14.at.18.22.19.mov
- IssueListSection 데이터 로딩
- Infinite scroll 데이터 로딩
| Commit Type | Format |
|---|---|
| feat | 새로운 기능 추가 |
| bug | 버그 수정 |
| docs | 문서수정 |
| design | 사용자 UI 디자인 변경(CSS 등) |
| refactor | 코드 리팩토링 |
| chore | 빌드 업무 수정, 패키지 매니저 수정(gitignore수정 등) |
| rename | 파일 혹은 폴더명을 수정만 한 경우 |
| remove | 파일을 삭제만 한 경우 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent