오늘은 WebRTC, STUN서버, TURN서버에 대해서 포스팅하겠습니다.WebRTCWebRTC란 웹 브라우저간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API를 말합니다. 대표적으로 사용하는 회사는 Discord가 있죠.일반적인 통신은 이런 식으로 서버를 거쳐서 클라이언트에 전송하는 방식을 사용합니다.하지만 WebRTC의 기본적인 통신과정은 다음과 같습니다.  대략 이런 식으로 작동한다. 본래 첫 태생 자체는 P2P를 위한 통신방식 입니다. 그러나 아무래도 WebSocket을 이용하기 때문에 직접적으로 IP를 연결하는 방식을 차용하여 방화벽이 존재하거나 허브를(또는 라우터를) 사용하는 NAT환경에서는 연결이 불가능합니다. NAT환경이란 간단하게 말하자면 Wifi 환경과 같이 퍼블릭 IP가 ..

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 패턴 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다. 📜 원문: patterns.dev - compound pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/compound-pattern/ 앱을 개발하다 보면 종종 서로를 참조하는 컴포넌트를 만들기도 합니다. 컴포넌트들은 서로 상태를 공유하기도 하고 특정 로직을 함께 사용하기도 하죠. 아마 이런 코드는 select, 드롭다운 컴포넌트 또는 메뉴 컴포넌트에서 보았을 것입니다. 컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해 줍니다. Context API 아래 예제에서는 다람쥐 사진 목록을 보여주고 있습니다. 여기에 버튼을 추가하여..

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 패턴 동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다 📜 원문: patterns.dev - flyweight pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/flyweight-pattern/ 플라이웨잇 패턴은 비슷한 객체를 대량으로 만들어야 할 때 메모리를 절약할 수 있게 해 주는 유용한 패턴입니다. 책을 추가할 수 있는 앱이 있다고 가정해 보겠습니다. 모든 책은 title, author, isbn속성을 가지고 있습니다. 그런데 도서관에는 보통 책을 한 권만 가지고 있지 않고 같은 책을 여러권 가지고 있죠? 동일한 책에 대해 새로운 클래스를 매번 생성하는것은 그다지 도움이 되지 않습니다. 그 대신 하나의 책을 ..

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

ENGLEWOOD CLIFFS, NJ , 2022년 9월 19일 /PRNewswire/ -- LG Electronics USA 는 LG.com 및 일부 LG 공인 소매점에서 2022 LG 울트라 PC 프리미엄 노트북 라인업의 가격 및 즉시 공급을 발표했습니다. 16인치 및 17인치 화면 크기를 제공하는 2022 Ultra PC는 성능 저하 없이 휴대성과 매끄럽고 가벼운 디자인을 중요시하는 다양한 사용자에게 이상적입니다. 새로운 Ultra PC 라인업은 원활한 사용자 경험을 제공하기 위해 내부에서 외부로 개편되었습니다. 그 결과 긴 배터리 수명, 사용자에게 작업의 자유를 제공하는 등 LG의 성공적이고 비평가들로부터 찬사를 받은 LG 그램 노트북 라인의 DNA에 충실하면서 궁극적인 모바일 워크스테이션을 재정..