![]()
문제 사파리에서 hover시에 filter: drop-shadow 속성 적용이 안 되는 이슈가 있었다. // CSS .box { width: 300px; height: 300px; background: skyblue; color: white; } .box:hover { transform: translateY(10px); filter: drop-shadow(0, 2, 16, rgba(0 0 0 / 0.12)); } // HTML 원인 사파리에서 CSS filter 속성을 제대로 처리하지 못하는 렌더링 이슈이다. 대부분의 브라우저들은 filter 속성을 GPU를 통해 처리한다. 하지만 사파리에서는 filter 속성을 GPU가 아닌 CPU를 사용한다고 한다. filter는 복잡한 그래픽을 처리하기 때문에 그래..
글로벌 서비스를 개발하면서 다루기 어려웠던 부분 중 하나가 오디오 관련 이슈다. 다양한 브라우저, 네트워크, 운영체제 환경을 가진 유저들이 있어서 런타임에서 다양한 이슈가 발생했다. 특히 에러 없이 오디오 재생이 안되거나, 혹은 재생 중간에 멈추는 버그가 가끔 발생했는데 원인을 찾기가 까다로웠다. 정확한 문제의 원인을 알기위해서 코드 레벨부터 브라우저, 네트워크단까지 확인하며 원인을 찾아 해결했다. 주요 이슈 "오디오가 나오지 않아요", "오디오가 조금 재생되다가 멈춰요" 몇몇 유저들에게 위와 같은 오디오 재생 버그가 리포트 되었다. 웬만하면 재시도를 하거나 브라우저 캐시를 제거하면 정상으로 돌아 왔지만, 그렇지 않은 유저도 아~주 소수 존재했다. 자주는 아니지만 주기적으로 동일한 현상이 생겨 정확한 원..
문제 Safari에서는 비동기 함수안에서 window.open 호출 시 팝업이 차단될 수 있다. 약간의 trick을 이용해 팝업을 열 수 있다. 예시 팝업 X // 비동기함수를 통해 URL을 받아와서 팝업을 열때 차단된다. const url = await fetchUrl(); window.open(url, 'popupName', "width=500, height=600") 팝업 X // 빈 url은 비동기 호출 전에 만들어야한다. const url = await fetchUrl(); const popup = window.open(undefined, 'popupName', "width=500, height=600") popup.location.href = url 팝업 O // 빈 url 생성 후 url 변..
Answer 1. 코드의 간결성 2. 콜백함수 this에 값을 참조시킬때 (this 값에 lexical scope를 참조시킬 때) 3. map 사용할 때 this를 넘격주어 코드를 더 쉽게 작성할 수 있음. 들어가기전 자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 결정된다. this에 대해선 아래 링크 참고 poiemaweb.com/js-this 반면, 화살표 함수에서는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 일반 함수와 달리 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라고 한다. this와 Arrow function thi..
