본문 바로가기
반응형

자바스크립트 디자인패턴7

자바스크립트(Javascript) 디자인 패턴 - 중재자(Mediator) 패턴 중재자 패턴은 객체들이 어떻게 통신하는지 추상적으로 만들어 놓은 객체를 정의한다. 객체간의 결합도를 낮추고 유지보수를 쉽게 할 수 있는 효과를 가져온다. 객체간 직접 통신하지 않고, 중재자 객체 를 거치기 때문이다. (e.g. 자신의 상태가 변경될 때 중재자에 알릴 때, 중재자는 변경분을 알아야 하는 객체에게 알린다) 흡사 옵저버랑 유사해보인다. 예시를 통해 알아보자. 예시 게임을 예시로 들어 어떻게 활용할 수 있는지, 자바스크립트로는 어떻게 구현하는지 알아보자. 두 명의 플레이어 중 30초 동안 더 많이 버튼을 누르는 플레이어가 이기는 게임 을 만든다고 해보자. 3가지를 정의할 수 있다. 플레이어 객체 정의 Scoreboard 객체 정의 중재자(Mediator) 객체 정의 플레이어 function Pl.. 2020. 6. 3.
자바스크립트(Javascript) 디자인패턴 - 프록시패턴 (proxy pattern) 디자인패턴 중 하나인 프록시 패턴은 하나의 객체가 다른 객체에 대한 인터페이스로 동작하도록 한다. 이러한 패턴은 의외로 많이 볼 수 있는 패턴이다. 서버 구성을 할 때 프록시 서버를 두어 패킷양을 조절하거나 중간 레이어를 두어 완충 역할을 할 수도 있다. 프록시 패턴은 이전에 설명했던 퍼사드 패턴 과 비교했을 때 다음과 같은 차이가 있다. 퍼사드 : 메서드 호출 몇 개를 결합 시켜 편의 제공 프록시 : 클라이언트 객체와 실제 대상 객체 사이에 존재, 접근 통제 이는 즉 성능 개선에 도움을 준다. 왜냐면 실제 대상 객체를 보호하여 되도록 일을 적게 시키기 때문이다. 구체적으로 lazy한 초기화 이다. 초기화의 경우 비용이 발생하는데, 최초 초기화 요청을 대신 받지만 실제 객체가 정말로 사용되기 전까지는 요.. 2020. 6. 3.
자바스크립트(Javascript) 디자인패턴 - 퍼사드 패턴 (facade pattern) 퍼사드 패턴은 객체에 대한 인터페이스를 제공한다. 메서드를 짧게 유지하고 하나의 메서드가 너무 많은 일을 하지 않도록 해야 하는 것이 설계 상 좋은 습관. 하지만, 이렇게 하면 메서드 수가 폭발적으로 증가할 수 있다. 두 개 이상의 메서드가 함께 호출되는 경우가 많으면, 하나로 묶어주는 새로운 메서드로 만드는 것이 좋다. 만약 stopPropagation(); preventDefault();두 개의 메서드가 있을 때, 다른 목적이지만 함께 호출되어야 한다. 이럴 때 함께 호출하는 퍼사드 메서드를 생성하는 것이 좋다. var myevent = { ... stop: function(e) { e.preventDefault(); e.stopPropagation(); } } 이는 설계 변경과 리팩터링 수고를 덜어.. 2020. 6. 3.
자바스크립트(Javascript) 디자인패턴 - 전략 패턴 (strategy pattern) 디자인패턴 중 하나인 전략 패턴은 런타임에 직접 수행할 알고리즘(기능)들을 선택할 수 있게 해주는 패턴이다. 자세한 예시와 설명은 예전에 디자인패턴 공부할 때 쓴 글이 있으니 참고 바란다. 디자인패턴 - 스트레티지 패턴 이번엔 자바스크립트로 전략 패턴을 구현하는 방법에 대해서 알아본다. 자바스크립트 디자인패턴 책을 공부하면서 간략히 정리한 글이다. 데이터 유효성 검사를 하는 기능을 가지고 전략 패턴을 자바스크립트로 구현해 보겠다. 일단 검사기(validator)를 만들기 위해 필요한 개념적인 것들 부터 알아보자. 검증할 데이터 유효성 검사 설정 (configuration) 검사기에 대한 세부 알고리즘 하나의 추상적인 검사기에 설정에 따라 수행되는 디테일한 검사기를 런타임에 변경할 수 있다. 전략 패턴에 .. 2020. 6. 2.
자바스크립트(Javascript) 디자인패턴 - 데코레이터 패턴(decorator pattern)( 데코레이터 패턴(Decorator Pattern)은 런타임에 필요한 기능을 객체에 동적으로 추가할 수 있는 디자인패턴 중 하나이다. 기대되는 행위를 사용자화하거나 설정할 수 있다. 평범한 객체로 시작하다가 동적으로 사용 가능한 데코레이터들 후보 중에서 원하는 것을 골라 객체에 기능을 추가해 나갈 수 있다. 바로 예시를 들어보자. 예시 물건을 파는 기능을 구현한다고 해보자. Sale 객체를 정의했는데 이는 판매건을 의미한다. 판매할 때 당연히 가격이 존재하며 이는 여러 국가에서 판매한다고 가정했을때, 지역마다 정책이 달라질 것이다. 이럴 때 계산하는 방식을 다르게하는 기능을 동적으로 추가할 수 있다. 이를 장식한다고 표현한다. var sale = new Sale(100); sale = sale.decora.. 2020. 6. 2.
자바스크립트(Javascript) - 반복자(Iterator) 패턴 반복자(Iterator) 패턴은 디자인패턴들 중 하나로 컬렉션와 관계없이 각 요소에 접근할 수 있는 패턴을 말한다. Iterator 패턴은 한번씩은 본 적이 있을 것이다. Java에서 File을 읽어드리면 iterator 형태로 나오는데 next() 와 같은 함수로 각 요소에 접근하여 내부적으로 처리한다. 이는 컬렉션 구조라면 적용이 가능하다. 자바스크립트에서는 어떻게 구현할 수 있는지 간략하게 알아보자. 객체는 일종의 집합적인 데이터를 가진다. 개별 요소에 쉽게 접근할 방법이 필요하다. 객체는 next() 메서드를 제공하고 next()를 연이어 호출하면서 다음 요소에 접근할 수 있다. next()는 해당 요소를 반환한다. var e; while (e = agg.next()) { // e로 작업 ... .. 2020. 5. 29.
자바스크립트(Javascript) 디자인패턴 - 싱글톤패턴(Singleton Pattern) 디자인패턴중 하나인 싱글톤패턴은 객체지향 프로그래밍에서도 자주 사용되는 패턴중 하나이다. 예전에 자바스크립트를 공부했었는데 리마인드하고자 다시 정리를 해봤다. 자바스크립트로는 싱글턴 패턴을 어떻게 구현할 수 있을까. 코드와 함꼐 살펴보자. 싱글톤 패턴? 특정 클래스의 인스턴스를 런타임동안 오직 하나만 유지하는 것을 의미한다. 자바스크립트는 클래스가 없고 _오직 객체_만 존재. 즉 새로 객체를 만들면 다른 객체와도 같지않아 이미 싱글톤이다. var a = { k: 1 }; var b = { k: 1 }; a == b // false a === b // false 값이 같아도 다른 객체 취급.객체 리터럴을 이용해 객체 생성할 때마다 싱글톤 만드는 것이다. 스태틱 프로퍼티에 인스턴스 저장 function Si.. 2020. 5. 29.