웹소켓 (WebSocket)
웹소켓 (WebSocket) 클라이언트와 서버가 지속적으로 연결을 유지하며 양방향 통신을 할 수 있게 해주는 통신 프로토콜이다.HTTP 처럼 TCP 위에서 동작하지만 연결이 끊기지 않고 지속된다. 기본 프로토콜은 ws:// 또는 wss:// (보안) 이며 실시간 데이터 전송으로 채팅, 게임, 알림 등에 사용할 수 있다. (채팅 시스템, 실시간 주식이나 코인 가격, 실시간 알림, 온라인 게임, Google Docs와 같은 공동 문서 편집)클라이언트가 서버에 handshake 요청을 하면 연결 수립 후 양방향 데이터 전송을 하는 구조이다.HTTP와의 차이는 HTTP는 요청/응답 1회성이라면, 웹 소켓은 연결 유지 및 푸쉬가 가능하다.브라우저와 서버 모두 웹소켓 지원이 필요하며, 프록시/방화벽이 웹소켓을 차단..
.m3u8 (HLS, HTTP Live Streaming)
m3u8 파일은 HLS (HTTP LIVE Streaming)에서 사용하는 미디어 플레이리스트 파일 HTTP Live StreamingHTTP Live Streaming은 애플이 개발한 스트리밍 미디어 전송 프로토콜입니다.동영상 실시간 방송(Live) 또는 VOD (Video on Demand) 서비스에 사용되며, 특히 iOS/macOS 계열에서 표준처럼 사용되고 있다.HTTP 기반이므로 기존 웹 서버와 CDN에 쉽게 배포가 가능하며, 적응형 스트리밍으로 네트워크 상태에 따라 자동 조절되는 장점이 있다.동영상을 여러개의 작은 .ts 세그먼트 조각으로 나누고 HTTP로 전달하는 만큼 많은 세그먼트 요청으로 HTTP 요청 수가 많아질 수 있고, 약간의 재생 지연(latency)이 존재할 수 있다.또한 오래..
관련글가상돔(Virtual DOM)과 React Fiber 구조 React의 동시성 기능 (Concurrent Features)기존 렌더링 방식보다 부드럽고 반응성 높은 사용자 경험을 제공하기 위해 도입된 새로운 렌더링 아키텍처이다.리액트 18 이후부터는 기본적으로 일부 기능이 내장되어있다. 핵심은 느린 컴포넌트 때문에 전체 앱이 버벅이는 현상을 줄이기 위함이고, 그렇기 때문에 리액트가 렌더링을 중단하고 나중에 이어서 재개할 수 있는 기능들을 제공하게되었다.주요 기능으로는 startTransition, useDeferredValue, Suspense, streaming SSR등이 있다. 기존 렌더링과의 차이기존에는 렌더링이 동기적으로 한번에 진행되었다. 따라서 무거운 업데이트가 렌더링되어야할때 UI가 멈..
React의 예측 가능한(predictable) UI를 위한 설계 철학 리액트는 '어떤 상태가 주어지면, 항상 그에 대응하는 동일한 UI를 만들어야 한다'는 원칙을 따르고 있다.이것이 바로 예측 가능(predictable)한 UI를 말한다.// 상태가 같으면const isLoggedIn = true;// 언제나 같은 UI를 출력해야 함return isLoggedIn ? : ; 예측 가능한 UI는 왜 중요할까?입력값(state)을 고정하면 결과(UI)를 예측할 수 있어 테스트가 쉬우며, 상태만 보면 어떤 UI가 나올 지 알 수 있기 때문에 디버깅이 쉽다.컴포넌트는 side effect 없이 상태에 따라 렌더링되어 유지보수가 쉬우며, 선언형 프로그래밍이므로 명령형보다 DOM 조작이 직관적이다. 예시비예..