개발일기

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. enumerateDevices()enumerateDevices()는 연결된 장치 목록을 배열 형식으로 반환한다.navigator.mediaDevices.enumerateDevices().then((devices) => { console.log('devices: ', devices)})배열 요소에는 deviceId, groupId, kind, label이 포함된다.deviceId: 장치 하나를 고유하게 식별하는 id다. deviceId를 통해 특정 장치를 선택하여 getUserMedia() 메서드를 사용할 수 있다.groupId: 카메라와 마이크가 함께 내장되어 있는 모니터와 같은 물리적 장치를 그룹으로 묶는 id다. 단순히 같은 그룹에 속해있다는 것을 알려주는 값이다.kind: 해당 장치가 어..

btoa()와 atob()는 문자열을 각각 Base64로 인코딩하거나 디코딩할 때 사용하는 javascript의 내장 함수다. btoa(): 문자열을 Base64 인코딩된 문자열로 변환하는 함수이다.let data = { name: 'mango', price: 1000}data = JSON.stringify(data) // object to stringconst encodedData = btoa(data) // encode dataconsole.log('encodedData: ', encodedData)// encodedData: eyJuYW1lIjoibWFuZ28iLCJwcmljZSI6MTAwMH0=btoa()로 Base64 형태로 인코딩하려면 먼저 데이터를 문자열로 변경해야 한다. JSO..

1. SSE(Server Side Events)SSE는 HTTP기반의 스트리밍 기술이며 Websocket과 다르게 서버에서 클라이언트로 메시지를 보내기만 하면 되는 단방향 통신이 필요할때 사용하기 적합한 기술이다. 즉, 클라이언트가 요청을 하지 않아도 서버에서 자동으로 데이터를 보내야 하는 경우에 사용한다. 만약 클라이언트에서 서버로 요청을 보내야하면 RestAPI를 사용하여 요청을 보내면 SSE의 단점을 보완하여 사용할 수 있다.// Clientconst eventSource = new EventSource('url...')new EventSource를 사용하여 클라이언트에서 SSE 연결을 시작하게 할 수 있다. 입력된 url로 클라이언트가 GET요청을 보내게 되고 서버는 text/event-strea..

URLSearchParams는 URL의 쿼리 문자열을 다룰 때 주로 사용하며 보통 window.location.search와 같이 사용한다. window.location.search는 현재 브라우저의 쿼리 문자열을 출력한다.console.log(window.location.search)// 예상 출력) ?id=123&fruit=mango현재 주소가 localhost?id=123&fruit=mango 라면 ? 뒤에 붙은 쿼리 문자열만 출력한다. 이를 URLSearchParams와 함께 사용하여 특정 키를 가져오도록 할 수 있다.const params = new URLSeacrhParams(window.location.search)console.log( params.get('id') ) // 123conso..

자바스크립트에서 비동기 작업을 처리하기 위해 주로 사용되는 방법은 Promise.all과 Async Await다. Promise.allPromise.all은 비동기로 실행할 여러 개의 Promise 객체를 배열에 넣어서 병렬로 실행한다.const promise1 = setTimeout(() => { console.log('Start Promise1')}, 2000) // 2초 후 실행(setTimeout)const promise2 = setTimeout(() => { console.log('Start Promies2')}, 1000) // 1초 후 실행(setTimeout)// Promise.all 배열에 비동기로 실행한 작업들을 추가Promise.all([promise1, promise2])..

기존 모듈화 방식 : 스크립트 태그 ( 기존에는 자바스크립트 파일들을 script 태그를 이용하여 불러오는 방법을 사용하였다. script태그를 통한 방법 외에는 모듈화 시킬 방법이 없있기 때문이다. script태그를 통한 방식에는 크게 두가지의 문제점이 발생할 수 있다. 각각의 태그로 불러온 js파일들의 전역변수가 공통으로 생성된다. 전역 변수의 값이 바뀌어 에러가 발생할 수 있다. var alertNum = 10; // index.js var alertNum = 20; // page.js 전역변수 alertNum을 index.js와 page.js에서 각각 선언하여 값을 할당한 후, 해당 파일들을 script태그를 통하여 가져오면 값의 변화가 생기게 된다. page.js가 index.js 이후에 불러와..