이커머스 플랫폼

온라인 쇼핑몰을 구현한 프로젝트

2024.01 - 2024.03

항해99 리부트 코스에서 4주간 진행한 커머스 구현 프로젝트로, 와이어프레임과 유저플로우 설계부터 개발까지 전 과정을 직접 수행한 1인 프로젝트입니다.

React
Typescript
tailwindcss
React Query
Firebase
Figma
cypress

🧩 상세 설명

react-intersection-observer 라이브러리를 사용하여 무한 스크롤 구현

  • React Query의 useInfiniteQuery 훅을 사용해 상품 데이터 fetch

오래 걸리는 상품 삭제 작업에 대한 낙관적 업데이트(Optimistic Update) 적용

  • React Query의 useMutation 사용하여 필터링한 데이터로 쿼리 데이터 대체

Local Storage와 Context API를 사용하여 장바구니 구현

react-hook-form, zod 라이브러리를 사용하여 타입스크립트 친화적 유효성 검증

아임포트 결제 SDK를 사용한 가상 결제 기능 구현

  • 결제 페이지에서 스크립트 태그 동적 삽입

  • async 애트리뷰트 사용 → 스크립트를 불러오는 과정에서 페이지 렌더링 차단 방지

SEO 개선

  • sitemap.xml, robots.txt 작성

  • react-helmet-async 라이브러리를 사용하여 매타 태그 설정

cypress를 사용하여 e2e 테스트 코드 작성

사용자가 업로드한 사진에 대한 이미지 최적화

  • browser-image-compression 라이브러리를 사용하여 두가지 크기(상세페이지/썸네일)로 압축

  • 화면에 표시될 크기에 따라 다른 크기의 이미지를 사용하여 로드 시간 단축

동적 import, 코드 스플리팅을 통해 초기 브라우저가 다운로드하는 번들 사이즈 축소

  • Vite Bundle Analyzer를 사용하여 번들 사이즈 시각화 → 개선이 필요한 부분 확인

🛠️ 트러블 슈팅

페이지를 벗어나면 사용자의 요청이 중단되는 문제

  • fetch API에 keepalive 설정을 통해 요청이 백그라운드에서 실행되도록 보장

🌱 배운점

이미지 최적화를 위해 압축 후 상품을 업로드한 방식 때문에, 업로드/삭제 시간이 지연되는 문제가 발생했습니다. 해결을 위해 낙관적 업데이트 기법을 도입하게 되었습니다. 이 과정에서 성능 최적화와 사용자 경험 개선을 동시에 고려하는 것이 얼마나 중요한지 깨닫게 되었습니다.

프로젝트를 마친 후, 실제 업로드/삭제 성공 여부를 스낵바로 비동기적으로 알려주었으면 좋았겠다는 아쉬움이 있었습니다. 앞으로는 다양한 해결책을 고민하고 적용하여 최선의 방안을 도출하기 위해 노력해야겠다는 생각이 들었습니다.