리팩터링 4주차 안건

[punchdrunkard]

.

[punchdrunkard]

메모) useSWR의 캐시 문제 (윤정님이 언급해주신 이슈)

[gitul0515]

swr을 통해 방법을 찾아보고, 안 되면 useEffect로 돌리기

[punchdrunkard]

기홍님 슬랙 답변

@gitul0515

다은님, 커뮤니티 페이지에서 좋아요 버그의 원인을 찾은 것 같습니다. 🐛

설명해보겠습니다.
이미 알고 계시겠지만,
SWR은 캐시된 데이터를 먼저 가져온 뒤,
서버에서 데이터의 업데이트를 확인하고,
업데이트가 발생했다면 최신 데이터를 가져옵니다.
로그를 찍어보면 이것은 정상적으로 이루어지고 있습니다.

첫 번째 ReviewFeed에 좋아요를 누른 뒤,
페이지를 나갔다가 다시 들어왔다고 가정해봅시다.

빨간색은 캐시된 데이터이고, 파란색은 최신 데이터입니다.

9:36
빨간색에서는 isLiked가 false입니다. 예전 데이터입니다.
파란색에서는 isLiked가 true입니다. 최신 데이터입니다.

그렇다면 왜 해당 ReviewFeed에는 반영되지 않았을까요?
추측하건대, props로 전달되는 feed가 객체이기 때문입니다.
객체의 속성(isLiked, likeCount)는 변경되었으나,
객체의 참조값은 변경되지 않았으므로,
해당 ReviewFeed는 리렌더링이 되지 않은 것으로 추측합니다.

혹은 reviewId가 달라지지 않았기 때문일 수도 있겠군요.
map을 사용해서 key={reviewId}를 넣어주고 있는데
reviewId는 그대로이므로, 리렌더링이 발생하지 않았다는 생각도 드네요.

// CommunityPage.tsx
          {feeds.map((feed) => {
            const { reviewId, user } = feed;
            return (
              <ReviewFeed
                key={reviewId}
                feed={feed}
                isMyFeed={userId === user.userId}
                onDeleteButtonClick={handleDeleteButtonClick}
              />
            );
          })}

해결 방안은 아래와 같습니다.

useEffect를 사용하여 isLiked, likeCount의 변화를 관찰하여
최신화된 데이터를 직접 반영해주면 됩니다.
그러면 뒤로가기 후, 다시 들어올 때
데이터의 변경 사항이 제대로 반영되는 것을 확인했습니다.

새로고침 시에도, 물론 반영됩니다.

[gitul0515]

맞춤 전시회에 처음 진입할 때에는 10개의 카드가 보이고,
페이지네이션을 넘기면 8개가 되는 것 같습니다.

[gitul0515]

8개로 통일하기

[gitul0515]

그리드 적용 (나중에)

[gitul0515]

로그인, 회원가입 버튼에 디바운스를 적용해도 될까요?
버튼 연타로 발생하는 문제를 방지하려고 합니다.

[gitul0515]

디바운스 적용 땅땅

[gitul0515]

커뮤니티 페이지에서 무한 스크롤이 동작하지 않고 있는데,
이것이 SWR로 인한 문제인가요?

[punchdrunkard]

앗 제 쪽에서는 정상적으로 작동하네요...?

[gitul0515]

현재 배포에서는 첫 20개만 나오는 것 같아요 :)

[gitul0515]

intersectionObserver로 수정 예정. 다시 확인해주기

[gitul0515]

리팩토링 회의 마지막 날짜

[gitul0515]

계속~

[gitul0515]

ㅎㅎ

[gitul0515]

스켈레톤 추가 여부 (우선순위 낮음)

[gitul0515]

짬이 되면 적용해보기

[punchdrunkard]

Optimize Cumulative Layout Shift (CLS)

[gitul0515]

배포 버전 추가

[gitul0515]

dev.artzip.shop를 등록해보고, 백엔드분께 CORS 허용을 요청

[gitul0515]

컴포넌트 테스트

[gitul0515]

develop 브랜치를 main 브랜치에 머지 후, 윤정님께 고지
release 업데이트