Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer)

 

 

 

 

 

👆 메인페이지 구현 움짤

 

 

 

 

 

Pinterest clone Project

Winnerest 

 

 

 

 

총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서

2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다.

 

메인 페이지 

 

 

---

 

 

구현한 기능

 

 

 

• Intersection Observer 를 사용한 무한 스크롤

 

 

---

 

 

 

 

무한 스크롤을 구현하는 데 가장 일반적이고 널리 알려져 있는 건

window.addEventListener 를 이용한 스크롤 이벤트 구현 방식이다

 

하지만 이번 프로젝트는 라이브러리가 사용 가능하다는 이야기를 듣고

Intersection Observer와 axios 를 사용해 구현해보았다

 

 

 

 

 

 

페이지 설정이 로그인 창이 먼저 뜨고, 토큰이 있어야 메인 페이지를 들어갈 수 있어 거의 모든 페이지에

토큰을 확인하는 헤더가 들어가 있다 😂

 

 

토큰이 없을 시 로그인창으로 보내고 아닐 시 getItems 함수가 실행되게 했다

ref 를 걸어준 해당 요소가 보이면 inview가 true, 안 보이면 false 가 되는데, inview가 true 일시 page가 하나씩 늘어나게끔 하여 서버에서 사진을 10개씩 더 받아 오게끔 했다.

 

 

코드를 짜며 무한으로 사진을 받아오게 하는 오류가 계속 생겨

서버 열어주시는 백엔드 팀원께 매우 미안했는데 😂

 

결국 이 문제를 멘토님께 찾아가 원인을 알아냈다

useEffect의 반복과 getItems 함수에 useCallback을 써서 렌더링이 너무 많이 이루어진다는게 원인이었다

 

 

프로젝트 내내 시간이 없어 일단 기능만 돌아가도록 코드를 고쳤는데

수정을 마친 지금도 과연 괜찮은 코드인가 하는 의문이 많다

 

구현하면서 옵저버를 더욱 공부해봐야겠단 생각이 많이 들었던 페이지였다

 

 

 

 

 

👇 위너레스트 로고 ☺️