JavaScript

isNaN 함수를 사용하면 숫자가 아닌 경우 true, 아니면 false가 나온다. 참고 자료 https://stackoverflow.com/questions/175739/how-can-i-check-if-a-string-is-a-valid-number

아래의 함수로 구현할 수 있다. var intervalID = setInterval(func, [delay, arg1, arg2, ...]); 실행 주기는 ms 단위다. var intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2'); function myCallback(a, b) { // Your code here // Parameters are purely optional. console.log(a); console.log(b); } 주기 실행을 멈추려면 아래 함수를 사용하면 된다. clearInterval(intervalID)

목표 이벤트 버블링과 캡처링이 무엇인지 이해한다. 이벤트 기본적으로 js에서는 각 요소(element)가 이벤트를 발생시킬 수 있고, 이벤트 리스너를 통해서 이벤트가 발생했을 때의 동작을 명시할 수 있다. const btn = document.querySelector("button"); btn.addEventListener("click", () => { console.log("event!"); }); 이벤트 전파 실제로 이벤트가 발생한 요소가 아니라 다른 요소에서 이를 처리하고 싶을 떄가 있다. 이 때 이벤트 전파를 이용하게 된다. 이벤트 전파는 버블링과 캡처링이 존재한다. 이벤트가 발생하면 3가지 단계로 이벤트가 흐른다. 캡처링 단계: 이벤트가 하위 요소에 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 이벤트가 발생하면 최상위 조상에서 시작해서 아래로 전파가 시작되고 캡처링 -> 타깃 -> 버블링 단계를 거치게 된다....

5초동안 잠시 멈추려면 아래와 같이 작성하면 된다. setTimeout(function () { // 5초 뒤 실행할 코드 }, 5000); 참고 자료 https://stackoverflow.com/questions/14226803/wait-5-seconds-before-executing-next-linehttps://www.w3schools.com/jsref/met_win_settimeout.asp

RTCPeerConnection.getStats() 메서드를 호출하면, 현재 커넥션의 통계 데이터와 트랙의 정보들을 받을 수 있다. 출력을 해보면 stream이나 codec, trasnport 등 다양항 type의 정보를 오는 것을 확인할 수 있다. 각 type의 의미들은 https://developer.mozilla.org/en-US/docs/Web/API/RTCStats/type에서 확인이 가능하다. {id: 'RTCMediaStreamTrack_receiver_1', timestamp: 1659319122459, type: 'track', trackIdentifier: '181e51a6-8bc6-4a88-8bc0-8d5019f6564c', remoteSource: true, …} {id: 'RTCMediaStreamTrack_receiver_2', timestamp: 1659319122459, type: 'track', trackIdentifier: '08aa011f-13c7-44e8-b8b8-3e2f1da4bad5', remoteSource: true, …} {id: 'RTCMediaStream_xANDdH976y0iJdwry5rJCIUjy5hVDVPInSSM', timestamp: 1659319122459, type: 'stream', streamIdentifier: 'xANDdH976y0iJdwry5rJCIUjy5hVDVPInSSM', trackIds: Array(2)} {id: 'RTCPeerConnection', timestamp: 1659319122459, type: 'peer-connection', dataChannelsOpened: 0, dataChannelsClosed: 0} {id: 'RTCRemoteOutboundRTPAudioStream_1158860338', timestamp: 1659319120593, type: 'remote-outbound-rtp', ssrc: 1158860338, kind: 'audio', …} {id: 'RTCTransport_0_1', timestamp: 1659319122459, type: 'transport', bytesSent: 60504, packetsSent: 1208, …} {id: 'RTCCodec_0_Inbound_0', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 0, …} {id: 'RTCCodec_0_Inbound_103', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 103, …} {id: 'RTCCodec_0_Inbound_105', timestamp: 1659319123459, type: 'codec', transportId: 'RTCTransport_0_1', payloadType: 105, …} 우리가 필요한 것은 전송받고 있는 비디오 코덱 정보이므로 아래와 같이 조건문을 작성할 수 있다....

WebRTC를 이용해 코덱 별 성능 테스트를 위해서, 사용할 코덱의 종류를 바꿨어야했다. RTCRtpTransceiver를 통해 사용할 코덱을 수정할 수 있다. RTCRtpTransceiver RTCRtpSender와 RTCRtpReceiver 쌍을 관리하는 인터페이스다. 각각은 트랙을 인코딩하고 remote peer에 전송하는 것을 관리하는 역할, 트랙을 디코딩하고 remote peer를 전송 받는 것을 관리하는 역할이 있다. codecPreferences setCodecPreferences() 메서드를 호출하면 Transceiver의 코덱을 설정할 수 있게된다. codecPreferences는 선호하는 순서대로 코덱을 나열해서 입력할 수 있다. 참고 자료 https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpTransceiver

WebRTC를 사용하기 위해서 JavaScript로 제공하고 있는 API들을 알아본다. 크게 두 기지 기능으로 나눌 수 있다. P2P 연결: 두 피어 간의 연결 설정 및 제어. WebRTC에 해당하는 영역. 미디이 캡쳐 기기: 동영상 카메라, 마우스, 화면 캡처 등. WebRTC를 사용하기 위해 함께 자주 사용되는 WebAPI P2P 연결 기본적으로 RTCPeerConnection 인터페이스에서 처리한다. P2P 연결이 진행되기 위해서는 Signaling이라는 과정이 필요하다. Signaling WebRTC에서는 다양한 데이터를 전송할 수 있기 때문에, 전송할 데이터 형식을 피어 간에 공유해야된다. 이렇게 전송 할 데이터의 형식과 상대 피어의 위치를 알아내는 과정을 signaling이라고 부른다....

JavaScript에서 비디오 스트림을 캡쳐하여 분석 ,가공 저장 등을 가능하게 해준다. 예제를 기반으로 사용법을 익혀본다. const canvas = document.querySelector("canvas"); // Optional frames per second argument. const stream = canvas.captureStream(25); const recordedChunks = []; console.log(stream); const options = { mimeType: "video/webm; codecs=vp9" }; // 1 const mediaRecorder = new MediaRecorder(stream, options); mediaRecorder.ondataavailable = handleDataAvailable; // 2 mediaRecorder.start(); function handleDataAvailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedChunks.push(event.data); console.log(recordedChunks); download(); } else { // … } } function download() { const blob = new Blob(recordedChunks, { type: "video/webm" }); // 3 const url = URL....

데이터 저장 window.localStorage.setItem('myCat', 'Tom'); 데이터 조회 const cat = localStorage.getItem('myCat') // 없으면 null 데이터 삭제 localStorage.removeItem('myCat'); 데이터 전체 삭제 localStorage.clear(); 참고 자료 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

fetch 함수를 사용한다. await fetch('http://localhost:8080/api/games', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ "alternativeNames": ["롤"], "images": ["img1", "img2", "img3"], "name": "League Of Legends" }) });

remove() 메서드를 통해 쉽게 제거가 가능하다. const element = document.getElementById("demo"); element.remove(); 참고 자료 https://www.w3schools.com/jsref/met_element_remove.asp

같은 origin의 서로 다른 window, tab, frame, iframe 간에 통신을 할 때 사용하는 Web API다. WebRTC로 두 탭 사이에 연견을 맺기 위해서 BroadcastChannel을 사용했다. 간단한 사용법만 정리해본다. 채널 생성 인자로 원하는 채널의 이름을 생성할 수 있다. 이미 생성된 채널이라면 구독을 하게 된다. const signaling = new BroadcastChannel('webrtc'); 이벤트 처리 아래와 같이 어떤 이벤트가 발생했을 때의 처리를 구현할 수 있다. signaling.onmessage = e=> { if(e.data.type === 'hello') { console.log('hello'); } } 이벤트 발생 이벤트를 발생시키는 방법은 아래와 같다....