codestates / codestates/FilmStorage
[DevLog] 김현규 / 2022-04-05
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
### 오늘은 어떻게 프로젝트에 기여했나요?
- 유저 정보 수정 API 요청 구현 (프로필, 닉네임, 휴대폰, 비밀번호)
- 서버 비밀번호 변경 라우터 추가 및 기능 구현
- 필름로그 / 마이로그 무한스크롤에 맞춰 API 요청 기능 구현
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 무한스크롤 구현 시, DOM Element로 구현했을 경우 스크롤 위치에 따라 API 요청이 계속해서 진행되는 문제가 발생
- (또한, DOM Element로 구현 시, 모바일 반응형 웹과 일반 웹에서 무한 스크롤 트리거 위치가 일치하지 않다고 한다)
```jsx
const scrollEvent = useCallback(() => {
const { innerHeight } = window;
const { scrollHeight, scrollTop } = document.documentElement;
if (Math.round(scrollTop + innerHeight) >= scrollHeight && !end) {
setPage((prev) => prev + 1);
// <<<< 특정 위치에 도달하면 page가 올라가는 방식이었으나, 특정 구간에서 너무 많이 반응해 page 번호가 계속 올라감
}
}, [page]);
useEffect(() => {
window.addEventListener("scroll", scrollEvent);
return () => {
if (end) {
window.removeEventListener("scroll", scrollEvent);
}
};
}, [scrollEvent]);
```
- 위 문제점들로 인해 기존에 외구님이 구현하셨던 `IntersectionObserver` 기능으로 다시 구현
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 배포 환경 테스트 **필수!!**
- [ ] 지도 API 요청 마커에서 활용할 수 있는 정보 찾아서 마커 클릭 이벤트 구현해보기
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.