Wanted Front-End Internship Mission[1]
![Octokit](https://camo.githubusercontent.com/82da0308d8d0f16458df4fa0587da5c14ba7cb68f6190fb3d69ce86c4ab97c95/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4f63746f6b69742d3030303030303f7374796c653d666f722d7468652d6261646765266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)
이름 |
버전 |
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
open 상태의 이슈 중 코멘트가 많은 순으로 정렬
- api 요청으로 받아온 응답 데이터를 util/sortingComments.ts 유틸 함수를 통해서 정렬
- 광고 이미지 컴포넌트 선언 : AdBanner.tsx
- IssueCardWrapper 컴포넌트에서 조건에 맞는 index 값에 따라 AdBanner 컴포넌트 노출
화면을 아래로 스크롤 할 시 이슈 목록 추가 로딩(Infinite scroll)
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 |
파일을 삭제만 한 경우 |