이커머스 플랫폼를 구현한 프로젝트
2024.01 - 2024.03
상세 설명
•
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 설정을 통해 요청이 백그라운드에서 실행되도록 보장
배운점
•
이미지 최적화를 위해 압축 후 상품을 업로드한 방식 때문에, 업로드/삭제 시간이 지연되는 문제가 발생했습니다. 해결을 위해 낙관적 업데이트 기법을 도입하게 되었습니다. 이 과정에서 성능 최적화와 사용자 경험 개선을 동시에 고려하는 것이 얼마나 중요한지 깨닫게 되었습니다.
•
프로젝트를 마친 후, 실제 업로드/삭제 성공 여부를 스낵바로 비동기적으로 알려주었으면 좋았겠다는 아쉬움이 있었습니다. 앞으로는 다양한 해결책을 고민하고 적용하여 최선의 방안을 도출하기 위해 노력해야겠다는 생각이 들었습니다.