본문 바로가기

분류 전체보기211

0. shadcn ui 과 Radix UI shadcn ui 과 Radix UIRadix UI는 component 기능적 부분(행동, 접근성, 상태 관리 등)만 제공하고, 시각적인 부분(스타일링, 디자인)은 제공하지 않는 즉 헤드리스 UI component 라이브러리입니다.shadcn/ui는 Radix UI를 기반으로 만들어 기능성과 접근성을 유지하면서, 디자인과 스타일을 추가된 component 모음입니다.Radix UI 특징Primitive 는 Radix UI에서 기본적이고 근본적인 ui components 를 의미합니다.1. 접근성모든 component는 WAI-ARIA 디자인 패턴을 준수합니다키보드 내비게이션 및 포커스 관리 기능 내장스크린 리더와 호환됨2. 개발자 경험component 간 상태 공유를 위한 내장 콘텍스트(Context) .. 2025. 5. 4.
5. RTCPeerConnection 간 ICE candidate 교환 과정 1. ICE candidate 교환 과정offer 와 answer 를 교환하는 과정에서 ICE candidate 생성되며 이후 시그널링 서버를 통해 교환 되어 실제 peer 간 연결이 완료됩니다. 이전 포스트와 이어집니다. RTCPeerConnection 간 연결 과정 (offer, answer)참고할만한 내용📕 기본적인 시그널링 서버 및 클라이언트 연결 관련 포스트: 시그널링 서버 연결 및 미디어 장치 연결RTCPeerConnection 및 ICE candidate 관련 포스트: RTCPeerConnection 이해와 관련된 주요 인터페이스2. ICE candidate 교환 과정두 사용자 A, B 가 offer/answer 주고 받는 과정에서 ICE candidate 교환 시점과 흐름 예시1️⃣ A .. 2025. 4. 30.
4. RTCPeerConnection 간 연결 과정 (offer, answer) 1. 시그널링 서버를 통한 PeerConnection📕 기본적인 시그널링 서버 및 클라이언트 연결은 시그널링 서버 연결 및 미디어 장치 연결 포스트 참고RTCPeerConnection 의 이해가 필요 시 RTCPeerConnection 이해와 관련된 주요 인터페이스 포스트 참고2. 시그널링 과정두 사용자 A, B 가 피어 연결을 시도하는 과정 예시offer : offer는 연결을 시작하려는 피어(발신자)가 생성하는 SDP(Session Description Protocol) 정보answer: answer는 offer를 받은 피어(수신자)가 생성하는 SDP 정보입니다.1️⃣ A와 B 방에 입장A: 방에 입장 → 시그널링 서버에 연결B: 뒤이어 입장 → 시그널링 서버에 연결됨 2️⃣ 서버가 A에게 B 입장.. 2025. 4. 28.
3. RTCPeerConnection 이해와 관련된 주요 인터페이스 1. RTCPeerConnectionRTCPeerConnection은 WebRTC(Web Real-Time Communication) 기술의 핵심 구성 요소로, 웹 브라우저 간 피어-투-피어(P2P) 연결을 설정하고 관리하는 JavaScript API입니다.1.1 주요 속성// 전체 연결 상태 ('new', 'connecting', 'connected', 'disconnected', 'failed', 'closed')pc.connectionState// ICE 연결 상태 ('new', 'checking', 'connected', 'completed', 'failed', 'disconnected', 'closed')pc.iceConnectionState// ICE 후보 수집 상태 ('new', 'gathe.. 2025. 4. 22.
2. 시그널링 서버 연결 및 미디어 장치 연결 1. MediaStream 관련 API※ 관련 내용 정리한 포스팅 : MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식2. 구현※ 예시로 작성한 코드로 일부 내용을 생략한 관계로 참고만 하시길 추천드립니다. ※2.1 소켓 서버 연결 코드// socket.tsimport { io } from "socket.io-client";export const videoChatSocket = io(URL, { path: "/video-server-chat" }); // "/chat" 서버에 연결2.2 클라이언트 코드 📔 생략한 내용 및 추가할만한 부분미디어 장치 mute 여부를 미디어 장치 변경 시 적용시그널링 서버 연결 및 이벤트 핸들러 등등 주요 로직 context api.. 2025. 4. 18.
1. 시그널링 서버 1. 시그널링 서버WebRTC에서 P2P 연결을 설정하기 위한 초기 정보 교환을 중계하는 서버입니다. WebRTC는 브라우저 간 직접 통신을 지원하지만, 이 연결을 설정하기 위해서 초기 메타데이터 교환을 위한 시그널링 서버가 필요합니다.주요 역활세션 정보(SDP) 교환: 오디오, 비디오, 네트워크 설정 등의 정보ICE 후보(candidate) 교환: 네트워크 연결 정보사용자 발견 및 세션 관리: 사용자 ID 할당, 방(room) 생성 및 관리상태 동기화: 연결 상태, 참여자 목록 등의 정보 공유2. Socket.IO웹소켓 기반의 실시간 양방향 통신 라이브러리로, 시그널링 서버를 구현하기에 최적화되어 있습니다.주요 기능신뢰성 있는 연결: 웹소켓 연결이 불가능할 경우 롱폴링, AJAX 등 대체 방식으로 자동.. 2025. 4. 17.
0. Web RTC 이해 WebRTC 이해WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 애플리케이션에서 별도의 플러그인이나 소프트웨어 설치 없이 실시간 통신을 가능하게 하는 오픈 소스 프로젝트로 대부분의 현대 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원됩니다.주요 특징P2P(Peer-to-Peer) 통신: 클라이언트 간 직접 통신을 지원하여 중앙 서버의 부하를 줄이고 지연 시간을 최소화합니다.다양한 미디어 처리: 오디오, 비디오 및 데이터 스트림을 실시간으로 처리할 수 있습니다.보안: 기본적으로 모든 연결이 암호화되어 안전한 통신을 보장합니다.적응형 스트리밍: 네트워크 상태에 따라 미디어 품질을 자동으로 조절합니다.핵심 구성 요소1. 주요 APIMediaS.. 2025. 4. 16.
[WEB] MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식 1. MediaDevices 란?navigator.mediaDevices 를 통해 웹에서 카메라, 마이크, 화면 공유와 같은 미디어 입력 장치에 접근하여, 해당 장치에서 제공하는 미디어 스트림을 가져올 수 있습니다.※ Navigator 객체는 웹 브라우저의 정보를 제공하는 인터페이스로 window.navigator 읽기 전용 속성으로 접근할 수 있습니다.1.1 이벤트■ devicechange새로운 미디어 장치가 연결되거나 기존 장치가 제거될 때 발생하는 이벤트입니다. ondevicechange 속성으로도 사용할 수 있습니다.// `addEventListener`를 사용하는 방식 (권장)navigator.mediaDevices.addEventListener('devicechange', event => {.. 2025. 3. 31.
react-router v7 Framework Mode 라우트 방식 설명Next.js를 주로 써오다 React도 배우려 하면서 기존의 라우팅 방식이 찜찜하여 React Router를 찾아보게 되었습니다. 놀랍게도, Next.js처럼 폴더 기반 라우트 구조, SSR, CSR 지원, 코드 스플리팅 등의 유용한 기능을 제공하는 Framework Mode가 도입되었음을 알게 되었습니다.이전의 라우팅 방식도 여전히 지원되지만, 충분히 도입할 만한 장점이 있어 마이그레이션을 고려할 만하다고 판단하여 React Router의 기본 개념, 주요 기능을 정리하였습니다.⚠️ 계속해서 버전이 업데이트되고 있어 내용이 변경될 수 있으므로 공식 문서 참고를 권장합니다. 또한, 여러 기능들이 제공되지만 추후 변경될 가능성이 있어 자세한 내용은 서술하지 않습니다.React Router v7 Fra.. 2025. 3. 30.
Socket.IO 기본 사용법 Socket.IO 기본 사용법Socket.IO는 웹소켓을 기반으로 한 실시간 양방향 통신 라이브러리입니다. 클라이언트와 서버 간의 이벤트 기반 통신을 제공합니다.1. 설치서버 (Node.js):npm install socket.io클라이언트 (브라우저):npm install socket.io-client2. 서버 설정// Express와 함께 사용하는 기본적인 설정const express = require('express');const http = require('http');const { Server } = require('socket.io');const app = express();const httpServer = http.createServer(app);const io = new Server(htt.. 2025. 3. 28.
웹 소켓(WebSocket) 이해 설명웹 소켓(WebSocket)은 클라이언트와 서버 간의 양방향(Full-Duplex) 통신을 가능하게 하는 프로토콜입니다. HTTP 기반의 요청-응답 방식과 달리, 한 번 연결되면 클라이언트와 서버가 실시간으로 데이터를 주고받을 수 있는 지속적인 연결을 유지합니다. 웹 소켓의 특징1. 풀 듀플렉스(Full-Duplex) 통신클라이언트와 서버가 동시에 데이터를 주고받을 수 있음HTTP는 클라이언트가 요청하면 서버가 응답하는 단방향 구조지만, WebSocket은 서버가 클라이언트에게 실시간으로 데이터를 보낼 수 있음2. 연결 유지(Persistent Connection)HTTP는 요청마다 새로운 연결을 생성하지만, WebSocket은 연결을 유지하면서 데이터를 주고받음이를 통해 지연시간(Latency)을.. 2025. 3. 23.
[React] react 렌더링 방식 이해와 memoization 가상 DOM과 부분 렌더링 방식이해가상 DOM의 작동 방식가상 DOM 생성: 브라우저의 실제 DOM과 별개로 메모리에 가상 DOM 객체를 생성합니다.상태 변화 감지: 데이터나 상태가 변경되면, 새로운 가상 DOM 트리가 생성됩니다.차이점 계산(Diffing): 기존 가상 DOM과 새 가상 DOM을 비교하여 정확히 어떤 부분이 변경되었는지 파악합니다.부분 업데이트(Reconciliation): 변경된 부분만 실제 DOM에 적용합니다.랜더링 최적화의 필요성상태가 변경됨에 따라 컴포넌트가 재렌더링되는 과정에서 하위 컴포넌트 역시 재렌더링 되어 일부 불필요한 렌더링이 발생할 수 있습니다.예를 들어 Context API 의 Context 및 state 값이 변경되면, 해당 컴포넌트의 모든 자식 컴포넌트들도 기본적.. 2025. 3. 16.

티스토리툴바