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 } } 강아지는 이름 외에도 짖거나 꼬리를 흔들거나 ..

Module 패턴 코드를 재사용 가능하면서도 작게 나눈다 📜 원문: patterns.dev - module pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/module-pattern/ 코드베이스가 커져갈 수록 코드들을 유지보수하기 좋게 쪼개는 것이 중요해집니다. 모듈 패턴이 이 때 코드들을 재사용 가능하면서도 작게 나눌 수 있게 해 줍니다. 또 모듈을 코드를 나누는 과정에 특정 변수들을 파일 내에 private 하게 할 수 있는데 모듈 스코프 내에 변수를 선언하고 명시적으로 외부에 export 하지 않으면 바깥에서 해당 변수에 접근할 수 없습니다. 이를 통해 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있죠. ES2015 모듈 ..

Observer 패턴 Observable을 활용해 Subscriber에게 이벤트 발생을 알린다. 📜 원문: patterns.dev - observer pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/observer-pattern/ Observer 패턴에서 특정 객체를 구독할 수 있는데. 구독하는 주체를 Observer라 하고 구독 가능한 객체를 Observable이라 합니다. 이벤트가 발생할 때 마다 Observable은 모든 Observer에게 이벤트를 전파하죠. Observable 객체는 보통 3가지 주요 특징을 포함합니다. observers : 이벤트가 발생할때마다 전파할 Observer들의 배열 subscribe() : Observ..

Container/Presentational 패턴 비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(SoC) 를 강제한다 📜 원문: patterns.dev - container/presentational pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/container-presentational-pattern/ 6개의 강아지 사진을 다운로드받아 화면에 렌더하는 앱을 만든다고 가정해 보죠. 이상적으로는 이 프로세스를 아래 두가지로 분리하여 관심사의 분리를 강제하고 싶습니다. Presentational Components: 데이터가 어떻게 사용자에게 보여질 지에 대해서만 다루는 컴포넌트. 예제에서는 강아지 사진의 목록을 렌더링하는 부분이다. ..

AZPC측에서 올린 게시글에 의하면 RTX 4090의 예약 구매는 저가의 라인업(하급)과 고가의 라인업(상급) 두가지 종류로 진행되고 있는데 가격은 아래와 같습니다. 베트남 미국(USD) 한화(KRW) RTX 4090 하급 50,000,000동 $ 2,118 2,940,000원 RTX 4090 상급 60,000,000동 $ 2,500 3,530,000원

Prototype 패턴 동일 타입의 여러 객체들이 프로퍼티를 공유한다 📜 원문: patterns.dev - prototype pattern 📜 번역: https://patterns-dev-kr.github.io/design-patterns/prototype-pattern/ Prototype 패턴은 동일 타입의 여러 객체들이 프로퍼티를 공유할 때 유용하게 사용합니다. Prototype은 JavaScript 객체의 기본 속성이므로 Prototype 체인을 활용할 수 있죠. 하나의 앱을 만들 때 동일한 타입의 여러 객체를 만들어내곤 합니다. ES6 의 클래스의 여러 인스턴스를 만들어 낼 때 유용하게 사용할 수 있죠. 여러 강아지 클래스를 만들어 보겠습니다. 예제에서 강아지는 이름을 가지고 있고. 짖을 수 있습..

Provider 패턴 여러 자식 컴포넌트에서 데이터를 사용하능하게 한다 📜 원문: patterns.dev - provider pattern 📜번역 : https://patterns-dev-kr.github.io/design-patterns/provider-pattern/ 앱 내의 여러 컴포넌트들이 데이터를 사용 할 수 있게 해야 하는 상황이 있습니다. props 를 통해서 데이터를 전달하는 방식이 있지만 앱 내의 모든 컴포넌트들이 데이터에 접근해야 하는 경우 이 작업을 하기 매우 번거롭죠. 그리고 종종 prop drilling이라 불리는 안티패턴을 사용하게 되는데 아주 멀리있는 컴포넌트 트리까지 props를 내려주게 되면 prop에 의존되는 컴포넌트들을 나중에 리펙토링하기란 거의 불가능해지며 어떤 데이터..

Proxy 패턴 대상 객체에 대하여 읽기 및 쓰기를 직접 제어한다 📜 원문: patterns.dev - proxy pattern 📜번역 : https://patterns-dev-kr.github.io/design-patterns/introduction/ Proxy 객체를 활용하면 특정 객체와의 인터렉션을 조금 더 컨트롤 할 수 있게 됩니다. Proxy 객체는 어떤 객체의 값을 설정하거나 값을 조회할때 등의 인터렉션을 직접 제어할 수 있습니다. 일반적으로 Proxy는 어떤 이의 대리인을 뜻합니다. 그 사람과 직접이야기하는 것 대신. 이야기를 원하는 사람의 대리인에게 이야기하는것이죠. JavaScript에서도 해당 객체를 직접 다루는 것이 아니고 Proxy 객체와 인터렉션하게 됩니다. 홍길동을 표현하는 객체..