디자인 패턴 (5) 썸네일형 리스트형 디자인 패턴) Container/Presentational Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 애플리케이션 로직과 뷰를 분리하여 관심사 분리(separation of concerns)를 강제하는 패턴 웹 개발 디자인 패턴 분야에서 관심사(concern)이라는 용어는 소프트웨어 시스템 내에서 특정한 기능을 의미합니다. 예를 들어 사용자 인증 처리, 데이터 영속성, UI 컴포넌트 렌더링, 비즈니스 로직 관리 등과 같은 작업이 있습니다. 관심사를 별개의 모듈로 처리하면 코드의 조직화, 유지보수성, 재사용성이 높아지는 장점이 있습니다. 이를 관심사 분리(separation of concerns)라고 부릅니다. 관심사를 분리함으로써, 개발자는 시스템의 특정 측면에 집중할 수 있고 모듈화를 장려하게 되며, 관심사별로 독립적인 작업이 가능하여 협업이 용이해집니다... 디자인 패턴) Prototype Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 같은 타입의 여러 객체들 간 속성을 공유하는 패턴 prototype 패턴은 같은 타입의 여러 객체 간 속성을 공유하기 좋습니다. 프로토타입은 JavaScript의 native 객체이며 프로토타입 체인을 통해 객체에 접근할 수 있습니다. 우리는 하나의 애플리케이션에서 같은 타입의 객체를 많이 만들어 사용합니다. 이때, ES6의 클래스의 인스턴스를 여러개 만들어 사용합니다. Example class Dog { constructor(name) { this.name = name; } bark() { return `Woof!`; } } const dog1 = new Dog("Daisy"); const dog2 = new Dog("Max"); const dog3 = n.. 디자인 패턴) Provider Pattern 이 글을 공부하면서 번역하고 정리한 글입니다. 여러 자식 컴포넌트에서 데이터를 사용할 수 있도록 만드는 패턴 애플리케이션에서 데이터를 여러 컴포넌트에서 사용하고 싶을 때가 있습니다. props를 이용해서 데이터를 전달할 수 있긴 하지만 이 방법으로 애플리케이션의 거의 대부분의 컴포넌트에 데이터를 전달하는 것은 어렵습니다. 우리는 종종 prop drilling이라고 불리는 현상을 마주칩니다. 이는 props를 컴포넌트 트리의 깊은 곳까지 전달하는 경우에 발생합니다. 이 경우에 props에 의존한 코드를 리팩토링하는 것은 거의 불가능해지고 특정 데이터가 어디서 오는지 알기 매우 어려워집니다. 특정 데이터를 가진 'App'이라는 하나의 컴포넌트가 있다고 사정해봅시다. 컴포넌트 트리 최하위에 ListItem, .. 디자인 패턴) Proxy Pattern 이 글을 공부하며 번역하고 정리한 글입니다. 타겟 객체에 대한 인터렉션을 가로채서 제어하는 패턴 프록시 객체를 사용하면 특정 객체와의 인터렉션에 대한 더 많은 제어권을 얻을 수 있습니다. 프록시 객체는 값을 가져오거나 설정할 때와 같이 객체와의 인터렉션 할 때의 동작을 결정할 수 있습니다. 일반적으로, 프록시는 '대리인'을 의미합니다. 누군가에게 직접 말하기보다는 그 누군가를 대표할만한 사람에게 대신 말하는 것이죠. Javascript에도 같은 상황이 있는 것입니다. 타겟 객체와 직접 상호작용하기보다는 대리인 객체 즉, 프록시 객체를 통해 타겟과 상호작용하는 것입니다. 'John Doe'라는 인물을 표현하는 person 객체를 만들어봅시다. const person = { name: "John Doe", .. 디자인 패턴) Singleton Pattern 이 글을 공부하기 위해 번역 및 정리한 글입니다. 어플리케이션 전체에서 하나의 전역 인스턴스를 공유하는 패턴 싱글톤은 한 번만 인스턴스화될 수 있고, 전역으로 접근할 수 있는 클래스입니다. 그렇게 만들어진 하나의 인스턴스는 어플리케이션 전역에서 공유될 수 있어서 어플리케이션의 전역 상태를 관리하기 좋습니다. 우선, ES2015 클래스를 사용해서 싱글톤이 어떻게 사용되는지 확인해봅시다. 다음 예시에서 Counter 클래스를 만들어봅시다. 다음과 같이 클래스를 만들면 우리는 여러 개의 Counter 인스턴스를 만들 수 있기 때문에 싱글톤 패턴의 기준에 맞지 않는 방식입니다. let counter = 0; class Counter { getInstance() { // 인스턴스 반환하는 메소드 return th.. 이전 1 다음
