[✍️ Dev Log] 김우성 / 21-07-12

### 오늘은 어떻게 프로젝트에 기여했나요?

- 스터디룸 페이지 방목록 렌더링에 infinite scrolling을 적용하였습니다.
- infinite scrolling 구현 도중 발생한 에러와 버그를 핸들링 하여 안정적으로 작동하도록 구현하였습니다.
- 사소한 css 수정사항을 반영 하였습니다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- infinite scrolling시 마지막 HTML Element를 참조하여 해당 엘리먼트가 viewport에 들어온 순간 다음 페이지의 AJAX 요청을 보내는 로직을 구현하면서, 마지막 HTML Element에 ref를 걸어 줘야 하는 상황이었습니다. 문제는 HTML Element에 ref를 걸지 않고 컴포넌트(함수)에 ref를 걸어 에러가 발생하였고 이런 점을 파악하는게 상당히 오래 걸렸습니다. 결과적으로 ref를 props로 하위 컴포넌트에 내려주고 해당 HTML Element가 존재하는 div에 직접 ref를 걸어서 문제를 해결하였습니다.
- 스터디룸 페이지가 여러 컴포넌트로 구성되어 있기 때문에 infinite scrolling 로직을 분산시켜야 했습니다. 상태나 함수, props 내려주기를 어느 컴포넌트에서 어떻게 정의해야 하는지 고민이 많이 되었습니다. 커스텀 Hook을 구성하여 해결하려 하였지만 오히려 스코프가 달라 에러를 내는 상황이었기 때문에 리액트의 기본 설계 구조를 따라 상태를 최상위 컴포넌트에 위치시키고, 스코프를 고려하여 각 함수를 적절한 곳에 위치 시켰습니다.

```js
const observer = useRef();

const lastRoomElRef = useCallback(
(node) => {
if (loading) return;
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore) {
setPageNum((prevPageNum) => prevPageNum + 1);
}
});
if (node) observer.current.observe(node);
},
[loading, hasMore]
);
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] infinite scrolling 버그 해결
- [x] 마이페이지 로직 구현