프로그래밍(Basic)/디자인 패턴(JS)

[바미] 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..

[바미] Design Pattern 소개

📜 원문: patterns.dev - design pattern introduction 📜번역 : https://patterns-dev-kr.github.io/design-patterns/introduction/ 디자인패턴은 소프트웨어를 개발하는 과정의 반복되는 일반적인 문제들에 대해 기준이 되는 해결책을 제공하는 중요한 개념입니다. 디자인패턴은 소프트웨어의 특정 구현을 직접 제공하지는 않지만, 반복되는 문제 상황들을 최적화된 방법으로 해결하도록 돕는 컨셉들 입니다. 지난 몇 년간 웹 개발 생태계는 빠르게 변화했고, 잘 알려진 디자인패턴 중에서도 일부는 쓸모가 예전만 하지는 않지만 다른 일부는 최신 기술들과 함께 현 시대의 문제를 해결할 수 있을 만큼 발전했습니다. 페이스북의 React는 지난 5년간 엄..