# 학습 내용 정리 검색 결과
118 개의 검색 결과가 있습니다.
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 9. 자잘한 오류 수정하기! (完)

이전 포스팅에서 막판에 발생한 오류들이 있었죠? 이번 포스팅에서는 그 오류들을 고쳐서 보다 완벽한 통신이 이루어지도록 만들어보겠습니다!! ※ 본 내용은 노마드코더 줌 클론코딩의 3.8~3.11 까지의 수업 내용을 담고 있습니다! 목차 0. Sender 내가 카메라를 바꿀 때 다른 브라우저에서도 그 내용이 반영이 되어야 한다고 말했었죠? 하지만 저번 포스팅까지의 내용에서는 그 부분이 반영이 되지 않았습니다. 이걸 바꾸기 위해서는 handleCameraChange부분을 다시 수정할 필요가 있습니다! 우리가 카메라를 바꾸게 되면, getMedia 함수를 통해 새로운 stream을 만들게 됩니다. 그 stream의 변경사항을 peer에게도 전달해야 카메라가 바뀌었다는 사실이 peer의 화면에서도 적용이 되겠죠?..

2021. 11. 1. 03:27
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 8. 사용자간 연결 완성하기!

이전 포스팅에서 연결의 맛보기를 보여줬다면, 이번 포스팅에서는 Peer-to-Peer 통신을 좀 더 맛깔나게 구현해보도록 하겠습니다! ※ 본 내용은 노마드코더 줌 클론코딩의 3.6~3.7 까지의 수업 내용을 담고 있습니다! 목차 0. answer 전송하기 본 내용은 이전 포스팅의 offer 전송하기와 연결됩니다! (너무 길어서 잘랐어요 ㅠ) 다시 다이어그램을 보겠습니다. 이전 포스팅에서 이미 방에 접속한 브라우저가 새로 접속한 브라우저에 offer를 날리는 부분까지 구현했었죠? 그렇다면 이제 새로 접속한 브라우저에서 offer를 처리하는 부분을 구현해야 합니다! 새롭게 접속한 브라우저에서 offer를 받으면, 그 offer는 Local이 아닌 Remote에 위치해야 합니다. 그렇기 때문에 offer는 m..

2021. 11. 1. 01:53
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 7. Welcome, WebRTC!

이전 포스팅에서 Zoom의 핵심 기능인 영상 및 음성 스트림 기능을 구현해보았습니다. 그렇다면 이제 서로간의 통신을 해봐야겠죠? ※ 본 내용은 노마드코더 줌 클론코딩의 3.3~3.5 까지의 수업 내용을 담고 있습니다! 목차 0. WebRTC 먼저 좋은 레퍼런스가 존재하기 때문에, 이 글을 읽기 전에 참조하시면 좋습니다. (반드시 읽어야 하는 것은 아닙니다 ㅋㅋㅋㅋ) WebRTC API - Web API | MDN WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 developer.mozilla.org WebRTC An open fram..

2021. 11. 1. 00:29
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 6. 캠 영상과 음성을 사용해보자!

이전 내용을 통해 채팅 시스템을 구현하는 것에 대해 알아보았습니다. 이번에는 Zoom의 핵심 기능인 영상 및 음성 스트림 기능을 구현해보도록 하겠습니다! ※ 본 내용은 줌 클론코딩의 3.0~3.2 까지의 수업 내용을 담고 있습니다! 목차 0. 사용자로부터 영상받아 띄우기 시작하기 전에 채팅에 대한 내용을 싹 다 지우고 새롭게 시작합니다. // server.js import http from "http"; // 이미 기본 설치되어있음 import WebSocket from "ws"; // 기본설치! import express from "express"; // npm i express 설치 import { instrument } from "@socket.io/admin-ui"; import { Server ..

2021. 10. 31. 04:20
# 학습 내용 정리/코딩앙마 TypeScript 강좌(TS)

[코딩앙마 TS] 7. 유틸리티 타입 (完)

오늘은 TypeScript의 유틸리티 타입에 대해서 알아보겠습니다! 참고한 강좌 영상은 아래 첨부합니다 :) 목차 0. keyof 유저 인터페이스의 키 값중 하나를 불러올 때 유용하게 사용할 수 있는 keyof 키워드입니다. 이 키워드를 이용하면 유니온 타입을 사용한 것과 동일한 결과를 변수에 넣을 수 있습니다. 아래와 같이 없는 값을 넣으면 에러가 납니다! 1. partial partial은 프로퍼티를 모두 Optional(선택적인) 값으로 바꿔줍니다. 위와 같이 인터페이스에 선언한 값들 중 일부 값만 넣으면 에러가 나겠죠? 이럴 때 partial을 사용하면 일부만 사용해서 선언할 수 있게 됩니다. 주석으로 처리된 부분처럼 인터페이스를 바꿔서 사용할 수 있는 것이죠! 아무리 partial이라도 선언하지..

2021. 10. 11. 01:55
# 학습 내용 정리/코딩앙마 TypeScript 강좌(TS)

[코딩앙마 TS] 6. 제네릭

오늘은 TypeScript의 제네릭에 대해서 알아보겠습니다! 참고한 강좌 영상은 아래 첨부합니다 :) 목차 0. 함수에서의 제네릭 제네릭(Generic)을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있습니다. 선언할 때는 타입 매개변수만 적어주고, 생성하는 시점에 사용하는 타입을 결정하는 것입니다. 배열을 매개변수로 받아서 배열의 사이즈를 구하는 getSize 함수를 만들어보았습니다. 지금은 숫자가 들어간 배열 형태만 넣을 수 있습니다. 만약 문자가 들어간 배열을 넣으면 당연히 오류가 발생합니다. 같은 함수인데 문자를 꼭 넣고 싶다구요?! 이렇게 매개 변수의 타입이 바뀌었는데 동일한 함수를 재사용하고 싶다면 함수 오버로딩을 사용하거나 아니면 간단하게 유니온 타입을 이용해서 선언할 ..

2021. 10. 8. 20:11