미리보기

쿠팡 Apple 제품의 Dynamic Pricing 을 추적해 최적의 구매 타이밍을 알려주는 검색 서비스

Devleop

1. 프론트엔드 개발

• 페이지제작 기여도 70%(메인, 제품상세, 검색결과, 로그인, 유저정보, 알림페이지)
• GitHub Actions를 통한 배포 자동화 (Amazon S3)
• 소셜 로그인(kakao) 기능 구현(SDK)
• 라이브러리 없이 Carousel 기능 구현
• 필터 기능 구현
• 시멘틱 태그와 aria-label 등을 이용해 웹 접근성 개선.

2. 성능 최적화

• 코드 스플리팅을 통해 번들링 사이즈 17% 줄여 초기 로딩 속도 개선
• React.memo, useCallback, useMemo 를 이용한 불필요한 리렌더링 관리

Trouble Shooting

1. Infinite Scroll

• 문제: 오래 걸리는 메인 페이지 초기 렌더링 시간(26,000ms)
• 원인: 1,000개 이상의 데이터를 가장 처음 렌더링되는 메인 페이지에서 불러오면서 생긴 초기 렌더링 시간 이슈
• 해결: Intersection Observer 와 react-query 의 useInfinitequery 를 사용해 Lazy Loading 을 구현해 26000ms > 1100ms 로 개선

2. SEO(검색 엔진 최적화)

• 문제: 구글 애널리틱스에서 어려운 유저유입 파악
• 원인: 페이지들의 title 이 모두 같아 파악하는 데 어려움 존재
• 해결: SEO 개선 및 유저 유입 파악을 위해 react-helmet 으로 페이지별 메타태그 설정 후, 구글 애널리틱스로 유저 유입 파악