잡다한 개발 블로그

JS에서, 특히 JSX에서 배열이 유효할 때에만 실행/노출시키기 위한 방법으로 흔히 아래와 같은 optional chaining을 사용한다. (array?.length > 0) && /*...*/ 같은 코드를 TS에서도 사용했더니, 객체가 undefined 일 수 있다는 에러를 띄웠다. array에 대한 undefined 는 optional chaining으로 검사하고 있어 무슨 소리인지 바로 이해할 수 없었다. 결론은 optional chaining으로 인해서 array가 undefined 일 때, array?.length 가 undefined 로 처리되기 때문에, undefined > 0 부분에서 비교할 수 없어서 에러를 띄운 것이다. 참고 Object is possibly 'undefined' Er..

문제 상황 IE 10에서 video tag를 사용하여 동영상을 노출 시켰을 때, Invalid Source 라고 노출되며 재생 불가 해당 비디오는 서버에서 MIME type "application/octet-stream" 으로 내려주고 있었음 MIME type: application/octet-stream 이란 application/octet-stream 는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다. 출처: MDN - MIME 타입의 전체 목록 해결 방안 서버에서 비디오의 MIME type을 video/mp4로 반환하도록 변경. 참고 링크 HTM..

이 글은 Microsoft의 Introducing Web APIs for Dual Screen and Foldable Devices 포스트 내용을 번역, 요약하였습니다. 9월 10일 출시된 Surface Duo를 포함하여, 요즘엔 다양하고 새로운 듀얼 스크린, 폴더블 디바이스가 시장에 나오고있습니다. 이에 따라서 사이트를 이러한 규격을 어떻게 수용할 지 생각해볼 좋은 시기입니다. 그래서 마이크로소프트는 웹 개발자들이 브라우저 창이 여러 디스플레이 영역에 걸쳐있는 경우에 콘텐츠를 효과적으로 배치하고, 해당 디바이스에 자연스럽게 반응형 웹 사이트를 만들 수 있도록 하는 두 가지 실험 기능을 발표했습니다. CSS 스크린 확장 미디어 기능(screen-spaning media feature)과 접힌 형상을 설명..

ES6 화살표 함수를 _ => {} 와 같이 사용하는 코드를 종종 목격하게 된다. 무슨 이유로 이렇게 사용할까? 화살표 함수에서 인자를 받지 않는 경우 () => {} 와 같이 사용한다. 하지만 _ => {}로 쓰면 1글자가 더 적어진다. 즉, _를 무시되는 매개변수로 사용하여 짧게 쓰려고 사용한다는 것이다. 이렇게 사용할 때에 유의해야할 점이 있는데, _ 를 매개변수로 선언해놓고 사용하지 않기 때문에, 린트 등으로 인해 Error/Warning이 발생할 수 있다. Underscore/Lodash를 사용하면 _를 사용하기 때문에 충돌이나서 해당 화살표 함수에서는 사용할 수 없을 수 있다. 참고 링크: Using _ (underscore) variable with arrow functions in ES6/..

이 글은 Google Developers 의 자동 재생 정책 변경사항, Webkit 블로그의 iOS를 위한 새로운 정책, macOS를 위한 자동 재생 정책 변경사항을 기반으로 정리하였고, 검증을 위해 몇가지 브라우저로 테스트 하였습니다. 디바이스, 브라우저 종류와 버전 등 환경에 따라 자동 재생에 대한 정책이 다르므로 해당 글과 다른 점 있을 수 있다는 것 말씀드립니다. 자동 재생이 되는 경우 1. 무음인 경우 항상 자동 재생이 가능. 음소거 ON: 요소에 muted 속성을 추가 하거나, video.muted 값을 true 로 설정한 경우는 자동 재생이 가능합니다. var video = document.querySelector('video'); video.muted = true; // #2 video.m..

원문: WebKit Page Cache I – The Basics WebKit Page Cache I – The Basics This is the first of two posts that will center around a modern browser engine feature that doesn’t usually get a lot of press: The Page Cache. webkit.org 이 포스트는 페이지 캐시에 대한 두 포스트 중 첫번째 포스트입니다. 페이지 캐시는 일반적으로 관련해서 많이 포스팅되지 않는 모던 브라우저 브라우저 기능입니다. 오늘 저는 이 기능이 무엇인지, 왜 종종 동작하지 않는지, 그리고 이를 개선하기 위해 어떤 계획을 세워야 하는지에 대해 이야기하려고 합니다. 페이지 캐..

원문: Autoplay Policy Changes Autoplay Policy Changes | Web | Google Developers Learn best practices for good user experiences with the new autoplay policies in Chrome, coming April 2018. developers.google.com 참고: 오디오, 비디오 요소에 대한 자동 재생 정책은 M66 Stable에서 시작했으며, Chrome에서 원하지 않는 미디어의 자동 재생의 약 절반을 효과적으로 차단하고 있습니다. Web Audio API의 경우, 자동 재생 정책이 M71에서 시작됩니다. 이것은 웹 게임, 몇 WebRTC 어플리케이션, 다른 오디오 기능을 사용하는 웹페이지..

원문: New Policies for iOS New Policies for iOS Since before your sun burned hot in space and before your race was born, Safari on iOS has required a user gesture to play media in a or element. webkit.org 우주에 당신의 태양이 불타기 전부터, 당신의 민족이 태어나기 전부터 (Since before your sun burned hot in space and before your race was born), iOS의 Safari는 혹은 요소의 미디어를 재생하기 위해서는 사용자 제스처가 필요했습니다. Safari가 iPhoneOS 3 에서 를 처음 지원했..

원문: Auto-Play Policy Changes for macOS Auto-Play Policy Changes for macOS This is a guest post from the Safari team about changes to how Safari handles HTML5 video and audio auto-play. webkit.org 이 게시물은 Safari 팀에서 Safari가 HTML5 비디오 및 오디오 자동 재생을 처리하는 방법의 변경사항에 대한 게스트 게시물입니다. 이러한 변경사항은 웹사이트와의 호환성에 영향을 줄 수 있습니다. 작년에 사파리의 iOS 용 비디오 정책 업데이트에 따라, 이번 주에는 Mac에서 자동 재생 정책을 크게 변한다고 발표했습니다. 이러한 변경 사항을 통해 특히..

이슈 발생 Safari에서 의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다. 테스트 재생 완료후에 video.muted값이 변경되면 재생 된다. 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다. 해결 autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다. 아래에 테스트한 코드와 재현 영상을 첨부한다. See the Pen Safari autoplay issue by arori (@arori) on CodePen.