[TIL] 2021/01/04 Tue - Intersection Observer API를 이용한 무한스크롤 구현, 헤더 분기 작업

 

 

 

 

 

Today I Learned

 

 

오늘은 짜잘짜잘한 작업과 큼직큼직한 작업들을 같이 처리했다.

 

 

 무한스크롤 

 

짤방 페이지에서 이미지를 여러 개 로드해야해서 무한 스크롤 기능을 넣기로 했는데,

이번에 처음으로 Intersection Observer API를 이용해서 무한 스크롤을 구현해 보았다.

 

정재남님의 유튜브 영상과 다른 분들의 코드를 많이 참고했는데,

이벤트 등록과 해제하는 작업에 대한 얘기와,

함수형 컴포넌트에서의 콜백함수를 통한 이벤트 해제 방법에 대한 내용이 기억에 남는다.

 

이전에는 lodash의 throttle과 스크롤 이벤트로 구현했었는데,

Intersection Observer API를 이용하면 불필요한 스크롤 이벤트를 발생시키지 않을 수 있어 성능 측면에서 훨씬 좋다.

 

 

 헤더 분기 작업 

 

와이어프레임 초안에는 모든 페이지에서의 헤더가 동일해서

페이지 라우트를 실행하는 파일들을 감싸고 있는 레이아웃 컴포넌트 파일에 헤더 컴포넌트를 임포트했었는데,

디자인 최종본을 보니 거의 모든 페이지에서의 헤더 구성 요소들이 달랐다.

그래서 오늘은 페이지별로 헤더에 필요한 구성 요소들을 정리하고 타입별 분기 작업을 하였다.

 

처음에는 이걸 언제 다 하지..하면서 막막해 했는데, 

노션에 테이블로 헤더가 필요한 페이지인지, 필요한 페이지라면 어떻게 구성되는지를 정리하고 보니 금방 할 수 있을 것 같다는 생각이 들었다.

 

 

반복되는 코드들은 다시 정리가 필요하다..🥲

 

사실 동일한 구성이면 타입 이름을 하나로 설정해도 됐지만,

나중에 수정되는 일이 있을 수 있을 것 같아 각 페이지 컴포넌트 이름을 별도로 설정해주었다.

 

location에는 헤더의 정 가운데 들어가는 현재 위치? 를 알려주는 텍스트를 작성해주면 되고,

children에는 해당 페이지에만 들어가는 고유한 기능을 하는 버튼 등을 넣어주는 곳이다.

 

그래서 예를 들어 커뮤니티 게시글을 작성하는 페이지에서 헤더 컴포넌트를 임포트하는 경우

해당 페이지의 최상위 DOM 엘리먼트 위치에 아래와 같이 작성해주면 된다.

 

<Header type="PostWrite" location="밈+글 작성하기">
  {children: 해당 페이지의 고유한 기능을 하는 버튼 등의 컴포넌트}
</Header>

 

 

 그 외 

 

그 외에도 CSS 등의 쫌쫌따리 작업들을 같이 했다.

구현하기 까다로운 작업을 하다가 막힐 때 같이 해주면 효율이 좋다.

 

 

 

 

---

 

항상 일주일 짜리 프로젝트만 하다가 이렇게 오래 하나의 프로젝트를 하는 게 처음이라서 그런 건지

어제는 하루 종일 집중이 잘 안 돼서 힘들었었다.

 

그래도 다행히 주변의 도움과 평소보다 일찍 잔 덕분에 오늘은 금방 멘탈을 회복할 수 있었다.

나만 그런 게 아닌지 이번 주는 다른 팀원들도 모두 힘들어 보여서 걱정이다.

 

토요일에는 프로젝트 중간 점검이 있는데 다들 잘 이겨내서 MVP 기능을 잘 마무리할 수 있었으면 좋겠다.