개발일기

hls형식의 미디어를 재생하려면 브라우저 호환성으로 인해 hls.js를 import하여 가져오는 것이 추천된다.yarn add hls.js react에서 미디어를 재생하기 위해 react-player를 추가로 설치한다.yarn add react-player 렌더링하는 부분에 RectPlayer를 통해 master.m3u8이 재생될 수 있도록 코드를 입력한다.return ( ) 전체 코드는 다음과 같다.import react from 'react'import ReactPlayer from 'react-player'import Hls from 'hls.js'function App() { return ( )}export d..

https://github.com/FlashBack102/webrtc-boilerplate GitHub - FlashBack102/webrtc-boilerplateContribute to FlashBack102/webrtc-boilerplate development by creating an account on GitHub.github.com

1. WebRTC의 기본 구성 요소WebRTC웹 브라우저 간에 실시간 통신을 할 수 있게 해주는 오픈 소스 기술이다. 별도의 플러그인 없이 브라우저만으로 미디어 데이터 스트리밍을 주고받을 수 있다.Stun Server사용자가 자신의 공인 IP주소, 포트와 NAT종류를 파악할 수 있도록 해주는 서버로 주로 공유기나 NAT 환경에 이는 사용자가 외부에서 볼 수 있는 정보를 확인하게 해주는 서버이다. NAT 뒤에 있는 기기는 보통 사설 IP를 사용하여 외부 피어가 직접 연결을 하기 힘들다. STUN은 NAT으로 인해 발생하는 연결 문제를 우회하는데 중요한 역할을 한다. 즉 Stun 서버를 통해 자신의 공인 IP와 포트 번호를 파악한 후 그 정보를 다른 피어에게 전달해주는 역할을 하는게 Stun서버이다.Turn..

1. Join서버에서만 작동하는 메서드며 연결된 소켓을 특정한 room에 참여시킬 때 사용한다. 하나의 room에만 참여시키는 게 아니라 여러 room에 참여시킬 수 있다.io.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.join('roomA') socket.join('roomB') // 다른 room에도 참여시킬 수 있다.})위와 같이 코드를 작성하면 소켓에 연결되는 모든 클라이언트는 roomA와 roomB라는 room에 속하게 된다. 1-1. Query Parameter 지정소켓에 연결하는 모든 클라이언트를 같은 room이 아닌 조건에 따라 달리 지정하려면 소켓을 연결하는 클라이언트..

1. 기본 내장 이벤트1-1. connection// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id);})// Socket connected: bvZFBsat9v2GBCJYAAAJ클라이언트가 서버에 연결되면 발생하는 이벤트다. 연결되면 클라이언트의 socket정보를 확인 할 수 있다. 1-2. disconnect// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.on('disconnect', () => { console.log('Socket disconnect..

useNavigate는 useHistory를 대체하여 react router dom v6에서 도입되었다. useHistory와 동일하게 url을 변경하여 페이지를 이동시키는데 사용된다.useNavigate 기본 사용법import { useNavigate } from 'react-router-dom' // 6버전 이상에서만 사용 가능const navigate = useNavigate()navigate('/test') // /test url로 이동기본적인 사용법은 위와 같이 useNavigate를 import한 후, navigate()에 이동할 url를 추가하여 사용한다. 예를 들어 버튼 onClick 함수에 navigate()를 정의하면 버튼을 클릭했을 때, 입력한 url로 이동하게 된다. 위의 방법 외에..

useCallback은 useMemo와 비슷하게 memoization하는 hook이지만 함수를 memoization한다는 점에서 useMemo와 차별점을 가지고 있다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 하지만 useCallback으로 감싸 memoization된 함수는 의존성 배열에 들어있는 변수 또는 함수가 변경되지 않은 이상 재생성되지 않는다. 즉 useMemo와 비슷한 개념으로 useCallbak은 기존 함수를 재사용할 수 있게 하는 hook이다. useCallback의 형태import { useCallback } from 'react' // useCallack 사용을 위해 useCallback import// useCallb..

react에는 변수, 함수의 성능을 최적화하는 hook인 useMemo와 useCallback이 존재한다. useMemo는 그 중에서 변수를 최적화 할 때 사용한다. useMemo는 변수의 값을 memoization한다. 여기서 memoization 이란 값을 캐싱하여 나중에 재활용하는 것을 의미한다. useMemo는 변수의 값을 memoization 하여 의존 변수가 변경되지 않으면 캐싱된 변수 값을 계속 사용한다. 만약 의존 변수가 변경되면 캐싱된 데이터를 삭제하고 새로 변수 값을 계산하여 대입한다. useMemo의 형태import { useMemo } from 'react' // useMemo 사용을 위해 useMemo import// useMemo로 함수를 감싸기const memoizedValue..