들어가면서 안녕하세요. 오늘은 타입스크립트 4.9버전에서 나온 satisfies 연산자를 알아보겠습니다. satisfies 연산자는 구체적인 타입 추론을 하는데 도움을 주는 연산자입니다. 구체적인 타입 추론은 간결하게 코드를 작성하고 TypeSafe한 환경을 만드는데 도움을 줍니다. 공식문서에 있는 예시를 통해 이해하는 시간을 가져볼게요. satisfies 연산자 이해하기 다양한 케이스들을 살펴보면서 satisfies연산자를 배워보겠습니다. 각 케이스마다 질문이 있으니 스스로 생각해보고 답해보시면 기억에 잘 남으실 거에요. Case1: 객체만 만든 경우 Q1. case1에서 타입 에러가 발생할까요? type Color = 'blue' | 'red' | 'black' const color = { bleu:..

문제 사파리에서 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는 복잡한 그래픽을 처리하기 때문에 그래..

들어가면서 Storybook은 컴포넌트를 독립적으로 개발하는 것 외에도 많은 베네핏을 준다. 실제로 컴포넌트들이 어떻게 동작하고 변화하는지 시각적으로 빠르게 테스트할 수 있다. 컴포넌트의 use cases, 즉 스토리들을 만들어두면 문서화 역할도 가능하다. 이에 더해 Storybook을 통해 컴포넌트들의 접근성을 테스트하고 개선할 수 있다. 이 과정을 공유해보려고한다. 1. 웹 접근성이란 웹 개발에서 접근성이란 사람들의 능력이 제한되어도, 가능한 많은 사람들이 웹사이트를 사용하게 하는 것입니다. - MDN 2. Storybook으로 웹 접근성 테스트 환경 구축 (v7.4.0) 1) a11y addon 패키지 설치하기 yarn add --dev @storybook/addon-a11y npm install ..

글로벌 서비스를 개발하면서 다루기 어려웠던 부분 중 하나가 오디오 관련 이슈다. 다양한 브라우저, 네트워크, 운영체제 환경을 가진 유저들이 있어서 런타임에서 다양한 이슈가 발생했다. 특히 에러 없이 오디오 재생이 안되거나, 혹은 재생 중간에 멈추는 버그가 가끔 발생했는데 원인을 찾기가 까다로웠다. 정확한 문제의 원인을 알기위해서 코드 레벨부터 브라우저, 네트워크단까지 확인하며 원인을 찾아 해결했다. 주요 이슈 "오디오가 나오지 않아요", "오디오가 조금 재생되다가 멈춰요" 몇몇 유저들에게 위와 같은 오디오 재생 버그가 리포트 되었다. 웬만하면 재시도를 하거나 브라우저 캐시를 제거하면 정상으로 돌아 왔지만, 그렇지 않은 유저도 아~주 소수 존재했다. 자주는 아니지만 주기적으로 동일한 현상이 생겨 정확한 원..