Hyunwoomemo

디자인 패턴과 프로그래밍 패러다임

CS

    2023-05-06 12:51

    🗂️ 면접을 위한 CS 전공지식 노트
    목록 보기
    디자인 패턴과 프로그래밍 패러다임

    ✍🏻 Table Of Contents

    디자인 패턴싱글톤 패턴자바스크립트의 싱글톤 패턴데이터베이스 연결 모듈mongoose의 싱글톤 패턴MySQL의 싱글톤 패턴싱글톤 패턴의 단점의존성 주입팩토리 패턴자바스크립트의 팩토피 패턴전략 패턴passport의 전략 패턴옵저버 패턴자바스크립트에서의 옵저버 패턴

    라이브러리

    📖 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미. 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭다.

    예를 들어 무언가를 자를 때 ‘도구’인 ‘가위’를 사용해서 ‘내가’ 직접 컨트롤하여 자르는데, 라이브러리는 이와 비슷하다.

    프레임워크

    📖 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미. 폴더명, 파일명 등에 대한 규칙이 있으며 라이브러리에 비해 좀 더 엄격하다. 다른 곳으로 이동할 때 ‘도구’인 비행기를 타고 이동하지만 ‘비행기’가 컨트롤하고 나는 가만히 앉아 있어야 한다. 프레임워크는 이와 비슷하다.

    디자인 패턴

    디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것을 의미

    싱글톤 패턴

    싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴.

    보통 데이터베이스 연결 모듈에 많이 사용

    하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어드는 장점이 있음. 하지만 의존성이 높아진다는 단점

    자바스크립트의 싱글톤 패턴

    자바스크립트에서는 리터럴 {} 또는 new Object로 객체를 생성하게 되면 다른 어떤 객체와도 같지 않기 때문에 이 자체만으로 싱글톤 패턴을 구현할 수 있음

    const obj = {
	a: 27
}

const obj2 = {
	a: 27
}

console.log(obj === obj2)
// false
    javascript

    앞의 코드에서 볼 수 있듯이 obj와 obj2는 다른 인스턴스를 가진다.

    class Singleton {
    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this
        }
        return Singleton.instance
    }
    getInstance() {
        return this 
    }
}
const a = new Singleton()
const b = new Singleton() 
console.log(a === b) // true
    javascript

    앞의 코드는 Singleton.instance라는 하나의 인스턴스를 가지는 Singleton 클래스를 구현한 모습이다.

    이를 통해 a와 b는 하나의 인스턴스를 가진다.

    데이터베이스 연결 모듈

    앞서 설명한 싱글톤 패턴은 데이터베이스 연결 모듈에 많이 쓰인다.

    // DB 연결을 하는 것이기 때문에 비용이 더 높은 작업 
const URL = 'mongodb://localhost:27017/kundolapp' 
const createConnection = url => ({"url" : url})    
class DB {
    constructor(url) {
        if (!DB.instance) { 
            DB.instance = createConnection(url)
        }
        return DB.instance
    }
    connect() {
        return this.instance
    }
}
const a = new DB(URL)
const b = new DB(URL) 
console.log(a === b) // true
    javascript

    이렇게 DB.instance라는 하나의 인스턴스를 기반으로 a, b를 생성하는 것을 볼 수 있다.

    이를 통해 데이터베이스 연결에 관한 인스턴스 생성 비용을 아낄 수 있음

    책에서는 이렇게 나와 있는데 정확히 어떤 점이 장점인지 와닿지 않아서 ChatGPT의 도움을 받아서 적어보았다 !

    • 리소스 낭비 방지 : 각각의 요청마다 데이터베이스 연결 객체를 생성하면 매번 연결을 맺고 해제하는 리소스 낭비가 발생합니다. 이에 반해, 싱글톤 패턴을 사용하면 애플리케이션 전역에서 공유되는 객체를 사용하기 때문에 연결 객체를 한 번 생성하고 계속해서 재사용할 수 있습니다. 이는 메모리와 시간을 절약할 수 있습니다.
    • 일관성 유지 : 각각의 요청에서 독립적으로 연결 객체를 생성하면, 데이터베이스 연결 설정이 서로 다를 수 있습니다. 이에 반해, 싱글톤 패턴을 사용하면 애플리케이션 전역에서 공유되는 객체를 사용하기 때문에 설정이 일관되게 유지됩니다.
    • 에러 처리 용이성 : 데이터베이스 연결 객체를 매번 생성하면 에러 처리가 복잡해집니다. 이에 반해, 싱글톤 패턴을 사용하면 애플리케이션 전역에서 공유되는 객체를 사용하기 때문에 에러 처리가 간단해집니다.
    • 테스트 용이성 : 테스트 코드에서는 보통 데이터베이스 연결 객체를 생성하지 않습니다. 이는 테스트 환경에서도 데이터베이스 연결 객체를 재사용할 수 있다는 것을 의미합니다. 이는 테스트 코드를 작성하기 쉽고 유지보수하기 쉬운 코드를 작성할 수 있도록 돕습니다.

    mongoose의 싱글톤 패턴

    실제로 싱글톤 패턴은 Node.js에서 MongoDB 데이터베이스를 연결할 때 쓰는 mongoose 모듈에서 볼 수 있습니다.

    mongoose의 데이터베이스를 연결할 때 쓰는 connect()라는 함수는 싱글톤 인스턴스를 반환합니다.

    다음은 connect() 함수를 구현할 때 쓰인 실제 코드입니다.

    Mongoose.prototype.connect = function(uri, options, callback) {
	const _mongoose = this instanceof Mongoose ? this : mongoose;
	const conn = _mongoose.connection;

	return _mongoose._promiseOrCallback(callback, cb => {
		conn.openUri(uri, options, err => {
			if (err != null) {
				return cb(err);
			}
			return cb(null, _mongoose);
		}
	}
}
    javascript

    MySQL의 싱글톤 패턴

    Node.js에서 MySQL 데이터베이스를 연결할 때도 싱글톤 패턴이 쓰인다.

    // 메인 모듈
const mysql = require('mysql');
const pool = mysql.createPool({
  connectionLimit: 10,
  host: 'example.org',
  user: 'kundol',
  password: 'secret',
  database: '현우디비'
});
pool.connect();

// 모듈 A
pool.query(query, function (error, results, fields) {
  if (error) throw error;
  console.log('The solution is: ', results[0].solution);
});

// 모듈 B
pool.query(query, function (error, results, fields) {
  if (error) throw error;
  console.log('The solution is: ', results[0].solution)
})
    javascript

    싱글톤 패턴의 단점

    싱글톤 패턴은 TDD (Test Driven Development)를 할 때 걸림돌이 됨

    TDD를 할 때 단위 테스트를 주로 하는데, 단위 테스트는 테스트가 서로 독립적이어야 하며 테스트를 어떤 순서로든 실행할 수 있어야 한다.

    하지만 싱글톤 패턴은 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이므로 각 테스트마다 ‘독립적인’ 인스턴스를 만들기가 어려움

    의존성 주입

    또한, 싱글톤 패턴은 사용하기가 쉽고 굉장히 실용적이지만 모듈 간의 결합을 강하게 만들 수 있다는 단점이 있음

    이 때 의존성 주입(DI, Dependency Injection)을 통해 모듈 간의 결합을 조금 더 느슨하게 만들어 해결 할 수 있습니다.

    참고로 의존성이란 종속성이라고도 하며 A가 B에 의존성이 있다는 것은 B의 변경 사항에 대해 A 또한 변해야 된다는 것을 의미

    앞의 그림처럼 메인 모듈이 ‘직접’ 다른 하위 모듈에 대한 의존성을 주기보다는 중간에 의존성 주입자(dependency injector)가 이 부분을 가로채 메인 모듈이 ‘간접’적으로 의존성을 주입하는 방식

    이를 통해, 메인 모듈(상위 모듈)은 하위 모듈에 대한 의존성이 떨어지게 됨. 이를 디커플링이 된다고도 한다!

    의존성 주입의 장점

    모듈들을 쉽게 교체할 수 있는 구조가 되어 테스팅하기 쉽고 마이그레이션하기도 수월.

    애플리케이션 의존성 방향이 일관되고, 모듈 간의 관계들이 명확해짐

    의존성 주입의 단점

    모듈들이 더 분리되므로 클래스 수가 늘어나 복잡성이 증가될 수 있음. 런타임 패널티 발생

    의존성 주입 원칙

    의존성 주입은 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 함

    또한, 둘 다 추상화에 의존해야 하며, 이때 추상화는 세부 사항에 의존하지 말아야 한다.

    라는 의존성 주입 원칙을 지켜주면서 만들어야 한다.

    팩토리 패턴

    객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴

    상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 됨

    그리고 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리팩터링하더라도 한 곳만 고칠 수 있게 되니 유지 보수성이 증가

    예를 들어 라떼 레시피와 아메리카노 레시피, 우유 레시피라는 구체적인 내용이 들어 있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스타 공장에서 이 레시피들을 토대로 우유 등을 생산하는 생산 공정이라고 생각하면 됨

    자바스크립트의 팩토피 패턴

    자바스크립트에서 팩토리 패턴을 구현한다면 간단하게 new Object()로 구현할 수 있음

    const num = new Object(42)
const str = new Object('abc')
num.constructor.name // Number
str.constructor.name; // String
    javascript

    숫자로 전달하거나 문자열을 전달함에 따라 다른 타입의 객체를 생성하는 것을 볼 수 있음

    즉, 전달받은 값에 따라 다른 객체를 생성하며 인스턴스의 타입 등을 정함

    커피 팩토리를 기반으로 라떼 등을 생산하는 코드를 구축해보자

    class CoffeeFactory {
    static createCoffee(type) {
        const factory = factoryList[type]
        return factory.createCoffee()
    }
}   
class Latte {
    constructor() {
        this.name = "latte"
    }
}
class Espresso {
    constructor() {
        this.name = "Espresso"
    }
} 

class LatteFactory extends CoffeeFactory{
    static createCoffee() {
        return new Latte()
    }
}
class EspressoFactory extends CoffeeFactory{
    static createCoffee() {
        return new Espresso()
    }
}
const factoryList = { LatteFactory, EspressoFactory } 
 
 
const main = () => {
    // 라떼 커피를 주문한다.  
    const coffee = CoffeeFactory.createCoffee("LatteFactory")  
    // 커피 이름을 부른다.  
    console.log(coffee.name) // latte
}
main()
    javascript

    CoffeeFactory라는 상위 클래스가 중요한 뼈대를 결정. 하위 클래스인 LatteFactory가 구체적인 내용을 결정

    참고로 이는 의존성 주입이라고도 볼 수 있음. CoffeFactory에서 LatteFactory의 인스턴스를 생성하는 것이 아닌 LatteFactory에서 생성한 인스턴스를 CoffeeFactory에 주입하고 있기 때문

    또한, CoffeeFactory를 보면 static으로 createCoffee() 정적 메서드를 정의한 것을 알 수 있는데, 정적 메서드를 쓰면 클래스의 인스턴스 없이 호출이 가능하여 메모리를 절약할 수 있고 개별 인스턴스에 묶이지 않으며 클래스 내의 함수를 정의할 수 있는 장점

    전략 패턴

    전략 패턴(strategy pattern)은 정책 패턴(policy pattern)이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 ‘직접’ 수정하지 않고 전략이라고 부르는 ‘캡슐화한 알고리즘’을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴

    passport의 전략 패턴

    전략 패턴을 활용한 라이브러리로는 passport가 있음

    passport는 Node.js에서 인증 모듈을 구현할 때 쓰는 미들웨어 라이브러리로, 여러 가지 ‘전략’을 기반으로 인증할 수 있음.

    서비스 내의 회원가입된 아이디와 비밀번호를 기반으로 인증하는 LocalStrategy 전략과 페이스북, 네이버 등의 다른 서비스를 기반으로 인증하는 OAuth 전략 등을 지원

    다음 코드처럼 ‘전략’만 바꿔서 인증

    var passport = require('passport')
    , LocalStrategy = require('passport-local').Strategy;

passport.use(new LocalStrategy(
    function(username, password, done) {
        User.findOne({ username: username }, function (err, user) {
          if (err) { return done(err); }
            if (!user) {
                return done(null, false, { message: 'Incorrect username.' });
            }
            if (!user.validPassword(password)) {
                return done(null, false, { message: 'Incorrect password.' });
            }
            return done(null, user);
        });
    }
));
    javascript

    passport.use(new LocalStrategy( … 처럼 passport.use() 라는 메서드에 ‘전략’을 매개 변수로 넣어서 로직을 수행

    옵저버 패턴

    옵저버 패턴은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴

    여기서 주체란 객체의 상태 변화를 보고 있는 관찰자. 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 ‘추가 변화 사항’이 생기는 객체들을 의미

    옵저버 패턴을 활용한 서비스로는 트위터

    내가 어떤 사람인 주체를 ‘팔로우’ 했다면 주체가 포스팅을 올리게 되면 알림이 ‘팔로워’에게 간다.

    또한, 옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC (Model-View-Controller) 패턴에도 사용

    예를 들어 주체라고 볼 수 있는 모델에서 변경 사항이 생겨 update() 메서드로 옵저버인 뷰에게 알려주고 이를 기반으로 컨트롤러 등이 작동

    자바스크립트에서의 옵저버 패턴

    자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현

    프록시 객체

    프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 의미

    자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다.

    • target: 프록시할 대상
    • handler: 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

    다음은 프록시 객체를 구현한 코드

    const handler = {
	get: function(target, name) {
		return name === 'name' ? `${target.a} ${target.b}` : target[name]
	}
}

const p = new Proxy({a: 'KUNDOL', b: "IS AUMUMU ZANGIN"}, handler)
console.log(p.name) // KUNDOL IS AUMUMU ZANGIN
    javascript

    new Proxy로 선언한 객체의 a와 b라는 속성에 특정 문자열들 담아서 handler에 ‘name이라는 속성에 접근할 때는 a와 b라는 것을 합쳐서 문자열을 만들어라.’ 를 구현했습니다.

    이렇게 p라는 변수에 name이라는 속성을 선언하지 않았는데도 p.name으로 name 속성에 접근하려고 할 때, 그 부분을 가로채 문자열을 만들어 반환하는 것을 볼 수 있음

    프록시 객체를 이용한 옵저버 패턴

    function createReactiveObject(target, callback) { 
    const proxy = new Proxy(target, {
        set(obj, prop, value){
            if(value !== obj[prop]){
                const prev = obj[prop]
                obj[prop] = value 
                callback(`${prop}가 [${prev}] >> [${value}] 로 변경되었습니다`)
            }
            return true
        }
    })
    return proxy 
} 
const a = {
    "형규" : "솔로"
} 
const b = createReactiveObject(a, console.log)
b.형규 = "솔로"
b.형규 = "커플"
// 형규가 [솔로] >> [커플] 로 변경되었습니다
    javascript

    프록시 객체의 get() 함수는 속성과 함수에 대한 접근을 가로채며, has() 함수는 in 연산자의 사용을 가로챕니다. set() 함수는 속성에 대한 접근을 가로챕니다. set() 함수를 통해 속성에 대한 접근을 가로채서 형규라는 속성이 솔로에서 커플로 되는 것을 감시할 수 있다!