[ 📝 Devlog ] 이유진 / 2022-11-25

[nuuco]

- 오늘은 어떤 작업을 진행했나요?

[성능 최적화]
라이트하우스로 성능 검사 결과, gif 파일 용량이 커서 Largest Contentful Paint 지표가 6.3s 로 매우 느린 것을 확인할 수 있었습니다.
렌더링 속도를 개선하고자 gif 파일을 퀄리티 대비 압축률이 좋은 mp4로 교체하였습니다.

• gif 파일을 mp4 파일로 교체 (7.6mb -> 2.2mb : 71% 용량 감축 효과)
• video 태그로 mp4 파일 삽입 및 gif 로 동작하도록 처리
• 👉 성능 개선 결과 지표 확인하기

[기타]

• 지정해주지 않은 경로를 입력할 시 main 페이지로 이동하도록 수정
  <Route path="/*" element={<MainPage />} />

참고 자료
GIF를 쓰지 말아야하는 이유
움직이는 mp4 만들기

- 오늘 작업 내용중 어려웠던 부분이 있었나요?

• video 태그를 gif 처럼 활용할 수 있는 방법을 알게 되었습니다. 다음과 같이 사용하면 됩니다.
  <video src="gif.mp4" autoplay loop muted playsinline></video>
• 이 때 리액트에서 쓸 때는autoplay가 아닌 autoPlay로, playsinline 이 아닌 playsInline 으로 써야 에러가 안 남니다.
• video 태그를 따로 쓴 경우, background-size: cover 대신 object-fit: cover로 컨테이너에 가득 차게 만들어 줄 수 있었습니다.

- 내일은 어떤 작업을 계획하고 있나요?

• SEO 설정