[feat] 팔로워 페이지 UI

[suwonthugger]

📌 관련 이슈번호

• Closes [feat] 팔로워 페이지 UI #3

✅ Key Changes

1. FollowerPage UI 구현 (UserProfile +FollowerList 컴포넌트로 구성 )

---

const FollowerPage = ({ userProfileData, initialFollowerData }: FollowerPageProps) => {
  // Todo: followerData 팔로우 언팔로우에 따라 csr로 상태 관리 (react-query 사용)

  return (
    <main className="flex min-h-screen flex-grow flex-col items-center bg-grey">
      <section className="mt-8">
        <UserProfile
          userName={userProfileData.userName}
          description={userProfileData.description}
          imageURL={userProfileData.imageURL}
          follower={userProfileData.follower}
          following={userProfileData.following}
        />
      </section>
      <section className="mt-16 flex gap-16">
        <FollowerList
          className="text-mid_blue"
          title="맞팔중인 사용자 수"
          number={48}
          followerInfoList={initialFollowerData}
        />
        <FollowerList
          className="text-mid_red"
          title="맞팔이 아닌 사용자 수"
          number={48}
          followerInfoList={initialFollowerData}
        />
      </section>
    </main>
  );
};

2. SSR, CSR 구분

---

• 사용자의 정보를 나타내는 UserProfile 컴포넌트의 데이터는 ssr로 데이터를 처리 ( 데이터를 처음 받아온 이후로 동적으로 바뀌지 않음 )
• 팔로워의 정보를 나타내는 UserList 컴포넌트의 데이터는 처음에는 ssr로 데이터를 처리하고 이후 데이터를 csr로 처리 (팔로우 언팔로우 기능에 따라서 데이터가 동적으로 변하기 때문)

export async function getServerSideProps() {
  // userProfileData: 서버 사이드에서 데이터를 미리 받아옴 userProfile은 동적으로 계속 바뀌지 않으므로
  // Todo: api 코드 작성 (임시로 mockData를 받아오는 코드 작성)
  const userProfileData = {
    userName: 'suwonthugger1',
    description: 'thug life',
    imageURL: 'https://avatars.githubusercontent.com/u/127329855?v=4',
    follower: 3,
    following: 4,
  };

  return {
    props: {
      userProfileData,
      initialFollowerData: mockData, // followerData" 처음에는 서버 사이드에서 FollowerData를 받아오고 이후 csr로 동작 (팔로우 언팔로우에 따라 데이터가 바뀜)
    },
  };
}

const FollowerPage = ({ userProfileData, initialFollowerData }: FollowerPageProps) => {
....

3. next에서 제공하는 Image 컴포넌트를 사용할 때 이슈가 발생

---

"react의 DOM요소에서 fetchPriority라는 속성을 찾을 수 없다. 대신 소문자인 fetchpriority 속성을 사용해라"라는 경고가 발생했다.

먼저 우리가 생성한 next page router 프로젝트에서는 기본적으로 react 18버전이다, react 18버전에서는 fetchPriority라는 속성을 제공한다고 공식 문서에 나와있다.

next js 레포에서도 image 컴포넌트에서 fetchPriority라는 속성을 사용하고 있다

돌고돌아 react 레포에 가보니 우리가 사용하는 18버전에서 이런 버그가 있었다

공식 문서에는 fetchPriority 속성을 제공한다고 나와있지만, 실제로 제공이 되지 않고 있었던 것이다.

그래서 나온 해결책은 react의 버전을 업그레이드 하는것, 또는 fetchPriority속성을 사용하지 않는 다른 image 컴포넌트를 사용하는 것이었다

next js 공식문서에 들어가보니 next/Image로 업그레이드 되기 전 컴포넌트를(next/legacy/Image) 제공하고 있었다.
해당 컴포넌트는 fetchPriority 속성 대신 자체적으로 priority라는 속성을 만들어서? 사용하는것 같다.. 그래서 해당 문제를 해결할 수 있었다.
(별 문제가 없다면 react 버전을 업그레이드 하는것도 좋은 방법일듯)

4. next에서 제공하는 Image 컴포넌트를 사용할 때 priority이슈

---

깃허브 이미지 링크를 가져와서 사용했는데, 이 이미지는 `Largest Contentful Paint (LCP)` 때문에 `priority` 속성을 사용해야한다고 한다

찾아보니 LCP는 웹 성능 측정 지표 중 하나로, 사용자가 페이지 로딩 시 가장 큰 콘텐츠 요소가 화면에 렌더링되는 데 걸리는 시간을 측정한다라고 나와있다
내가 사용한 이미지가 LCP로 next에 의해서 detecting 되었고, 화면 렌더링을 최적화 하기 위해 priority 속성을 사용하여 브라우저가 우선적으로 로드하게 하는것이다. 공식 문서에서도 LCP로 detecting 된 Image는 priority속성을 꼭 사용하라고 나와있다

4. 글로벌 스타일에 색상 추가

• 참고 UI 텍스트 색상이 2개 더 필요해서 글로벌 스타일에 추가해서 사용했습니다

📢 To Reviewers

• 수정할 부분 있으면 편하게 말씀해주세요 감사합니다!

📸 스크린샷

soomsims.mov

Reference

<!— 참고한 사이트가 있다면 링크를 공유해주세요. —>

https://mingeesuh.tistory.com/entry/Next-JS-13-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-Data-Fetching-%ED%8E%B8
https://19.react.dev/reference/react-dom/components/script#props
facebook/react#25682
https:/vercel/next.js/blob/canary/packages/next/src/client/legacy/image.tsx
https://nextjs.org/docs/pages/api-reference/components/image-legacy#priority

[se0jinYoon]

lgtm
next image관련해서 배워가기만 하네요 굿
csr과 ssr를 뷰 짤 때부터 구분해서 생각하는게 너무 좋아보여요

[se0jinYoon]

p1 ) 여기 React 사용하지 않으면 지우는 건 어떤가요 ?

[suwonthugger]

넵! 바로 반영하겠습니다!!

[se0jinYoon]

p5 ) 오 새로운 거 배워갑니다 ~ 더 알아보고 싶어서 여기저기 돌아다니다가 좋은 아티클 발견해서 공유드려요 !

NEXT.JS의 이미지 최적화는 어떻게 동작하는가

[suwonthugger]

크 저도 궁금했던 내용인데 역시는 역시입니다~~ 굿