목록Javascript/자바스크립트 패턴 (11)
동글이의 STORY
🔶 전략 패턴?객체 지향 디자인 패턴 중 하나로 동일한 문제를 해결하기 위한 여러 알고리즘을 정의, 각가의 캡슐화하여 상호 교환 가능하도록 만드는 패턴런타임 시에 알고리즘을 선택하고 적용할 수 있게 됨장점유연성 : 새로운 전략을 추가하거나 기존 전략을 수정하기 쉬움재사용성 : 전략을 재사용 할 수 있어서 개발비용과 시간을 절약할 수 있음테스트 용이성 : 각 전략을 독립적으로 테스트할 수 있기 때문에 테스트가 용이단점클래스 개수 : 각 전략이 별도의 클래스로 캡슐화 되기 때문에 클래수 수 증가 → 코드 복잡성을 높이고 유지보수 어려워짐오버헤드 : 런타임에 전략을 교체하기 때문에 오버헤드 발생 가능성 있음정렬 알고리즘BubbleSort, QuickSort, insertionSort 등Sorter 클래스가 ..
🔶 장식자 패턴(Decorator pattern)객체에 동적으로 새로운 행위를 추가할 수 있도록 해주는 구조 패턴동작이나 기능을 동적으로 추가하는데 초첨을 둔 것장점서브 클래스에 의전할 필요 없음객체는 새로운 행동에 유연하게 사용될 수 있으며 본 객체를 계속 사용할 수 있다.단점관리가 되지 않으면 아키텍처가 복잡해 질 수 있다.🔹 예시 코드class Book { constructor(title, author, price) { this._title = title; this._author = author; this.price = price; } getDetails() { return `${this._title} by ${this._author}`; }}// decorator ..
🔶 샌드박스 패턴(sandbox pattern)샌드박스 패턴은 어떤 모듈이 다른 모듈과 그 모듈의 샌드박스에 영향을 미치지 않고 동작할 수 있는 환경을 제공하는 것샌드박스에서는 단일 전역 변수가 생성자 ( 격리된 샌드박스에 있는 코드를 전달하는 이 생성자를 이용하여 객체를 생성함)장점단 하나의 전역변수에 의존하는 네임스페이스 패턴의 단점을 여러 개의 샌드박스 객체를 생성함으로 극복외부 요인으로부터 코드를 격리할 수 있다.점으로 연결된 긴 이름을 쓸 필요가 없다런타임(Runtime)에 탐색 작업을 거치지 않게 해준다.🔹 예시 코드function Sandbox() { // argument를 배열로 바꾼다 var args = Array.prototype.slice.call(arguments), ..
🔶 네임스페이스 패턴(NameSpace pattern)변수 이름이 겹치는 상황을 보완하기 위해 사용됨이름들을 한곳에 모아 충돌 방지네임스페이스 패턴은 애플리케이션 또는 라이브러리를 위한 하나의 전역객체를 생성 후 그 안에 필요한 모든 기능을 프로퍼티로 정의하는 것장점변수명 중복 방지신뢰도 증가🔹 예시 코드//전역 객체 하나 생성var globVariable = {}; //객체의 프로퍼티로 추가globVariable.num = 1; //함수도 추가globVariable.increaseNum = function(){ console.log('increase!');} globVariable.decreaseNum = function(){ console.log('decrease!')}ES6 이후, let,con..
🔶 팩토리 패턴(factory pattern)객체 생성 부분을 떼어내 추상화하는 패턴두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴장점 유연성 증가 : 객체 생성하는 부분(CarFactory)과 객체를 사용하는 부분(Car)을 분리하여 객체 생성과 사용에 대한 유연성을 높유지 보수성 증가 : 캡슐화하여 객체 생성 과정을 추상화 → 한 곳만 고쳐도 되기 때문에 유지보수 및 코드 변경이 용이코드 의존성 낮춤단점코드 복잡도 증가 : 팩토리 클래스 추가 작성해야하기 때문유지보수 어려움 : 팩토리 클래스의 존재로 인해 객체 생성 로직이 복잡해짐객체의 생성 과정이 추가로 이루어지므로 약간의 성능 손실이 발생🔹 예시 코드// Product in..
🔶 싱글톤 패턴(singleton pattern)인스턴스(객체)를 애플리케이션 전체에서 공유하는 디자인 패턴전역 변수를 사용하지 않고도 해당 객체를 전역적으로 접근 할 수 있게 되며 공유 자원에 대한 동시 접근을 제어자원 관리 : 객체 하나만 생성하기 때문에 자원 낭비 방지전역 객체 : 전역 객체처럼 동작하므로, 여러 곳에서 접근 사용 가능상태 유지 : 상태 유지 용이안정성 : 다중 스레드 환경에서도 안정성 보장단점의존성 문제 : 싱글톤 객체에 의존하는 다른 객체들이 있는 경우 의존성 문제 발생테스트 어려움 : TDD에 걸림돌이 됨, 테스트 제어 어려움객체의 역할이 명확하지 않음유연성 제한 : 수정 불가, 상속을 통한 확장 불가장점🔹 Class 문법 이용자바에서 싱글톤 패턴을 구현하는 방식을 흉내le..
🔶 메모이제이션 (Memoization)반복되는 결과를 메모리에 저장해놓고 다음에 같은 결과가 나올 때 다시 계산할 필요없이 빨리 실행 하는 기법자바스크립트의 메모이제이션 컨셉은 두가지 개념으로 만들어짐클로저(Closure)고차함수(Hiher Order Functions)(함수에서 함수반환)🔹 클로저클로저는 함수의 해당 함수가 선언된 어휘 환경(lexical environment)의 결합이다.function foo(a) { // 글로벌 스코프 var b = a + 2; function bar(c) { console.log(a, b, c); } bar(b * 2);}foo(3); // 3, 5, 10예제를 보면 bar의 내용이 반복적으로 사용할때 유용하게 쓸 수 있음🔹 함수에서 함수 반환..
함수형 프로그램 사용 이유부수효과 감소동일한 입력이 들어가면 동일한 출력이 나오게 하여 가독성과 유지보수를 용이🔶 고차함수함수를 입력받아서 함수를 반환하는 함수즉, 함수 실행이 완전히 끝날때까지 최소한 두 단계에 걸친 매개변수가 존재완전히 완료되기 전에 여러번 호출 되어야함const decimalCalculator = denominator => numerator => decimalPoint => { const num = numerator/denominator return num.toFixed(decimalPoint)}const divideByThree = decimalCalculator(3) => 5번째 줄const devideTenByThree = divideByThree(10) => 6번..
⚡ 클로저의 의미 및 원리“ 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합”클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다.함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. 그런데 다른 언어에서는 일반함수와 클로저함수를 구분해서 사용한다.근데 JS는 다 클로저 함수라서 개념 구분하려면 어렵게 느껴진다.🔷 예제로 이해하기1.1 외부 함수의 변수를 참조하는 내부 함수 (클로저 아님)var outer = function () { var a = 1; var inner = function () { console.log(++a);//2 }; ..
⚡ 프라미스 패턴콜백 함수와의 비교const loading = function(path, done) { console.log("전달받은 경로:", path); done(path + "sample.txt")}loading('/folder/text/', function(result) { console.log("완료! :", result);})const loading = function(path) { return new Promise(function(resolve, reject) { console.log("전달받은 경로:", path); resolve(path + "sample.txt"); })}loading('/folder/text/').then(function(result) { console.log(r..