codestates / codestates/FilmStorage

[DevLog] 김현규 / 2022-04-05

Open
#249 0 comments 0 reactions 1 assignee Claimed by @SsankQ View on GitHub
DevLog
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.