네이버, 카카오, 카카오 페이지 웹툰을 검색할 수 있는 애플리케이션입니다.
배포주소 : https://main--soft-pixie-1e7120.netlify.app/
첫 api 요청 시 시간이 오래 걸릴 수 있습니다.
- react
- typeScript
- styled-components
- mobx
다른 요일 클릭 시 해당 요일의 웹툰으로 렌더링
스크린샷 2022年04月23日 오전 9 43 27
웹툰 검색 시
스크린샷 2022年04月23日 오전 9 59 30
검색한 웹툰 클릭 시 자동으로 플랫폼, 요일 변경 및 해당 웹툰으로 필터링 적용
스크린샷 2022年04月23日 오전 9 59 55
검색 데이터가 없다면
스크린샷 2022年04月23日 오전 10 05 20
웹툰에 1초간 마우스 호버 시 상세 정보 표시
스크린샷 2022年04月23日 오전 10 12 30
웹툰의 상태에 해당하는 정보는 붉게 표시
up : 업로드 된 상태 , 19 : 성인 콘텐츠, new : 신작, rest : 휴재
스크린샷 2022年04月23日 오전 10 14 35
Run 아이콘 클릭 시 해당 웹툰 링크로 이동
-
데이터 캐싱
한번 요청한 데이터는 재요청하지 않고 캐싱해서 사용.
-
디바운스( 검색 바에만 )
과도한 api요청을 막기위해 0.5초로 디바운스 적용.
-
스켈레톤 UI
의미없는 스피너보다 로딩 후 그려지는 데이터의 모습과 유사하게 만들기 위해 사용하고, 약간의 재미를 위해 애니메이션을 추가.
브라우저의 지원 유무에 따라 woff2 => woff => ttf 순으로 폰트를 적용.
3초 전에 다운로드가 되면 폰트를 교체하고 그렇지 않으면 기본 폰트로 유지하고 캐시하기 위해 fallback 사용.
woff2는 가장 먼저 불러올 수 있도록 preload를 적용.
네트워크 요청 시 가장 먼저 woff2에 대한 요청이 이루어지는것을 확인.
브라우저의 지원 유무에 따라 webp를 적용하고 그렇지 않으면 기존 포멧을 이용한다.
요청한 데이터에서 jpeg로 제공되는 이미지를 캔버스를 이용해 webp 형식으로 바꾸고 용량을 0.1배로 줄였다.
| 원본 | webp |
|---|---|
| 스크린샷 2022年05月02日 오후 4 17 59 | 스크린샷 2022年05月02日 오후 4 18 19 |
31.5kb에서 3.7kb으로 압축 적용 확인.
-
마우스 Hover 시 컴포넌트가 마운트 되도록 코드 스플리트 적용
스크린샷 2022年05月02日 오후 3 45 57마우스가 hover 된 후 CardHoverView 컴포넌트가 로드되는 것을 확인
스크린샷 2022年05月02日 오후 5 13 58CardHoverView 컴포넌트가 잘 분리된 것을 확인할 수 있다.
-
intersection observer 을 이용한 무한 스크롤
- jpeg와 webp의 로딩 속도 비교를 위해 네트워크 throttling을 적용했을 때 ( 8Mbit/s로 )
원본 webp 스크린샷 2022年05月02日 오후 4 17 59 스크린샷 2022年05月02日 오후 4 18 19 webp로 변환한 이미지의 로딩 속도가 더 빠른것을 확인할 수 있다.
-
정상적인 네트워크 환경일 경우
-
lodash
전 후 스크린샷 2022年04月30日 오후 9 59 48 스크린샷 2022年04月30日 오후 10 09 02 debounce만 이용하는 것에 비해 너무 많은 크기를 차지하고 있는 것을 확인했다. 라이브러리 전체가 아니라 핵심 메서드만 담겨있는 파일을 사용하도록 용량을 축소했다.
-
react-icons
전 후 스크린샷 2022年04月30日 오후 9 15 14 스크린샷 2022年05月02日 오후 5 21 37 React-icons도 마찬가지로 매우 큰 용량을 차지하는 것을 확인했고 사용하는 아이콘에 해당하는 용량만 차지하는 것으로 최적화했다.
피그마 초기 목업 : https://www.figma.com/file/vpxi6KExQEVK2W6sPohaiC/Untitled?node-id=0%3A1
