프로그래밍(Basic)

[바미] Mediator/Middleware 패턴

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

[바미] Mixin 패턴

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 패턴

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

[바미] Observer 패턴

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 패턴

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

[바미] Prototype 패턴

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

[바미] Provider 패턴

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

[바미] Proxy 패턴

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

[바미] Singleton 패턴

Singleton 패턴 앱 전체에서 공유 및 사용되는 단일 인스턴스 📜 원문: patterns.dev - singleton pattern 📜번역 : https://patterns-dev-kr.github.io/design-patterns/introduction/ Singleton은 1회에 한하여 인스턴스화가 가능하며 전역에서 접근 가능한 클래스를 지칭합니다. 만들어진 Singleton 인스턴스는 앱 전역에서 공유되기 때문에 앱의 전역 상태를 관리하기에 적합하죠. 먼저 ES2015의 클래스로 작성된 Singleton을 보죠. 이 예제에서는 아래 메서드를 가진 Counter 클래스를 만듭니다 getInstance 메서드는 인스턴스 자체를 반환한다. getCount 메서드는 counter 변수를 반환한다. i..