Flutter 맛보기 1
직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다
[WebRTC] 공부
WebRTC란?
Peer to Peer(P2P - 1:1) 통신을 가능하게 해주는 웹기술. 하지만 현실세계에선 클라이언트 간에 통신은 NAT(Network Access Translator) gateway가 있어서(네트워크 라우터같은) 대비책(fallback)이 필요. 그래서 STUN과 TURN같은 Signaling Server 가 있음.
ICE(Interactive Connectivity Establishment)
ICE(Interactive Connectivity Establishment)는 웹 브라우저 간에 피어 투 피어 접속을 할 수 있게 해 주는 프레임워크입니다.
A에서 B로 직접적인 피어 투 피어 접속이 쉽게 동작 하지 않는데는 많은 이유가 있습니다.
공개된 접속을 막는 방화벽을 통과해야 하기도 하고, 공인 IP 주소를 갖지 않은 기기들에 유일한 주소를 부여해야 하며, 라우터가 직접적인 피어 투 피어 연결을 지원하지 않는 경우 서버를 통해 데이터를 중계 해야 할 수도 있습니다.
이러한 이유들을 해결하기 위해 ICE는 아래에 기술된 기술들을 사용합니다.
- WebRTC 기술 약어 모음집 중에서 -
구조
STUN Server
클라이언트간의 메타데이터 정보(코덱, 파일유형, 클라이언트 IP주소)를 교환해주기 위한 서버
TURN Server
WebRTC를 통해 클라이언트 간 통신이 실패했을시 클라이언트에게 영상, 음성, 텍스트 등의 데이터 전달을 대신해주는 서버. Relay Server(방송서버) 역할을 함.
SDP (Session Description Protocol)
연결된 멀티미디어 데이터의 해상도, 형식, 코덱, 암호화 방법 등등을 기술하는 표준으로써, 피어 투 피어로 연결된 서로 간에 전송될 데이터를 이해하는데 사용됩니다.
SDP는 미디어 자체라기 보다는 메타데이터라고 볼 수 있습니다 - WebRTC 기술 약어 모음집 중에서 -
보안
Siginaling Server는 아직 WebRTC 표준이 아님(2019.10.22 기준). HTTPS나 localhost에서 동작하지만 개발자가 알아서 해야함.
P2P vs SFU vs MCU
퍼옴 : P2P vs SFU vs MCU
P2P는 1:1 방식에는 적합하나 1:N 통신으로는 부적합하다 그래서 등장한 것이 SFU, MCU
P2P (Peer to Peer)
중앙 서버 없이 종단 간 직접 연결 방식은 비용 측면에서 유리하나, 피어 수가 증가(mesh structure)할수록 시스템과 네트워크의 높은 capacity를 요구한다. 1:1 또는 소규모 미디어 교환에 적합하다.
SFU (Selective Forwarding Unit)
중앙 서버를 통해 종단 간 미디어 트래픽을 중계하는 중앙 서버 방식으로, 각 피어 연결 할당 및 decrypt/encrypt 처리 비용 정도를 감수한다. 영상 방송과 같은 1:M(or minimum-N:M) 스트리밍 서비스 구조에 적합하다.
MCU (Multi-point Control Unit)
다수의 송출 미디어를 중앙 서버에서 혼합(muxing) 또는 가공(transcoding)하여 수신측으로 전달하는 중앙 서버 방식으로, 클라이언트와 네트워크의 부담이 현저히 줄어드는 반면 중앙 서버의 높은 컴퓨팅 파워가 요구된다.
결론
: SFU가 더 좋다는 얘기가 많음.
- MCU는 WebRTC의 최대 장점인 실시간성을 잡아먹음.
- MCU는 decrypt/encrypt 과정에 비용이 많이 듦.
- 성능 측정해보니 Janus Gateway, Mediasoup이 좋음.(SFU)
- 참고한자료
참고자료
마치며
현재 다니고 있는 회사는 실시간성, P2P 서버스가 핵심가치라 WebRTC를 선택했다. 하지만 1:M 서비스로 나아가려면 WebRTC에서 벗어나야 할수도 있을 것 같다. 스트리밍 서비스 관련 글들을 보니 회사가 앞으로 해야할 고민들이 조금은 보이고 있는것 같다.
2023
2022
D3.js 차트 개발 Hands on lab
직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다
직방이 사용자 행동 로그를 관리하는 방법. ZAMS
직방에서 작성했던 블로그 글을 공유합니다.
2019
[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)
회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...
[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계
작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...
[Git] Git Command 정리
Git 시스템 이해하기
[Methodology] CDD(Component Driven Development) - 계획(1/2)
CDD(Component Driven Development)란?
GraphQL, Prisma, Apollo 공부
GraphQL? RESTful?
[ESlint & Prettier] 개발 관습 설정 in Visual Studio
회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...
[CodingTest] 2019-10-26 SQL문제
공부겸 코딩테스트 사이트에서 토요일 오전 10시에 백엔드 포지션 테스트를 해준다기에 참여해봤다. SQL문제가 나왔는데 더 좋은 답이 있는것 같아 나중에 기록해두고 수정해보기로 한다.
[WebRTC] 공부
WebRTC란?
[Algorithm] 방법론 공부
동적 프로그래밍(Dynamic Programming)
Javascript 개념 정리
알고리즘 공부를 하며 부족했던 개념을 다시 정리
[CodingTest] 피보나치 수열
문제 : 피보나치 수열 제 1항부터 입력한 자연수(N)까지의 피보나치 수열 항들의 합을 구하여라.
Javascript Skills
각 반복문의 용도
[GoogleAnalytics] 자기 자신의 활동기록 제외 (prevent recording myself)
참고 5 ways to exclude your own visits from Google Analytics How to exclude your own [dynamic] ip from Google Analytics
[CodingTest] 2019 네이버 핵데이 코드테스트 문제1 with Javascript
문제1 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
[CodingTest] 2019 네이버 핵데이 코드테스트 문제3 with Javascript
문제3 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
[CodingTest] 2019 카카오 신입 공채 1차 - 2번 실패율 문제 with Javascript
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 첫답안 function solution(N, stages) { let st = stages, stats = []; for(let i=1;i<N+1;i++){ // n let selectedN...
[Syntax] 새로 알게된 파이썬 문법 정리
chaning comparison 파이썬은 chaning comparison이라는 신기한 문법이 있다. 참고 if a < b and b < c : (...) 라는 구문이 if a < b < c : (...) 으로 연산된다. 직관적인 문법이 인상적. ...
[CodingTest] i를 제외한 배열 요소들의 곱
문제 정수 배열이 주어지면 인덱스 i에 해당하는 값 이외의 모든 값들의 곱인 배열을 구하여라. 보너스 : 나눗셈을 안쓰고 풀기
[DataType] Map & Set
Set vs Array - 관련기사 Set 유일값들의 배열이 필요할때(distinct) 집합의 개념이 필요할때(차집합, 교집합 등등 자체 메서드들이 많음.) index가 필요 없을때 Array에서 중복값을 없앨때 => ...
[CodingTest] 배열의 두 값을 합하여 k값 만들기
문제 list라는 행렬과 k라는 자연수가 주어짐. list의 두 값을 합하여 k값을 만들 수 있으면 true, 없으면 false를 리턴해라. 보너스 : 한줄 표기
[CodingTest] 매일 프로그래밍 - 2019-03-26
문제 정수 배열(int array)가 주어지면 가장 큰 이어지는 원소들의 합을 구하시오. 단, 시간복잡도는 O(n).
[CodingTest] Algospot - Anagram 문제
<!– ## 설명 각 문자열의 알파벳을 재배열하였을때 같은 단어가 되는 단어들. 예시 tab - bat github - hbuitg
[CodingTest] 2019 카카오 신입 공채 1차 - 1번 오픈채팅방 문제 with Javascript
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 답안 ```javascript function solution(record) { let accounts = [], events = [], answer = []; function setEn...
[CodingTest] 별(*) 박스 만들기
문제 설명 별(*) 박스 만들기 입력값 a(rows)와 b(cols)에 해당하는 별박스 만들기
2018
SGIS-shpToGeojson
SGIS에서 받은 지도데이터(.shp)를 geojson으로 변경하는 작업 내용