개발개발

emotion emotion 문서를 읽어보자. css Props className prop을 허용하는 모든 component 또는 element는 css prop도 사용할 수 있다. css prop에 제공된 스타일이 평가되고 계산된 클래스 이름이 className prop에 적용된다. Object styles import { jsx } from '@emotion/react' render( This has a hotpink background. ) string styles string style를 전달하려면, @emotion/react에서 내보낸 css 를 사용해야 한다. render( This has a hotpink background. ) styled components chaning ..

회사에서 영상 스트리밍할 때 hls.js 라이브러리를 사용하는데, hls가 무엇인지 궁금해져서 알아보았습니다. hls가 무엇인지 이 프로토콜을 따른다면, 영상은 어떻게 저장되고 전송되는지 등을 간단하게 정리했습니다. Live Streaming? 일단 hls가 무엇인지 알아보기 전에 이 프로토콜을 사용하는 이유인 라이브 스트리밍이란 무엇일까? 우선 스트리밍이란 사용자들에게 멀티미디어 디지털 정보를 제공하는 기술로 인터넷에서 영상 및 오디오등의 파일을 다운로드 받지 않고 실시간으로 재생해주는 기법이다 라이브 스트리밍은 생방송처럼 촬영한 정보를 실시간으로 사용자의 동영상 플레이어로 보내 재생하도록 하는 방식을 말한다. HLS의 등장 배경 hls가 등장하기 전에 라이브 스트리밍을 위해 많이 사용하던 전통적인 프..

overflow: auto로 속성을 지정하면, 콘텐츠의 크기에 따라 스크롤 바를 추가할지 말지 자동으로 결정된다. 모바일웹에서 손가락으로 스크롤을 하는데, 이 때 발생하는 이벤트를 살펴보면, touchstart: 손가락이 닿을 때 발생 touchmove: 손가락이 닿은 채 움직일 때 발생 touchend: 손가락을 뗄 떼 발생 touchmove일 때 스크롤도 같이 움직이게 되는데, 손가락을 떼는 순간 즉시 스크롤이 멈추게 된다. Momentum Scrolling이란? momentum scrolling이란 touchend 이벤트 발생 시 즉시 스크롤이 멈추지 않고 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속된다. 모바일 사용자가 보통 손가락을 튕기면서 스크롤링을 하기 때문에 손..