잡다한 개발 블로그

Safari 특정 버전은 모바일 디버깅 미지원 할 수 있으며, 이 경우 Safari Technology Preview으로 디버깅 가능합니다. Mac과 iPhone을 케이블로 연결 [iPhone] "이 컴퓨터를 신뢰하겠습니까?" 팝업에 "신뢰"버튼 누르기 [Mac] "Safari > 환경설정(Preferences) > 고급(Advanced)"에서 메뉴 막대에서 개발자용 메뉴 보기(Show Develop menu in menu bar) 체크박스 활성화 [iPhone] "설정(Setting) > Safari > 고급(Advanced)"에서 웹 속성(Web Inspector) 활성화 [Mac] "Safari > 개발자용(Develop) > 디버깅하려는 iPhone (예: ~의 아이폰)> 개발용으로 사용(Use ..

Above the Fold 웹페이지에서 아무 행동(스크롤, 클릭 등)을 하지 않은 부분. 접은 신문의 첫 페이지의 상단에서 따옴 Below the Fold 웹페이지에서 스크롤하지 않으면 볼 수 없는 부분. Above the Fold가 아닌 부분. 출처: 위키피디아 - Above the fold Above the fold - Wikipedia Top section of the front page of a newspaper or website Above the fold is the upper half of the front page of a newspaper or tabloid where an important news story or photograph is often located. Papers are ..

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에서 자동 재생 정책을 크게 변한다고 발표했습니다. 이러한 변경 사항을 통해 특히..

Pre-roll 광고는 모바일과 데스크톱 모두에서 피처링된 비디오 바로 전에 자동으로 재생되는 비디오 광고입니다. 이 광고들은 보통 15초, 30초 또는 60초 정도 걸립니다. 15초 분량의 유튜브 Pre-roll 광고: 출처 What is a Pre-Roll Ad & Why Should Marketers Use Them in Campaigns? Pre-roll ads are great for digital marketers in many ad campaigns. This article details some best practices and highlights examples from multiple platforms. instapage.com

Charles 앱에서 "Help > SSL Proxying" 참고 MacOS "Proxy > SSL Proxy Settings" 에서 "Enable SSL Proxy"를 체크 "Help > SSL Proxying > Install Charles Root Certificate"를 눌러 인증서 설치 키체인 접근 설정에서 Charles Proxy 인증서 더블 클릭 후 "신뢰 메뉴 > 이 인증서 사용 시" 에서 "항상 신뢰" 로 설정 iOS Charles > “Help > SSL Proxing > Install Charles Root Certificate on a Mobile Device or Remote Browser” 클릭 "설정(Settings) > 와이파이(Wi-Fi)" 로 동일한 네트워크를 잡고 "프록..