✨ 구현한 부분

• 담당한 기능에 대한 설명

  1. 메인 랜딩 api연결

     

  2. 블로그 api 추가 연결 + 페이지네이션 반영

  3. 양측 컴포넌트간 상하 간격 증가 일단 10px씩 증가

  4. 많은 페이지가 api 오류로 인해 연결은 했으나 값이 없음 → 없을 때 보여주는 ui 적용

🤔 고민한 부분

• 성능 최적화를 위해 고려한 요소

  • 당장 도입은 안했으나 페이지네이션을 리액트 쿼리를 통해 구현하려한다.

    • 깜빡임, 불필요한 요청 이슈

  • 쿼리스트링이 많습니다. 따라서, api를 Next자체 서버와 실제서버로 요청하는 Next 특성상 로직이 복잡해지고 무엇보다 필수가 아닌 쿼리스트링이 아니기에 url자체가 난잡합니다.

    

    → 향후 쿼리스트링을 한번에 처리하거나 분기처리하는 util 함수를 제작하겠습니다.

• 확장성을 위한 고려사항

• 보안, UX 등 비기능적 요구사항에 대한 고민

  • 게시물이 보이지 않는경우 : 게시물이 없는 경우가 아닌 오류로 인해 null값이 올 때,
    1. 사용자를 다른 페이지나 조치를 취할 수 있도록 돕는 ui
       1. 다른 기능 사용 불가, 해당 기능에 대한 확실한 흐름
    2. ~존재하지 않음 이라는 ui를 보여주기
       1. 다른 기능 사용 가능, 뭔가 계속 불편함

☄️ 트러블 슈팅 및 해결 방법

• 오류 사항

1. 메인 페이지 인기게시물 : 토큰 없이도 요청되는지 여부가 궁금하구, 에러코드

   

2. 메인 페이지 추천게시물 : 에러 코드

   

3. 블로그 추천 게시물 요청, 블로그 팔로잉 게시물 요청 : 에러 코드 동일

   

메인 랜딩 에러(프론트)

• 오류 내용은 서버에서 렌더링한 UI랑 클라이언트에서 렌더링한 UI가 일치하지않아 발생한다고 한다.

  • 자세한 에러발생 위치를 명시하거나 특정 태그, 함수를 지칭하기보단 저 메세지만 나와 서버와 클라이언트가 다르게 렌더링 되는 경우를 찾아봐야 했다.

• 컴포넌트 별 주석처리를 하면 확인한 결과 랭킹과 하단 푸터에서 에러가 발생하는걸 알 수 있었다.

  

  • 모의투자 랭킹을 Link를 적용시키는 과정에서 발생했다.

  • 결론은 Link태그가 이중 적용되어 실제로 hydrate하는 경우에 a태그가 중첩이되어 문제가 생긴듯

    <div className="flex flex-col w-full gap-y-1">
      <div className="flex w-full justify-between">
        <p className="text-base">{ranker.title}</p>
        <Link
          className="text-xs text-gray-1 flex gap-x-1 items-center"
          href="/blog"
        >
          {MAIN_LEFT_ETC[1]}
          <Icons name={mainRightArrow} className="pb-0.5" />
        </Link>
      </div>
      <p className="text-xs text-gray-1 font-semibold">
        총 수익 : {ranker.profit}원
      </p>
    </div>
    //Link를 div태그로 바꿈