⚡ 기능 구현코드
🔗 Github
🔗 배포 링크
🔗 커밋 메시지 컨벤션 회의록
과제를 끝내고 회고 내용
🔰 유지보수를 위해 상수 관리를 잘하자!
Infinity scroll기능에서 상수로 관리 할 수 있는게 무엇인지 더 생각해보아야 했다.- 당연히
API_URL은 상수로 관리해야 한다고 생각했는데, 다른limit, page와 같은 변수는 생각지 못했다. 최대한 유지보수가 쉽고 코드를 간결하게 할 수 있는 노력을 끊임없이 해야겠다.
export const BASE_URL = `https://jsonplaceholder.typicode.com`;
export const ERROR_MESSAGE = 'Failed to fetch data';
export const LIMIT = 10;
export const DEFAULT_PAGE = 1;🔰 Debounce와 Throttle 적용!
이벤트 핸들러가 많은 연산을 수행(이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표 로 하는 기술
Debounce
➡ 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 기술
Throttle
➡ 이벤트를 일정한 주기마다 발생하도록 하는 기술
➡ 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
- scroll event을 화면에 적용시킨다면 당연히
Debounce와Throttle를 적용해야한다는 것을 알고 있었다. - 그러나
lodash를 라이브러리를 설치해서 적용하는게 익숙해졌는지 직접 코드로 구현하려니 몇줄 안되는 코드에서 손이 멈춰버렸다..! 익숙함에 당연한 걸 잊어버린 느낌이었다..! 🙄 - 복습 겸 다시 코드를 작성해보았다.
//* decounce 함수
export const debounce = (func, delay) => {
let timeoutId = null;
// do something
return (...arg) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(func.bind(null, ...arg), delay);
};
};
//* throttle 함수
export const throttle = (func, delay) => {
let timeout = null;
return function (...args) {
if (!timeout) {
timeout = setTimeout(() => {
func.call(this, ...args);
timeout = null;
}, delay);
}
};
};- (추가)
Throttle과Debounce사용 사례- 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
- 사용자가 키보드 입력을 중지(예: 검색창) 할 때까지 ajax 이벤트를 발생시키지 않기 위해
- 페이지의 스크롤 위치를 측정하고 최대 50ms 마다 응답하기를 바랄 경우에
- 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해
🔰 Intersection Observer로 개발했다면 생각했어야 될 사항!
- 브라우저별 지원여부를 확인했어야 한다. (>can i use 이용)
- intersection observer는 IE에서 지원하지 않는다.
➡ 이런 경우polyfill을 사용해 해결했어야 했다. 생각보다 IE 사용자는 아직도 많다.
➡ > 폴리필 적용방법 벨로그 작성 완료 (Cross Browsing 하단) <
🔰 GIT에 대해서 알게된 것들
- Live Share
➡ 라이브쉐어 기능을 처음 사용해보았는데, 팀원이 어떤 부분을 어떻게 하고 있는지 바로바로 파악할 수 있으니깐 신기하고 재밌었다.
➡ VS code에서 아래 메시지와 함께 커밋하면 협업커밋으로 쌓기게 된다.
'Co-authored-by: Daeun <daeun-react@users.noreply.github.com>'-
Git Issue
➡ 새로운 추가될 가능, 개선 해야할 가능, 버그 등등 모든 것이 곧 이슈라고 볼 수 있다!
➡ 모든 활동 내역에 대해서 이슈를 등록하고 그 이슈기반으로 작업을 진행하게 됩니다. -
Commit Convention
➡ 이게feat인가...역시 애매할때는 다chore인가..? 하는 생각을 많이 했다.😨
➡ 찾아봤던 토스/배민/카카오 git 컨벤션을 자주 들여다 보고 배워야겠다.
👀 아쉬웠던 점과 해결방안
- 무한 스크롤이 제일 마지막에 왔을 때, 즉 더 이상 불러올 데이터가 없을 경우를 생각해서 불필요한 API 호출을 막았어야 했다. (인스타도 마지막으로 내려가면 사용자에게 더 이상 불러올 게 없다는 걸 알려준다)
- 10개씩 정보를 가져온다면, 가져올 데이터가 10개 보다 작을 때 그다음 호출은 없게된다는 점을 이용해 적용하면 될 것이다!
단단_프로트엔드개발자!