반응형 전체 글280 animation left / transform 성능 📺 left / transform 차이 기획자나 디자이너 요구사항에 따라 애니매이션을 넣어야 하는 경우가 있다. 이번에 애니메이션이 버벅인다는 말이 나왔고, 애니메이션에 속도 저하시키는 요소가 left였다는 것을 발견하였다. 간단하게 left가 0 => 100px 하는 모습을 만들어보았다. 🕹️ left를 이용한 애니메이션 위와 같이 만들었을때의 단점이 존재하였다. 단점은 애니메이션을 infinite(무한반복) 시켰을때 리렌더링이 되고 있었다. 간단한 left를 이용한 css 코드이다. html css .container { position: relative; display: inline-block; width: 100%; height: 100px; } .circle { display: inline-bl.. 2023. 6. 12. 6월 2주차 회고 💽 크롬 perfomance 이번주에는 크롬 performance쪽을 사용해 보았다. 현재 회사에서 애니메이션이 툭툭 끊긴다고 하는 이슈가 생겨서 , 어쨌든 css 성능 최적화를 하기 위해서는 크롬 Performance를 볼 수 밖에 없었고, layout, painting 등을 보았고, 성능 최적하를 하기 위해서 https://wit.nts-corp.com/2020/06/05/6134 를 참조하여 현재 최적하시킬려고 노력중이다. 📻 Hls.js 예외처리 현재 회사에서는 스트리밍 서비스를 하고 있다. 그러므로 , 자동적으로 Hls(Http Live Straming)을 사용할 수 밖에 없고 "ios/safari"에서는 hls가 빌트인 되어있지만, 나머지 경우에 대해서는 Hls.js를 사용할 수 밖에 없다. .. 2023. 6. 11. 🥋 6월 1주차 회고 🏄♂️ hls , ios/safari 동작 정리 hls(http live streaming)은 비디오 스트리밍 프로토콜이다. 보통 스트리밍(실시간 방송,라디오 같은?) 그런곳에 쓰이긴 하는데, ios-safari에서는 hls가 built-in이 되어있다. 하지만 다른 브라우저에서는 built-in이 되어있지 않기 때문에 hls.js라는 것을 사용하여야 한다. 스트리밍 방식의 장점은 미디어 파일을 한번에 보내는 방식이 아닌 조금씩 보내는 방식이라고 보면된다. 이것이 어떻게 동작하는지 조금 확인 필요하다. 나 또한 실시간 스트리밍 방식이 처음이라 어떻게 동작하는 지도 모르고 , 이번주에 동작하게끔 회사에서 처리하였다. 그리하여 hls 방식에 대해 좀 알아보자 ⛹️♀️ chrome 퍼포먼스 탭 알아보기 현.. 2023. 6. 4. 👀 vscode 에서 EditorConfig 쓰기 EditorConfig 일관된 코드의 작성 형태를 맞추기 위해 보통 사용된다. eslint(문법 검사), prettier(코드 포맷) 와 같이 비교 되고는 한다. 다만 현 회사에서 이미 EditorConfig이 존재하기 때문에 이번에 알아보기로 했다. Extension 설치 EditorConfig는 eslint,prettier와 달리 npm으로 설치 할 필요는 없다. 다만 Vscode 같은 경우 Extensions에 추가 설치가 필요하다. 🥼 Editorconfig 작성 EditorConfig는 어떻게 코드를 포맷 할것인가에 대해서 작성하는 곳이다. 예를 들어 들여쓰기 기준을 tab으로 잡을지 space 으로 잡을지 결정을 한다. 그리하는 나는 아래 처럼 작성하였다. root = true [*] # 모.. 2023. 6. 2. 이전 1 ··· 40 41 42 43 44 45 46 ··· 70 다음 반응형
