중고물품 거래 서비스

📖 프로젝트 소개

• Auction은 중고 물품을 거래해서 보다 저렴한 가격에 구매를 할 수 있는 웹 서비스입니다.
• 중고거래이기떄문에 내가 생각한 가격보다 저렴하게 구입할 수도 있습니다.
• 구매자와 판매자의 위치를 시각화해서 보여줌으로써 일정 조율이 편리해집니다.
• 물건의 시세를 알 수있게 다른 쇼핑몰의 데이터와 가격을 비교할 수 있는 기능을 제공합니다.

---

🕹️ 기술적 성취

• 백엔드 팀과 비동기적 소통 및 협업
• 기획부터 디자인까지 참여한 경험
• UI/UX 향상 및 이미지, 메모리 최적화

---

트러블 슈팅 및 기능구현 과정

-승환-

혹시 언제쯤 가능하실까요? [nextJS에 msw 적용기]

우리 어디서 볼까? [카카오 맵 api로 경로 시각화하기]

이것도 봐주라 [광고 모달창 만들기]

Sass 도입기

내가 이미지 빨리 보여줄게 [이미지 최적화하기]

눌렀어? 일단 보여줄게 [좋아요 버튼에 낙관적 업데이트 적용하기]

다른건 몰라도 메모리는 아끼자 [이벤트 버블링 적용해보기]

보기 편하게 준비했어 [프로젝트에 라이브러리없이 페이지네이션 적용해보기 그리고 성능 최적화]

스크롤만 내려 나머진 내가 할게 [프로젝트에 무한 스크롤 적용해보기]

react-portal? 써볼게요 [프로젝트에 react-portal로 모달 적용해보기]

에러? 난 그전에 방지해 [프로젝트에 테스트 적용해보기]

---

✈️ 데모

메인 페이지

게시물 페이지

회원가입 페이지

로그인 페이지

글쓰기 페이지

상세 페이지

원가 비교 페이지

모바일

메인 페이지 (Mobile)	게시물 페이지 (Mobile)

회원가입 페이지 (Mobile)	로그인 페이지 (Mobile)

글 쓰기 페이지 (Mobile)	상세 페이지 (Mobile)

원가 비교 페이지 (Mobile)

---

👍 성능 최적화

• 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
• react-hook-form을 사용하여 불필요한 리랜더링 방지 및 마운팅 속도 증가
• 불필요한 api 요청을 방지하기 위해 tanstack-query를 활용한 데이터 캐싱
• 브라우저 메모리를 최소화하기위해 이벤트 버블링 적용
• Debounce를 이용해 사용자 입력 처리 최적화

---

⚒️ 기술스택

Frontend