Fandom-K

Trouble Shooting

• # React 환경에서 과도한 이미지 네트워크 요청 문제

  [문제]기존 React 프로젝트에서 이미지 최적화가 이루어지지 않아 로딩 시간이 지연되었습니다. 특히, 마이페이지의 Swiper에서 고해상도 이미지를 로드하는 과정에서 슬라이드 전환이 버벅이며 지연이 발생하는 문제가 있었습니다.

  [해결]Next.js로 마이그레이션하면서 next/image를 활용해 이미지 최적화를 적용했습니다. 이를 통해 이미지가 자동으로 WebP로 변환되었고, 네트워크 리소스 사용량을 기존 51.5MB → 5.6MB(약 90% 절감)로 크게 줄였습니다. 그 결과, 슬라이드 전환 속도가 개선되었으며 버벅이는 현상이 해결되었습니다.

• # useState와 fetch만으로 인한 상태 및 로직 복잡도 증가

  [문제]기존 React 프로젝트에서는 useState와 fetch만을 사용하여 상태를 관리하다 보니 불필요한 상태와 함수가 많아 가독성이 저하되었습니다. 또한, localStorage에 값을 저장하고 가져오는 로직이 과도하게 많아 유지보수가 어려웠습니다.

  [해결]API 호출 로직을 단순화하기 위해 React Query의 infinite queries를 도입하여 불필요한 다음 슬라이드 호출 로직을 제거하고 유지보수성을 개선했습니다. 또한, 상태 관리를 위해 Zustand를 적용하여 단일 store에서 모든 로직을 관리하고 불필요한 상태와 함수를 줄였습니다. 추가로, Persist 미들웨어를 활용해 store와 localStorage를 연동하여 중복된 localStorage 접근 로직을 제거했습니다. 그 결과, 상태 관리 코드의 LOC(Line of Code)를 약 30% 감소시켜 로직 복잡성을 줄이고 가독성을 향상시켰습니다.

• # Swiper를 통해 API 데이터 동적 로딩 문제

  [문제]아이돌 리스트를 슬라이드 형식으로 구현해야 하는 요구사항이 있었습니다. 초기 데이터는 정상적으로 렌더링되었지만, 슬라이드 이동 또는 다음 버튼 클릭 시 새로운 데이터를 동적으로 가져와야 하는 문제가 발생했습니다.

  [해결]모든 데이터를 한 번에 불러오면 불필요한 데이터를 로드하게 되므로, swiper의 기능을 활용하여 문제를 해결했습니다. swiper의 onSlideChange 옵션을 사용해 슬라이드가 변경될 때마다 필요한 데이터를 API로부터 가져오도록 수정했습니다. 좌우 이동 버튼도 swiper의 navigation 옵션과 연결해 슬라이드 변경 시 데이터 로딩을 트리거하도록 구현했습니다.

• # 반응형 디자인에 따른 아이템 개수 변경 문제

  [문제]아이돌 리스트가 2차원 배열 형식으로 되어 있었는데, 화면 크기에 따라 한 화면에 렌더링되는 아이템의 개수가 달라져야 하는 상황에서, 이를 효율적으로 처리해야 하는 문제가 발생했습니다.

  [해결]1차원 배열로 데이터를 평탄화한 후, 반응형 조건에 맞춰 다시 2차원 배열로 변환하는 방식으로 문제를 해결했습니다. 먼저 배열을 평탄화한 후, 현재 화면에 렌더링되어야 하는 아이템의 개수에 맞춰 페이지를 계산하고, 데이터를 페이지별로 다시 나누어 렌더링했습니다. 이를 통해 반응형 디자인에서도 아이템 개수가 유동적으로 변하도록 구현했습니다.