WekitBucket

Trouble Shooting

• # 자유게시판 LCP 성능 저하

  [문제]자유게시판에서 LCP가 평균 6.9초로 측정되며 성능 저하가 발생했습니다.

  [해결]이미지 에러 처리 시 커스텀 훅을 사용해 이미지를 재호출하면서, 네트워크 요청이 두 번 발생한 것이 주요 원인이었습니다. 이미지 포맷을 AVIF, WebP로 변경해 최적화하고, 기존의 커스텀 훅을 사용한 이미지 에러 처리 방식을 Image 태그의 onError 속성으로 단순화했습니다. 이를 통해 LCP가 평균 1.9초로 단축되어 약 72%의 성능 개선을 달성했습니다.

• # 자유게시판 SSR 문제

  [문제]자유게시판 페이지를 SSR로 전환했을 때, hydration 오류가 발생하여 초기 렌더링 속도가 저하되었고, CSR로 인해 사용자 경험이 악화되었습니다.

  [해결]SSR을 통해 초기 렌더링 속도를 개선하는 작업을 진행했습니다. hydration 오류의 원인은 dayjs 라이브러리가 서버에서는 UTC 시간을, 클라이언트에서는 KST 시간을 사용하여 서버와 클라이언트 간 시간 불일치가 발생한 것이었습니다. 이를 해결하기 위해 시간 포맷팅 로직을 커스텀 훅으로 분리하고, 서버와 클라이언트 간 시간을 통일하여 문제를 해결했습니다.

• # 컴포넌트에 register 전달 시 발생하는 에러

  [문제]로그인 페이지를 react-hook-form을 사용해 구현했는데, 입력 필드를 별도 컴포넌트로 분리한 후 register를 전달할 때 에러가 발생하고 값 전달이 정상적으로 이루어지지 않는 문제가 있었습니다.

  [해결]에러 메시지에서 React.forwardRef() 사용을 권장하고 있어 이를 적용해 문제를 해결했습니다. 문제의 원인은 register가 폼 필드에 직접 연결되지 않아 참조가 끊어진 것이었습니다. React.forwardRef()를 사용함으로써 부모 컴포넌트에서 전달된 ref를 자식 컴포넌트가 직접 참조할 수 있게 되어, register가 폼 필드에 올바르게 연결되었습니다. 이로써 react-hook-form과의 연결 문제를 해결하고, 값 전달도 정상적으로 이루어졌습니다.

• # 새로고침 시 데이터 초기화 문제

  [문제]자유게시판 리스트 페이지에서 정렬, 검색, 페이지네이션 기능을 사용한 후 다른 페이지로 이동했다가 다시 돌아오거나 새로고침했을 때, 해당 기능이 적용되지 않고 초기 상태로 돌아가는 문제가 발생했습니다.

  [해결]useSearchParams를 활용하여 쿼리 문자열에 정렬, 검색, 페이지네이션 정보를 포함시킴으로써 문제를 해결했습니다. 이를 통해 서버에 GET 요청 시 해당 데이터를 쿼리 문자열로 전달하여, 페이지를 새로고침하거나 다시 방문하더라도 기존 상태가 유지되도록 수정했습니다.