👉 튜닝 사용해보기
👉 노션링크
👉 소개영상
- ### 📆 프로젝트 기간
2022.8.29 ~ 2022.10.07(6주)
-
내가 좋아하는 유튜브 영상들로 나만의 컬렉션을 만들고 사람들과 공유하는 커뮤니티 웹앱
- 보던 영상은 이제 질리고 새로운 영상이 보고싶을때가 있지 않으신가요? - 친구들한테 유튜브 영상을 추천해달라고 한적 있지 않으신가요?? - 또 내가 좋아하는 유투버를 친구들과 공유하면서 이야기를 나눈적 있지 않으신가요?? 이 세 개 중에 하나라도 공감하신 다면 지금 당장 tuning 하세요! 나만의 영상컬렉션을 만들어 사람들과 공유하고, 다른 사람들의 컬렉션을 통해 재미있는 영상을 추천받으면 유튜브 더욱 풍요롭게 즐길 수 있을거 같다는 니즈에 의해 기획하게 되었습니다.
-
페이지 구성 및 디자인
- 구글로그인: 유튜브 계정과의 연동을 위해 구글 로그인만을 사용합니다. - 메인페이지: 서비스에서 추천하는 다양한 튜닝들을 모아서 보여줍니다. 인기있는 튜닝, 검색창, 관심있는 카테고리, 바로 지금 추천하는 튜닝으로 이루어져 있습니다. - 검색페이지 : 유저들이 만든 튜닝들을 검색할 수 있고, 인기검색어를 통해 다양한 검색어를 접할 수 있습니다. - 튜닝 생성페이지 : 유튜브 영상들을 검색하여 내가 소개하고 싶은 튜닝을 (컬렉션을) 만들 수 있습니다. 튜닝에 넣을 영상을 검색하여 추가할 수 있습니다. 영상검색은 유튜브에서 실제 검색되는 영상의 리스트와 동일합니다. - 마이페이지 : 로그인 한 사용자를 중심으로 모아둔 다양한 성격의 튜닝들을 보여줍니다.<likes, comments, saves>를 통해 내 튜닝의 인기척도를 알 수 있으며, 내가 만든 튜닝, 좋아요한 튜닝, 담은 튜닝들을 모아볼 수 있습니다. - 튜닝 상세보기페이지 : 컬렉션 각각의 정보를 열람하고, 영상을 플레이해볼 수 있습니다. 유튜브영상을 플레이할 뿐만 아니라, 영상의 리스트를 확인, 수정하고, 댓글을 달 수 있습니다. 컬렉션이 맘에든다면 카카오톡 공유하기 기능을 통해 지인들에게 소개할 수도 있습니다.
1. (캐싱전략) 배포시 캐싱 문제 해결
> 문제상황 (AS-IS)
배포시에 변경된 사항들이 실시간으로 업데이트 되지 못하고, 배포후 강력 새로고침을 해야 변경사항들이 반영됨. → 피드백을 반영하여 수정하여도 유저들에게 변경된 사항을 바로 보여줄수 없음.** >
핵심문제 정의
기존의 데이터가 계속 존재하는 상황. 프론트쪽에서 캐싱이 되고 있는 곳은 총 두 곳:CloudFront와Service worker에서 캐싱되고 있음을 인지 → 네트워크 탭을 통해 확인 해보니 service worker에서 캐싱된 데이터가 들어오고 있음을 확인.
+ service worker를 register()에서 unregister()로 전환하면 변경사항이 반영되기 시작하는 것을 확인
”서비스워커가 index.html을 캐싱하지 못하도록 해야함”
해결방안
service-woker 내의 cache storage api**를 사용하여 캐싱을 커스텀 하거나 workbox를 통해 서비스워커를 조작하는 방법이 존재. workbox는 **Cache First, Network First, Network Only, Cache Only등으로 캐싱전략이 나눠져 있으며, 원하는 파일들을 선택하여 캐싱설정이 가능 → workbox를 통해 필수로 사용하는 icon, webp, otf형식의 파일들만 캐싱되도록 설정.**
해결 후 효과 (TO-BE)
필요한 파일들만 캐싱함으로써 로딩속도는 캐싱 전보다 높이고, 업데이트된 사항은 바로바로 업데이트 될 수 있도록 함.**
2. 최적화와 리팩토링을 통한 속도 개선
> 문제상황 (AS-IS)
> 유저테스트 초기에 이미지 로딩속도가 느리다는 피드백을 많이 받게됨. > 이미지의 경우 아래 사진과 같이 이미지가 깨져서 들어오게되는 상황 > 데스크탑에서는 무리없이 작동됐으나, 모바일 환경에서 특히 느려짐.\*\*
핵심문제 정의
- 라이트하우스의 진단결과 이미지 크기가 크며, 사용하지 않는 자바스크립트 코드가 많다는 진단을 받음. —> 주로보여지는 유튜브 썸네일의 경우, 유튜브 자체 썸네일로 크기조절이 어려운 상황. —> 한번에 이미지를 갖고 오는 양을 줄여야 함.
- 컴포넌트가 복잡하게 얽혀있어 리팩토링을 통해 렌더링이 적절한시기에 되지 않는 상황. 세개의 탭으로 나뉘어있는 마이페이지는 하나의 컴포넌트에서 모두 관리하고 있어 하나의 탭이 렌더링 될때마다 다른 탭들도 렌더링이 되고 있음.
—> 한 컴포넌트에 여러개의 useEffect가 있어 마운트 속도를 지연시키고, 의존성 배열에 변화가 있을 때마다 리렌더링을 유발함.**
해결방안
성능을 올리고 이미지 로딩을 빠르게 가져올 수 있는 방법들을 실행.
- 이미지 lazy 속성 적용
- 무한스크롤 기능을 이용하여 한번에 최대 5개의 이미지만을 불러올 수 있도록 함.
- React.Lazy, Suspense를 사용한 코드스플리팅
- 탭부분을 페이지로 분리.
- png, jpeg파일 → webp로 전환
- 기본적으로 쓰이는 아이콘, 글꼴 → 서비스워커의 캐싱기능을 활용
- 추가적으로, 로딩중일 때에는 로딩스피너를 추가하여 이용자 이탈을 막고, 무한스크롤 시 스켈레톤 UI를 추가하여 대기체감시간을 줄임.**
해결 후 효과 (TO-BE)
메인페이지 기준: 라이트하우스 성능점수 37점 —> 57점 증가/ 총로딩시간 32ms →22ms로 단축 (맥북에어기준) 초기의 이미지 로딩이 느리다는 피드백 감소 + 로딩중 이미지가 깨지는 현상 사라짐.**
👀리팩토링 전
👀리팩토링 후
| 이름 | 깃헙 주소 | 포지션 | |
|---|---|---|---|
 |
전민지 | https://github.com/mingdolacucudas | FE |
 |
최효선 | https://github.com/Dopest-Hyo | FE |
 |
형진하 | https://github.com/jhhyung | FE |