2022/10
[바미] RTMP(Real Time Messge Protocol)란?
RTMP? RTMP(Real Time Message Protocol)이란 어도비 회사에서 독점 프로토콜로 비디오나 오디오등을 인터넷 상에서 실시간으로 스트리밍 데이터를 전송해서 불특정 다수들이 받아 볼 수 있도록 하는 기술의 규격을 말합니다. RTMP는 기본 1935포트를 사용하지만 통신에 실패하면 RTMPS(434)나 RTMPT(80)포트를 사용하여 통신하도록 시도합니다. RTMP 패킷 구조 RTMP의 패킷 구조는 아래와 같습니다. 위 이미지를 통해 RTMP 규격을 거쳐 다른 기기에 전송 되는 구조 라는 것을 알 수 있습니다. 대부분 실시간 방송 서비스는 RTMP를 이용해서 스트리밍하게 됩니다. RTMP를 사용하는 서비스 대부분이 알고 계시는 방송 플랫폼이 RTMP를 사용하고 있습니다. 피드백 프로토콜..
[바미] WebRTC, STUN서버, TURN서버에 대해
오늘은 WebRTC, STUN서버, TURN서버에 대해서 포스팅하겠습니다. WebRTC WebRTC란 웹 브라우저간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API를 말합니다. 대표적으로 사용하는 회사는 Discord가 있죠. 일반적인 통신은 이런 식으로 서버를 거쳐서 클라이언트에 전송하는 방식을 사용합니다. 하지만 WebRTC의 기본적인 통신과정은 다음과 같습니다. 대략 이런 식으로 작동한다. 본래 첫 태생 자체는 P2P를 위한 통신방식 입니다. 그러나 아무래도 WebSocket을 이용하기 때문에 직접적으로 IP를 연결하는 방식을 차용하여 방화벽이 존재하거나 허브를(또는 라우터를) 사용하는 NAT환경에서는 연결이 불가능합니다. NAT환경이란 간단하게 말하자면 Wifi 환경과 같이 퍼블릭 I..
[바미] Command 패턴
Command 패턴 명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다 📜 원문: patterns.dev - command pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/command-pattern/ 커맨드 패턴을 사용하면 특정 작업을 실행하는 개체와 메서드를 호출하는 개체를 분리할 수 있습니다. 예를 들어 온라인 음식 배달 플랫폼을 개발한다고 가정해 보죠. 사용자는 주문하거나, 주문한 음식이 어디쯤 왔는지 확인하거나, 주문을 취소할 수 있습니다. class OrderManager() { constructor() { this.orders = [] } placeOrder(order, id) { this.orders..
[바미] Compound 패턴
Compound 패턴 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다. 📜 원문: patterns.dev - compound pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/compound-pattern/ 앱을 개발하다 보면 종종 서로를 참조하는 컴포넌트를 만들기도 합니다. 컴포넌트들은 서로 상태를 공유하기도 하고 특정 로직을 함께 사용하기도 하죠. 아마 이런 코드는 select, 드롭다운 컴포넌트 또는 메뉴 컴포넌트에서 보았을 것입니다. 컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해 줍니다. Context API 아래 예제에서는 다람쥐 사진 목록을 보여주고 있습니다. 여기에 버튼을 추가하여..
[바미] Factory 패턴
Factory 패턴 객체를 생성하는 팩토리 함수를 사용한다. 📜 원문: patterns.dev - factory pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/factory-pattern/ 팩토리 패턴을 사용하면 함수를 호출하는 것으로 객체를 만들어낼 수 있습니다. new 키워드를 사용하는 대신 함수 호출의 결과로 객체를 만들 수 있는 것이죠. 앱에 다수의 사용자를 추가해야 한다고 가정해 보겠습니다. 사용자는 firstName, lastName, email 속성을 갖게 됩니다. 이 때 팩토리 함수를 사용해 fullName 메서드를 가진 객체를 만들어 반환합니다. const createUser = ({ firstName, lastName,..
[바미] Flyweight 패턴
Flyweight 패턴 동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다 📜 원문: patterns.dev - flyweight pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/flyweight-pattern/ 플라이웨잇 패턴은 비슷한 객체를 대량으로 만들어야 할 때 메모리를 절약할 수 있게 해 주는 유용한 패턴입니다. 책을 추가할 수 있는 앱이 있다고 가정해 보겠습니다. 모든 책은 title, author, isbn속성을 가지고 있습니다. 그런데 도서관에는 보통 책을 한 권만 가지고 있지 않고 같은 책을 여러권 가지고 있죠? 동일한 책에 대해 새로운 클래스를 매번 생성하는것은 그다지 도움이 되지 않습니다. 그 대신 하나의 책을 ..
[바미] - Hooks 패턴
Hooks 패턴 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다 📜 원문: patterns.dev - hooks pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/hooks-pattern/ React 16.8 버전에는 Hooks라는 기능이 추가되었습니다. Hooks는 React의 상태와 생명 주기 함수들을 ES2015의 클래스를 사용하지 않고 쓸 수 있게 해 줍니다. Hooks가 디자인 패턴이 아닐순 있지만 Hooks는 앱에서 아주 중요한 역할을 합니다. 여러 전통적인 디자인 패턴들은 모두 Hooks로 변경할 수 있습니다. 클래스 컴포넌트 Hooks가 추가되기 전에 React에서 상태와 생명 주기 함수를 사용하려면 ..