Skip to content

Latest commit

 

History

History
195 lines (134 loc) · 11.9 KB

README.md

File metadata and controls

195 lines (134 loc) · 11.9 KB
Raw

logo

유튜브를 내맘대로 <Tuning!>

👉 튜닝 사용해보기

👉 노션링크

👉 소개영상


프로젝트 소개


- ### 📆 프로젝트 기간

2022.8.29 ~ 2022.10.07(6주)

  • 📢 프로젝트 개요

    내가 좋아하는 유튜브 영상들로 나만의 컬렉션을 만들고 사람들과 공유하는 커뮤니티 웹앱

    - 보던 영상은 이제 질리고 새로운 영상이 보고싶을때가 있지 않으신가요?

- 친구들한테 유튜브 영상을  추천해달라고 한적 있지 않으신가요??

- 또 내가 좋아하는 유투버를 친구들과 공유하면서 이야기를 나눈적 있지  않으신가요??

  이 세 개 중에 하나라도 공감하신 다면 지금 당장 tuning 하세요!
  나만의 영상컬렉션을 만들어 사람들과 공유하고, 다른 사람들의 컬렉션을 통해 재미있는 영상을 추천받으면
  유튜브 더욱 풍요롭게 즐길 수 있을거 같다는 니즈에 의해 기획하게 되었습니다.

  • 📲 서비스 주요 기능

    페이지 구성 및 디자인

    페이지 이미지


      - 구글로그인: 유튜브 계정과의 연동을 위해 구글 로그인만을 사용합니다.

  - 메인페이지: 서비스에서 추천하는 다양한 튜닝들을 모아서 보여줍니다. 인기있는 튜닝, 검색창, 관심있는 카테고리, 바로 지금 추천하는 튜닝으로 이루어져 있습니다.

  - 검색페이지 : 유저들이 만든 튜닝들을 검색할 수 있고, 인기검색어를 통해 다양한 검색어를 접할 수 있습니다.

  - 튜닝 생성페이지 : 유튜브 영상들을 검색하여 내가 소개하고 싶은 튜닝을 (컬렉션을) 만들 수 있습니다. 튜닝에 넣을 영상을 검색하여 추가할 수 있습니다. 영상검색은 유튜브에서 실제 검색되는 영상의 리스트와 동일합니다.

  - 마이페이지 : 로그인 한 사용자를 중심으로 모아둔 다양한 성격의 튜닝들을 보여줍니다.<likes, comments, saves>를 통해  내 튜닝의 인기척도를 알 수 있으며, 내가 만든 튜닝, 좋아요한 튜닝, 담은 튜닝들을 모아볼 수 있습니다.

  - 튜닝 상세보기페이지 : 컬렉션 각각의 정보를 열람하고, 영상을 플레이해볼 수 있습니다. 유튜브영상을 플레이할 뿐만 아니라, 영상의 리스트를 확인, 수정하고, 댓글을 달 수 있습니다. 컬렉션이 맘에든다면 카카오톡 공유하기 기능을 통해 지인들에게 소개할 수도 있습니다.

프로젝트 아키텍처


architecture


사용기술


  React Styled Components Testing-Library PWA              

트러블슈팅

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)
> 유저테스트 초기에 이미지 로딩속도가 느리다는 피드백을 많이 받게됨. > 이미지의 경우 아래 사진과 같이 이미지가 깨져서 들어오게되는 상황 > 데스크탑에서는 무리없이 작동됐으나, 모바일 환경에서 특히 느려짐.\*\*

핵심문제 정의

  1. 라이트하우스의 진단결과 이미지 크기가 크며, 사용하지 않는 자바스크립트 코드가 많다는 진단을 받음. —> 주로보여지는 유튜브 썸네일의 경우, 유튜브 자체 썸네일로 크기조절이 어려운 상황. —> 한번에 이미지를 갖고 오는 양을 줄여야 함.
  2. 컴포넌트가 복잡하게 얽혀있어 리팩토링을 통해 렌더링이 적절한시기에 되지 않는 상황. 세개의 탭으로 나뉘어있는 마이페이지는 하나의 컴포넌트에서 모두 관리하고 있어 하나의 탭이 렌더링 될때마다 다른 탭들도 렌더링이 되고 있음. —> 한 컴포넌트에 여러개의 useEffect가 있어 마운트 속도를 지연시키고, 의존성 배열에 변화가 있을 때마다 리렌더링을 유발함.**

해결방안
성능을 올리고 이미지 로딩을 빠르게 가져올 수 있는 방법들을 실행.

  1. 이미지 lazy 속성 적용
  2. 무한스크롤 기능을 이용하여 한번에 최대 5개의 이미지만을 불러올 수 있도록 함.
  3. React.Lazy, Suspense를 사용한 코드스플리팅
  4. 탭부분을 페이지로 분리.
  5. png, jpeg파일 → webp로 전환
  6. 기본적으로 쓰이는 아이콘, 글꼴 → 서비스워커의 캐싱기능을 활용
  7. 추가적으로, 로딩중일 때에는 로딩스피너를 추가하여 이용자 이탈을 막고, 무한스크롤 시 스켈레톤 UI를 추가하여 대기체감시간을 줄임.**

해결 후 효과 (TO-BE)
메인페이지 기준: 라이트하우스 성능점수 37점 —> 57점 증가/ 총로딩시간 32ms →22ms로 단축 (맥북에어기준) 초기의 이미지 로딩이 느리다는 피드백 감소 + 로딩중 이미지가 깨지는 현상 사라짐.**

👀리팩토링 전 전

👀리팩토링 후 후


팀원소개


이름 깃헙 주소 포지션
전민지 https://github.com/mingdolacucudas FE
최효선 https://github.com/Dopest-Hyo FE
형진하 https://github.com/jhhyung FE