728x90
Node.js로 구성된 환경에서 나는 영상을 가져오는 기능을 담당하는 api를 개발했다.
정말 그냥 http://localhost/file/test.mp4하면 아래처럼 영상을 보여주는 api다..

근데 정말 신기하게 모니터에선 잘 나오는데 꼭 모바일에서만 해당 같은 url을 열면 깨진 영상이 나왔다 (00:00~00:00)으로 아예 영상을 못불러왔다. 대체 왜그럴까?
왜 데스크톱에선 잘 불러오는데? 왜 모바일에서만???!!?
정말 이런 생각으로 약 2시간동안 서칭했다. 먼저 내가 계속 붙잡고 있던 api를 curl 날려본 결과

- Content-Type
- Accept-Ranges
- Content-Length
이렇게 되어있는데, 모바일(Chrome, Safari..등) 영상이 안나왔다. 그래서 다른 서버에 올라간 영상을 테스트로 해봤다.
왜냐면, 내가 만든 동영상 파일 보여주는 api가 깨진다면 분명 다른 api도 모바일에서 깨져야했기 때문!
그런데!
http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4
http면서 해당 위 url을 모바일에서 여니까 너무 영상이 잘 나오는 것이었다ㅎ
그래서 당장 curl 요청을 날려봤다

열어보니 뭔가 내가 개발한 api의 응답값보다 항목이 많다. x-goog 항목은 저 영상 url이 googleApi를 통해 가져오므로 관련된 항목같았다. 그러므로 prefix goog는 패스! 이렇게 비교해보니
Cache-Control : 캐시 메커니즘을 지정하기 위해 사용되는 헤더
ex:) Cache-Control : public, max-age=3600 : 초 단위로 캐시가 유효한 시간 제공
Expires
Last-Modified
ETag : Entity-Tag의 약자, 리소스를 식별하는 식별자
Date
항목이 내가 개발한 것과 달랐다..

728x90
반응형
'REACT' 카테고리의 다른 글
[React.js] BFF 패턴 (0) | 2024.02.14 |
---|---|
[React] Zustand 적용하기 #1 (0) | 2024.02.05 |
#5 [REACT.JS] 미리보기 화면 출력하기 (0) | 2023.02.16 |
[RTK Query] 1. RTK Query에 대해 알아보자 (0) | 2022.09.23 |
[React.js/TypeScript] Intersection Observer 구현해보기 (0) | 2022.09.20 |