데브코스 최종 프로젝트 - 20~21일차 / 무한스크롤, 카카오 공유, SSR

 

 

20~21일차

 

무한스크롤 구현

 

아주 예전에 한번 구현해보고 기억이 가물가물 하던 차에 이번 프로젝트에 다시 한번 구현을 해봤는데

조금 까다로웠던 부분들이 있었다.

 

1. 단순 페이지 진입 시 나열되는 것이 아니라 검색 필터를 변경하면 검색 필터에 맞게 리스트가 초기화 되고

초기화 될 때마다 page도 0으로 처리해주어야 하는 점.

 

2. 검색 필터 부분을 다른 팀원이이 작업을 해둔 상태였고 그 코드에 무한스크롤을 적절히 합쳐야 하는데

이 과정에서 남의 코드 읽고 완전히 이해 해야 가능하다는 것을 알게 되었다..

애초에 한사람이 작업했다면 좀 더 빨랐을 것 같기도 한데 그래도 좋은 경험이었다.

 

 

✅ 해결 과정

 

나는 코스 리스트의 가장 마지막 item을 관찰 대상으로 두었다.

그리고 스크롤을 내려 "관찰 대상"을 만났을 때 page state가 +1이 되고

그 state를 가지고 서버 요청을 하기를 원했다.

체크해야 할 사항
- 검색쿼리가 변경되면 page는 0으로 초기화가 된다.
- 검색쿼리가 변경될 때마다 검색 필터에 맞는 데이터를 요청해야한다.

- 쿼리가 변경되면 page는 0으로 초기화가 된다.

- 페이지 state가 변경될 때마다 기존 검색 쿼리와 page 번호로 API 요청을 하고

기존의 코스데이터에서 새로운 데이터를 쌓아주어야 한다.

- 데이터의 응답값으로 isLast가 true라면 새로운 페이지 요청을 그만한다.

 

여기서 검색 쿼리는 state로 관리하고 있었고

setState가 비동기기 때문에 쿼리 변경 시 바로 감지를 해야해서 useEffect를 사용하고 있었다.

  useEffect(() => {
    replaceRoute();
    getCoursesByQuery();
    setIsLast(false);
    setPage(0);
  }, [queries]);

  useEffect(() => {
    if (page !== 0) {
      getCourseList({ page });
    }
  }, [page]);

페이지 진입 시 바로 queries가 URL에 추가되도록 구현이 되어있어서

하나의 useEffect에 연결 시킬 순 없었고,  page가 변경되는 것을 감지하도록 useEffect를 따로 구현했다.

 

 

그리고 관찰 대상인 마지막 item을 지정하기 위해

coursePage -> courseList-> courseItem 과 같이 중첩으로 들어가서 ref를 전달해야 했는데

이부분이 좀 까다로웠다. + Typescript..  너어..

 

const CourseItem = forwardRef(({ course, grid = 3, index }: CourseItemProps, ref) => {
  //...

 return (
    <ItemContainer grid={grid} ref={ref as LegacyRef<HTMLLIElement>}>
    /* 생략 */
  );
});

일단 이렇게 처리하기는 했는데 적절한 방법이 맞는지는 잘 모르겠다.

 

기능은 제대로 동작하지만 나머지 코드들은 좀 더 개선할 수 있을 듯 하여

이후에 리팩토링 시간 때 개선해 볼 예정이다.

 

 

카카오 공유하기

카카오 공유하기 기능은 아주 예전에 사용을 해본듯한 기억이 났는데

Next.js 환경이다보니 조금은 다를 듯 하여 관련 내용들을 검색해봤다.

사용법이 너무 다양하게 되어있었고,,  (블로그)

업데이트가 된 건지 약간씩 코드가 달라서 공식문서랑 조합해서 구현을 했다.

 

 

 

상세페이지 SSR 처리

일단 CSR로만 구현을 해놓고 이후에 시간이 되면 SSR로 구현을 하기로 했고,, 이제는 때가 왔다..

 

상세페이지에서는 "로그인한 유저가 볼 수 있는 데이터"와 "로그인하지 않은 유저가 볼 수 있는 데이터"가 구분되어 있다.

내가 이때 당시 CSR로 구현했던 로직이 페이지에 접근하자마자 로그인 여부를 감지하지 않고

조금이라도 먼저 데이터를 보여주기 위해 인증되지 않은 유저의 데이터를 먼저 불러온 후

로그인을 했다는 것을 감지했을 때 새로운 로그인 유저의 데이터를 받아오는 형식으로 구현했다.

 

인증되지 않은 유저 = 코스 정보에 대한 API를 받는다.

인증된 유저 = 코스에 대한 정보와 현재 코스를 현재 유저가  좋아요, 북마크를 했는지 isLiked, isBookmarked값을 추가로 받는다.

 

인증 관련된 키워드 때문에 조금 고민을 했었는데 가볍게 생각해보니 그냥 SSR로 먼저 인증되지 않은 유저의

데이터를 먼저 받고 클라이언트에서 현재 유저가 로그인했는지 체크가 되면 그 때 인증된 데이터를 받는 형태로

구현하면 될 듯 했다.

 

적용은 간단하게 되었고 검색 엔진을 위한 HTML에는 내용이 차있었지만,

SSR로 적용한 페이지에 진입할 때 조금 느리다고 느껴졌다.  이 부분을 개선할 방법에 대해 조금 더 생각해봐야겠다.