-
[디자인 패턴] 플라이급 패턴, 퍼사드 패턴, 프록시 패턴Web/JavaScript 2020. 2. 4. 19:22
플라이급 패턴
객체의 다양한 속성(변수) 중 동일하게 가질 속성(변수)은 프로토타입으로 만들고, 각자 다르게 설정할 속성(변수)은 객체의 생성자 함수에 포함시킨다.
var Person = (function(){ var Person = function(name){ // 객체마다 다르게 가질 속성 this.name = name; } // 객체마다 동일하게 가질 속성 Person.prototype.age = 24; Person.prototype.greet = function(){ console.log('hello, my name is ' + this.name); } return Person; })();
퍼사드 패턴
퍼사드(facade)는 외관을 의미하는데, 이는 객체를 만들어 사용할 때, 복잡하고, 세부적인 것들을 감추는 패턴이다.
var Teacher = (function(){ var Teacher = function(){ this.students = []; this.students.push(new Student("catnap")); this.students.push(new Student("haenNap")); this.students.push(new Student("Dreaming")); } Teacher.prototype.homework = function(){ this.students.forEach(student => { student.readBook(); student.writeEssay(); student.sendEmail(); } } Teacher.prototype.test = function(){ this.students.forEach(student => { student.readBook(); student.memorize(); student.test(); } } return Teacher; })();
var Student = (function(){ var Student = function(name){ this.name = name; } Student.prototype.grade = 1; Student.prototype.readBook = function(){ } Student.prototype.writeEssay = function(){ } Student.prototype.sendEmail = function(){ } Student.prototype.memorize = function(){ } Student.prototype.test = function(){ } return Student; })();
var GyoJang = new Teacher(); GyoJang.homework(); GyoJang.test();
코드가 상당히 길지만 하나하나 분석하면 충분히 이해할 수 있다. 하나하나 이해해보자.
먼저, 선생과 학생의 객체가 존재한다. 선생에겐 자기의 학생들(students)을 가지는 배열 변수가 있다. 그리고 프로토타입의 메서드는 숙제(homework)와 시험(test)이 있다.
숙제(homework) 메서드는 각 학생들에게 책을 읽고(readBook), 에세이를 쓰게하고(writeEssay), 마지막으로 그 결과물을 이메일로 보내게 한다(sendEmail).
시험(test) 메서드는 각 학생들이 책을 읽고(readBook), 그걸 기억하고(memorize), 마지막으로 시험을 보도록 한다(test).
이처럼 선생의 메서드 하나를 실행시키면 학생들은 다양한 메서드를 수행한다. 이와 같이 외관상으로는 단순하게 만드는 패턴을 퍼사드(facade) 패턴이라 한다.
프록시 패턴
프록시(proxy)는 대리인을 의미하는 것으로, 중간자 역할을 한다. 프록시 서버란 클라이언트 측에서 서버 측으로 데이터를 전송할 때, 중간에서 받는 역할을 하는 서버를 의미한다.
이러한 개념을 이용해 코드를 구성해보자.
var Server = (function(){ var Server = function(ip){ this.ip = ip; } Server.prototype.getData = function(data){ console.log(this.ip + '는 ' + data + '를 얻었습니다.'); } Server.prototype.submitClient = function(client, data){ console.log(this.ip + '는 ' + client + '에게 ' + data + '를 전송했습니다.'); } return Server; })(); var ProxyServer = (function(){ var ProxyServer = function(ip){ this.ip = ip; this.server = new Server('real server') } ProxyServer.prototype.getData = function(data){ console.log(this.ip + '는 ' + data + '를 얻습니다.'); this.server.getData(data); } ProxyServer.prototype.submitClient = function(client, data){ console.log(this.ip + '는 ' + data + '를 ' + client + '에게 보냅니다.'); this.server.submitClient(client, data); } return ProxyServer; })();
서버에서 데이터를 얻을 땐, 프록시 서버를 거치게 된다. 이러한 과정을 getData로 나타냈다.
또한 서버에서 데이터를 클라이언트로 보낼 때도, 프록시 서버를 거치게 되는데, 이러한 과정을 submitClient로 나타냈다.
프록시 패턴을 이용하면, 중간에서 캐싱을 이용하여, 훨씬 더 수행능력을 향상시킬 수도 있으며, 자잘한 일은 중간에서 처리하도록 할 수 있다. ('왕은 쫄병 하나를 잡기위해 움직이지 않는다'는 느낌?)
'Web > JavaScript' 카테고리의 다른 글
[디자인 패턴] 적응자 패턴, 빌더 패턴, 복합체 패턴 (0) 2020.02.05 클로저 (0) 2020.02.02 [디자인 패턴]즉시 함수 호출 표현식(IIFE)을 사용한 싱글턴 패턴 (0) 2020.02.01 ES6 꿀팁 (0) 2020.01.15 값에 의한 vs 참조에 의한 (0) 2020.01.06