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에 충실하면서 궁극적인 모바일 워크스테이션을 재정..

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

Mixin 패턴 상속 없이 객체에 기능을 추가한다 📜 원문: patterns.dev - mixin pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/mixin-pattern/ Mixin은 상속 없이 어떤 객체나 클래스에 재사용 가능한 기능을 추가할 수 있는 객체입니다. Mixin은 단독으로 사용할 순 없고 상속 없이 객체나 클래스에 기능을 추가하는 목적으로 사용됩니다. 앱에서 여러 강아지를 만들어야 한다고 가정해 볼 때 아래 강아지 클래스는 name 프로퍼티 외에 다른 프로퍼티를 가지고 있지 않습니다. class Dog { constructor(name) { this.name = name } } 강아지는 이름 외에도 짖거나 꼬리를 흔들거나 ..