[Dev Log] 20210927 / 박지영

### **오늘 완료한 작업 목록.**

https://user-images.githubusercontent.com/83934037/134919595-b4c067b0-56ce-49c5-881e-a12eb65cbede.mov

- [x] scrollTop 컴포넌트가 작동 안 하는 페이지 확인해봐야 함...!(상태값 확인 필요) —> 해결 완료.
- [x] 페이지 전환 시 상태값 초기로 돌아가는 것 버그 해결하기(—> 버그가 아님. 컴포넌트 랜더링 시 해당 컴포넌트 내에 있는 상태값이면 초기값으로 다시 세팅되는 것이 맞다)
- [ ] 갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.
- [x] gallery 페이지 내 좋아요 해제 응답 확인 —> 확인 완료! 좋아요 표시 및 카운팅 즉시 랜더도 확인 완료-
- [ ] 랜더링 페이지 애니메이션 적합한 것 서칭
- [x] 댓글 무한스크롤 기능 시작하기. 스크롤 이벤트 에러가 있어 일단 보류. 내일 다시 시도 예정...(참고: [https://velog.io/@hyounglee/TIL-56,](https://velog.io/@hyounglee/TIL-56) [https://velog.io/@jerrrry/React-Infinite-Scroll-무한-스크롤](https://velog.io/@jerrrry/React-Infinite-Scroll-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4))
- [x] API 요청 및 응답 다시 더블체크. 버그 있는지 확인하기 —> 확인 완료.

--
<기억하고 싶은 코드>

- 로컬 스토리지를 사용하여 리액트의 상태를 저장하는 방법: [https://www.daleseo.com/react-hooks-use-web-storage/](https://www.daleseo.com/react-hooks-use-web-storage/)
- 리액트 라우터 돔의 서브라우팅 방법: [https://velopert.com/2937](https://velopert.com/2937)
- 리액트에서 mount와 render의 차이: [https://ideveloper2.tistory.com/97](https://ideveloper2.tistory.com/97)
- 페이지가 전환될 때 render가 아니라 mount 된다는 것을 알았다. 따라서 useState값들이 모두 초기화 되고 useEffect(()⇒ {}, []) 함수도 페이지 전환이 될 때마다 호출되는 것이 문제. 그런데 픽미업때는 왜 페이지가 전환될 때 useEffect가 호출이 안 되고 useState의 초기값도 유지되었었는지 차이점을 모르겠다.(혹시 app.js 전역에서 상태값이 관리되고 있어서일까??? —> 그런 것이었음......!!!!!!!!!! app.js 전역 컴포넌트는 앱이 mount 되는 시점이 앱을 새로고침 하는 시점이기 때문...)
- 그럼 '**상세페이지(/galleryDetail, /reviewDetail)에서 돌아갈 때만**' 앱 마운트를 방지하고 싶은데(상태값 보존을 위해)... 그건 방법이 없을까???
- Tip: useEffect에서 componentDidUpdate만 사용하고 싶을 경우

```jsx
const mounted = useRef(false);
useEffect(() => {
if (!mounted.current) { // componentDidMount 실행 X
mounted.current = true;
} else {
// componentDidupdate 로직
// (...)
}
}, [바뀌는 값]};
```

### 추후 완료해야 할 **작업 목록(+에러).**

- [ ] 이미지 카드 슬라이더 제작 완료. 다만 코드가 맘에 들지 않는다. 코드 리팩토링 필요.
- [ ] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)
- [ ] 작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다.
- [ ] three.js pointerlock 참고하여 키보드 작동 구현해보기.(or 작품 확대 가능하면 굳이 키보드 작동 안 해도 되긴 하지만...)
- [ ] 스크롤 감지하여 상단 노출/비노출 처리 이벤트 리팩토링 하기(참고: [https://code-study.tistory.com/23](https://code-study.tistory.com/23))
- [ ] 댓글 포스팅 시간 한국시간으로 바꾸기
- [ ] context api 사용법 학습하고 코드리팩토링
- [ ] 갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.

### **내일 TO DO LIST**

- [ ] 댓글 무한스크롤 기능 구현하기
- [ ] 전시 상세페이지에서 3d 데모 확인하는 인입 버튼 만들고 페이지 연결(새탭열기로...)(참고: [http://lucablaq.com/wp/2021/01/12/react-링크-새-창에서-열기시-주의사항/](http://lucablaq.com/wp/2021/01/12/react-%EB%A7%81%ED%81%AC-%EC%83%88-%EC%B0%BD%EC%97%90%EC%84%9C-%EC%97%B4%EA%B8%B0%EC%8B%9C-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD/))
- [ ] 단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기
- [ ] 단일작품 확대 컴포넌트에서 작품 height가 높은 case까지 커버해야 함. 확인 필요(100vh를 고정으로 두면 안 됨)