Minsoo Cho

FEATURE

1. 기존 기능 개선

   ▸ 구해줘 자취템과 같이 사 공구템, 랜덤박스 구매 등 기존 기능들의 성능과 안정성을 개선했습니다. ▸ 특히 찜하기 기능의 캐싱 처리를 최적화하여 더욱 안정적인 상태 관리가 가능해졌습니다. ▸ 이미지 업로드 컴포넌트를 재사용 가능한 형태로 개선하여 코드의 재사용성과 유지보수성을 높였습니다.

2. 코드 구조화

   ▸ 컴포넌트 구조를 개선하고 API 레이어를 분리하여 더 체계적인 코드 관리가 가능해졌습니다. ▸ 기존의 복잡한 컴포넌트들을 더 작은 단위로 분리하고, 공통 로직을 custom hook으로 추출하여 코드의 가독성과 재사용성을 높였습니다. ▸ 또한 API 호출 로직을 중앙화하여 일관된 에러 처리와 로딩 상태 관리가 가능해졌습니다.

3. 성능 최적화

   ▸ 이미지 최적화를 통해 로딩 속도를 개선하고, React Query의 캐싱 전략을 재설계하여 데이터 fetching 효율성을 높였습니다. ▸ 특히 이미지 업로드 시 자동 압축 기능을 도입하여 스토리지 사용량을 줄이고, 페이지 로딩 속도를 개선했습니다. ▸ 또한 무한 스크롤과 지연 로딩을 적용하여 초기 로딩 시간을 단축하고 사용자 경험을 개선했습니다.

TECH STACK

• # Next.js
• # TypeScript
• # Supabase
• # TanStack Query
• # Zustand
• # Tailwind CSS

TROUBLE SHOOTING

• 01. 찜하기 useQuery 캐싱 오류

  문제점

  찜하기가 0인 상태로 변해도 활성화 컬러가 되어있음. 여러번 누르면 잘 되다가 갑자기 한번 더 추가되거나 오류가 발생했습니다.

  해결

  useWishStatus와 useWishCount 훅을 두가지로 분리하고, WishButton과 WishCount 컴포넌트도 분리하여 해결했습니다. 분리 후 mutation 내 캐싱처리가 중복되지 않고 잘 진행되는 것을 확인했습니다.

• 02. 이미지 업로드 컴포넌트 타입 충돌 문제

  문제점

  자취템 게시판과 공구템 게시판의 이미지 업로드 로직을 컴포넌트로 분리했으나, 각 페이지의 오류 메세지 타입이 달라 프롭스를 전달할 때 타입 충돌이 발생했습니다.

  해결

  컴포넌트에 제네릭 타입을 적용하여 각 글쓰기 페이지에서 필요한 오류 타입을 유연하게 처리할 수 있도록 수정하여 문제를 해결했습니다.