프로그래밍(Basic)

[바미] 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에서 상태와 생명 주기 함수를 사용하려면 ..

[바미] Render Props 패턴

Render Props 패턴 JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다 📜 원문: patterns.dev - render props pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/render-props-pattern/ 고차 컴포넌트 섹션에서 여러 컴포넌트가 동일한 데이터나 동일한 로직을 포함해야 할 때 컴포넌트의 로직을 재사용할 수 있게 되면 편해질 수 있다는 것을 알았습니다. 컴포넌트를 재사용 가능하게 할 수 있는 또 다른 방법으로, render prop 패턴을 사용하는 방법이 있습니다. render prop은 컴포넌트의 prop으로 함수이며 JSX 엘리먼트를 리턴합니다. 컴포넌트 자체는 아무런 것도 렌더링하지 않지 만 ..

[바미] HOC 패턴

HOC 패턴 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다 📜 원문: patterns.dev - hoc pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/hoc-pattern/ 종종 여러 컴포넌트에서 같은 로직을 사용해야 하는 경우가 있습니다. 이런 로직은 컴포넌트의 스타일시트를 설정하는 것 일 수 있고. 권한을 요청하거나 전역 상태를 추가하는 것일 수 있습니다. 같은 로직을 여러 컴포넌트에서 재사용하는 방법 중 하나로 고차 컴포넌트 패턴을 활용하는 방법이 있습니다. 이 패턴은 앱 전반적으로 재사용 가능한 로직을 여러 컴포넌트들이 쓸 수 있게 해 줍니다. 고차 컴포넌트란 다른 컴포넌트를 받는 컴포넌트를 뜻합니다. HO..

[바미] Mediator/Middleware 패턴

Mediator/Middleware 패턴 중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다 📜 원문: patterns.dev - mediator pattern 📜 번역 : https://patterns-dev-kr.github.io/design-patterns/mediator-middleware-pattern/ 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통하도록 합니다. 중재가 객체가 요청을 받아 이를 필요 로 하는 객체들에게 전달하는 것이다. 중재자는 보통 객체나 함수로 구현됩니다. 이 패턴은 공항에서 비행기의 동선을 관리하는 관제소에 비교할 수 있다. 비행기끼리 직접 통신하면 사고로 이어질 수 있겠 지만 관제소에서 상황을 전달받아 통제를 하게 되면 서로 충돌 없이 ..