프리뷰 개발일지
WebRTC 프로젝트 Preview의 개발 일지를 작성합니다.
시리즈 내 포스트(9)
HOC 패턴으로 보호된 라우트 레이아웃 컴포넌트 구현
사용자 검증 로직을 추상화하고 재사용해보자
HOC 패턴으로 보호된 라우트 구현 반복되는 인가된 사용자 검증 로직을 추상화하고 재사용해보자 문제 상황 사용자의 인증 여부가 필요한 페이지들은 늘어나지만, 항상 같은 로직을 사용하는 코드가 있었다. 바로 인증 여부를 검증하는 로직이다. 사용자가 로그인한 상태라면 허용하고 아니라면 거부하는 로직이 중복되고 있었기 때문에 이를 분리하고 재사용할 방법
2025. 07. 26.4분HOC비디오 컴포넌트 렌더링 최적화
with WebRTC 공감 기능 개발하기
공감 기능 👍 하단 푸터 툴바에는 리액션 버튼을 구현할 예정이다. 해당 버튼을 누르면 모든 사용자의 화면에서 리액션을 누른 사용자의 비디오 컴포넌트에 리액션을 누른 것을 표시하는 기능이다. 구현 방식 👾 소켓 방식으로 구현할 예정이다. 간단하게 시그널링 서버를 중개해서 이라는 이벤트를 만들어서 해당 이벤트를 클라이언트에서 emit하고 그
2025. 06. 30.12분구현WebRTC최적화카메라 인디케이터 라이트 항상 표시되는 오류 해결하기
사용자 프라이버시 개선
카메라 인디케이터 라이트 항상 표시되는 오류 이 글은 노션에서 마이그레이션된 글입니다. https://github.com/boostcampwm-2024/web27-Preview/issues/111 🚩 문제 상황 카메라를 끄는 버튼은 이미 구현이 되어있다. 해당 버튼을 누르면 videoTrack의 속성을 false / true로 토글하여 비디
2025. 06. 27.10분UXWebRTCAccess Token 만료시 일관적인 401 에러 응답 처리
with Axios Interceptor
Access Token 만료시 일관적인 401 에러 응답 처리 이 글은 노션에서 마이그레이션된 글입니다. 배경 및 목적 애플리케이션에서 보호된 리소스에 접근할 때 발생하는 401 인증 에러에 대한 일관된 처리 방식이 필요했다. 특히 액세스 토큰 만료 시 리프레시 토큰을 통한 재발급 과정과 이에 따른 요청 재시도 로직을 효율적으로 구현하고자 했다.
2025. 06. 27.4분인증WebRTC DataChannel로 실시간 미디어 상태 공유하기
서버 경유 없이 데이터 주고 받기
WebRTC DataChannel로 실시간 미디어 상태 공유하기 이 글은 노션에서 마이그레이션된 글입니다. DataChannel이란? DataChannel은 WebRTC의 기능 중 하나로 수립된 RTCPeerConnection 사이에 DataChannel을 열고 해당 채널을 통해 서로 임의의 데이터를 주고받을 수 있게 해주는 기능이다. Web
2025. 06. 27.8분학습정리WebRTC프리뷰 | 네트워크 기반 동적 품질 조절 기능 개발 3편
applyConstraints
에서는 네트워크 기반 동적 품질 조절 기능에서 필수적이고 핵심인 네트워크 지표를 측정하고 현재 유저의 네트워크 상태가 좋은지 나쁜지를 판별하는 기능을 구현했다. 프리뷰 네트워크 기반 동적 품질 조절 기능 개발 3편 이번에는 마지막을 장식하는 WebRTC를 사용하기 위해 유저의 미디어 장치를 가져올 때 현재 네트워크 품질에 맞는 프리셋을 사용하도록 하
2025. 04. 09.13분네트워크
프리뷰 | 네트워크 기반 동적 품질 조절 기능 개발 2편
네트워크 보고서 저장 및 계산
에서는 네트워크 품질을 측정하기 위한 지표들에 대해서 공부한 글을 올렸었다. 이후 5초에 한번씩 피어 커넥션을 순회하며 네트워크 지표들을 측정했다. 이걸 평균내서 하나의 NetworkStat 객체로 만들어내는 것까지 했다. 프리뷰 네트워크 기반 동적 품질 조절 기능 개발 2편 오늘은 네트워크 스탯을 저장하고 이를 토대로 품질을 결정하는 훅들을 만들었다
2025. 03. 31.11분네트워크
미디어 장치 권한이 없을 때 대응하기
navigator.mediaDevices.enumerateDevices()
미디어 장치 권한이 없을 때 대응하기 미디어 장치 권한을 허락받지 않았을 때 대응하기 현재 상황 📌 미디어 장치 권한을 수락하지 않았을 때 미디어 장치 목록에 접근이 불가능함 현재 코드 useMediaDevices 커스텀 훅에서 미디어 장치들을 제어하고 있는다. 원래 의도대로라면 미디어 장치를 권한 이슈로 불러오지 못하면 에러가 뜨거나 아예
2025. 03. 12.5분
프리뷰 | 네트워크 기반 동적 품질 조절 기능 개발 1편
네트워크 품질의 성능 지표에 대해서
작년 부스트캠프에서 진행했던 프로젝트 WebRTC 화상통화 기반 Preview 프로젝트를 리팩토링하기로 결정했다. 이번에 새롭게 만들어볼 기능은 네트워크 품질에 따른 동적 화질 조절 기능이기 때문에 네트워크 CS를 좀 더 깊게 공부해보면서 만들어보기로 했다. 네트워크 모니터링을 해야하는데, 어떤 지표를 모니터링해야할지 알아야 할 것 같아서 이에 대해 공
2025. 03. 04.5분네트워크