[면접을 위한 CS 전공지식노트] 1장 디자인 패턴과 프로그래밍 패러다임 (1)

unzinzanda·2025년 2월 26일

CS 면접을 위한 CS 전공지식노트

면접을 위한 CS 전공지식노트

목록 보기

1/2

라이브러리나 프레임워크의 기본이 되는 디자인 패턴과 크게 보았을 때 어떠한 방식으로 로직을 구성해야 하는지에 대한 시각이 담겨 있는 프로그래밍 패러다임을 배워 보겠습니다.

1.1 디자인 패턴

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

1.1.1 싱글톤 패턴(Singleton Pattern)

하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴

하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈들이 공유하며 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어드는 장점이 있습니다. 따라서 인스턴스 생성 비용이 많이 드는 I/O 바운드 작업, 데이터베이스 연결 모듈에 많이 사용합니다.

하지만 의존성이 높아진다는 단점이 있습니다. 의존성이 높아지면 모듈의 재사용성이 떨어지고 유지보수가 어려워집니다.

💡 의존성
종속성이라고도 하며 코드에서 두 모듈(클래스)간의 연결 혹은 관계를 말합니다. A가 B에 의존성이 있다는 것(A → B)은 B의 변경 사항에 대해 A 또한 변해야 된다는 것을 의미합니다.

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

const obj = {
	a: 27
}

const obj2 = {
	a: 27
}

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

리터럴 {} 또는 new Object로 객체를 생성하는 것 자체만으로 싱글톤 패턴을 구현할 수 있습니다. 혹은 직접 싱글톤 패턴을 구현해본다면

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

Singleton.instance가 없다면 만들고, 있다면 그 인스턴스를 리턴합니다. 따라서 하나의 인스턴스를 여러 모듈이 공유해서 사용할 수 있습니다.

데이터베이스 연결 모듈

const URL = '...'
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

데이터베이스에 query를 보낼 때마다 연결을 새로 하면 비용이 너무 많이 들기 때문에 싱글톤 패턴을 사용합니다. 이렇게 하게 되면 데이터베이스 연결에 관한 인스턴스 생성 비용을 아낄 수 있습니다.

자바에서의 싱글톤 패턴

자바에서는 중첩 클래스를 이용해서 만드는 방법이 가장 대중적입니다.
싱글톤 패턴을 사용할 때, 단일 스레드 환경이라면 별 문제가 없지만 멀티스레드 환경에서는 동시성 문제가 발생할 가능성이 있습니다. 따라서 여러 가지 해결 방법이 있고 그중 하나를 소개하겠습니다.

class Singleton {
    private static class SingleInstanceHolder {
        private static final Singleton INSTANCE = new Singleton();
    }
    public static Singleton getInstance() {
        return SingleInstanceHolder.INSTANCE;
    }
}

위 코드는 LazyHolder Singleton 패턴입니다.static + 중첩 클래스(홀더)로 Singleton 클래스가 최초 클래스 로딩 단계에서 로드되더라도 SingleInstanceHolder 클래스에 대한 변수를 가지고 있지 않아 함께 초기화되지 않습니다. 그렇기 때문에 getInstance()가 호출될 때, SingleInstanceHolder 클래스가 로딩되며 인스턴스를 생성하게 됩니다.

이러한 방법을 사용하게 되면 스레드 세이프(thread safety)를 보장하기 때문에 synchronized, volatile 키워드 없이 동시성 문제를 해결할 수 있습니다.

mongoose의 싱글톤 패턴

mongoose는 Node.js에서 MongoDB 데이터베이스를 연결할 때 쓰는 모듈입니다. 이때 connect()라는 함수가 싱글톤 인스턴스를 반환합니다. 이건 connect() 함수를 구현할 때 싱글톤 패턴을 사용했다는 뜻이죠!

MySQL의 싱글톤 패턴

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

// 메인 모듈
const mysql = require('mysql')
const pool = mysql.createPool({
  connectionLimit: 10,
  host: '...',
  user: '...',
  password: '...',
  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)
})

이런 식으로 메인 모듈에서 데이터베이스 연결에 관한 인스턴스를 정의하고 다른 모듈 A, B에서 해당 인스턴스를 기반으로 쿼리를 보내는 형식으로 씁니다.

싱글톤 패턴의 단점

싱글톤 패턴의 또 다른 단점은 TDD(Test Driven Development)를 할 때 걸림돌이 된다는 것입니다.

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

하지만 싱글톤 패턴은 하나의 인스턴스를 기반으로 하기 때문에 각 테스트마다 독립적인 인스턴스를 만들기가 어렵습니다.

그리고 무조건 하나의 인스턴스를 생성하는 작업으로 시작되어야 하기 때문에 순서를 완전히 마음대로 할 수 없습니다.

이러한 점들로 인해 순서에 따라 인스턴스에 변화가 있다면 인스턴스가 독립적이지 않기 때문에 테스트 결과가 달라질 수 있습니다.

의존성 주입

앞서 싱글톤 패턴은 모듈 간의 결합을 강하게 만들어 의존성이 높아진다는 단점이 있었습니다. 이를 해결할 방법이 의존성 주입(DI, Dependency Injection)입니다.

의존성 주입은 메인 모듈(main module)이 '직접' 다른 하위 모듈에 대한 의존성을 주기보다는 중간에 의존성 주입자(dependency injector)가 이 부분을 가로채 메인 모듈이 '간접'적으로 의존성을 주입하는 방식입니다.

이를 통해 상위 모듈은 하위 모듈에 대한 의존성이 떨어지게 됩니다.

의존성 주입의 장점

모듈들을 쉽게 교체할 수 있는 구조가 되어 테스팅이 쉽고 마이그레이션하기 수월합니다.
구현할 때 추상화 레이어를 넣고 이를 기반으로 구현체를 넣어 주기 때문에 애플리케이션 의존성 방향이 일관되고, 애플리케이션을 쉽게 추론할 수 있으며, 모듈 간의 관계가 조금 더 명확해집니다.

의존성 주입의 단점

모듈들이 더욱더 분리되므로 cost와 복잡성이 증가합니다.
의존성 주입 자체가 런타임에 일어나기 때문에 컴파일할 때 의존성 주입에 관한 에러를 잡기 어려워집니다.

의존성 주입 원칙

의존성 주입은 다음 2가지 의존성 주입 원칙을 지키며 만들어야 합니다.

상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 합니다.

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

1.1.2 팩토리 패턴(Factory Pattern)

객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴

상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴

장점

상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가집니다.
상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 됩니다.
객체 생성 로직이 따로 분리되어 있기 때문에 유지 보수성이 증가됩니다.

1.1.3 전략 패턴(Strategy Pattern)

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

passport의 전략 패턴

passport는 Node.js에서 인증 모듈을 구현할 때 쓰는 미들웨어 라이브러리로, 전략 패턴을 활용한 라이브러리입니다.

LocalStrategy 전략, OAuth 전략 등을 지원하며 여러 가지 '전략'을 기반으로 인증할 수 있게 합니다. passport.use()라는 메서드에 '전략'을 매개변수로 넣어서 로직을 수행합니다.

1.1.4 옵저버 패턴

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

⁕ 주체 : 객체의 상태 변화를 보고 있는 관찰자
⁕ 옵저버들 : 객체의 상태 변화에 따라 '추가 변화 사항'이 생기는 객체들

주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 합니다.

옵저버 패턴를 활용한 서비스로는 트위터가 있고, 주로 이벤트 기반 시스템, MVC 패턴에 사용합니다.

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

자바스크립트에선 프록시 객체를 통해 구현할 수 있습니다.

프록시 객체

어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체로, target, handler라는 두 개의 매개변수를 가집니다.

⁕ target : 프록시할 대상
⁕ handler : target 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수

예시를 봐봅시다.

const handler = {
  get: function (target, name) {
    return name === 'name' ? `${target.a} ${target.b}` : target[name]
  },
}
const p = new Proxy({ a: 'Hello', b: 'World!' }, handler)
console.log(p.name) // Hello World!

name 속성에 접근하려는 작업이 발생하자 이를 가로채 handler 함수를 호출하여 로직을 수행하게 함을 볼 수 있습니다.

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

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 = {
    "안녕" : "hi"
} 
const b = createReactiveObject(a, console.log)
b.안녕 = "hi"
b.안녕 = "hello"
// 안녕이 [hi] >> [hello] 로 변경되었습니다

프록시 객체의

get() 함수 : 속성과 함수에 대한 접근
has() 함수 : in 연산자의 사용
set() 함수 : 속성에 대한 접근

을 가로챕니다.

Vue.js 3.0의 옵저버 패턴

Vue.js 3.0에서 ref, reactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데, 이는 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것입니다.

1.1.5 프록시 패턴과 프록시 서버

프록시 패턴(Proxy Pattern)
대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 패턴

이를 통해 객체의 속성, 변환 등을 보완하며, 보안, 데이터 검증, 캐싱, 로깅에 사용합니다. 또한 이는 프록시 객체, 프록시 서버로도 활용됩니다.

프록시 서버

서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램

프록시 서버로 쓰는 nginx

nginx는 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버입니다.

주로 Node.js 서버 앞단의 프록시 서버로 활용되어 익명 사용자가 직접적으로 서버에 접근하는 것을 차단하고, 보안을 강화합니다.

그림처럼 nginx를 프록시 서버로 둬서 실제 포트를 숨길 수 있고 정적 자원을 gzip 압축하거나, 메인 서버 앞단에서의 로깅을 할 수 있습니다.

프록시 서버로 쓰는 CloudFlare

CloudFlare는 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스입니다.

💡 CDN(Content Delivery Network)
콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템, 지리적으로 분산된 서버들을 연결하는 네트워크
서버가 멀리 있을 때 응답 시간을 줄이기 위해 캐시 서버를 사용하여 유저가 요청을 보냈을 때, CDN에 캐시된 데이터로로 빠르게 응답을 받을 수 있습니다.

그림처럼 CloudFlare는 웹 서버 앞단에 프록시 서버로 두어 DDOS 공격 방어나 HTTPS 구축에 쓰입니다. 또한 의심스러운 트래픽인지 먼저 판단해 이를 일정 부분 막아주는 역할도 합니다.

DDOS 공격 방어

DDOS는 짦은 기간 동안 네트워크에 많은 요청을 보내 네트워크를 마비시켜 웹 사이트의 가용성을 방해하는 사이버 공격 유형입니다.

CloudFlare가 의심스러운 트래픽, 특히 시스템을 통해 오는 트래픽을 자동으로 차단해주기 때문에 DDOS 공격을 방어할 수 있습니다.

HTTPS 구축

서버에서 HTTPS를 구축할 때 인증서를 기반으로 구축할 수도 있지만 CloudFlare를 사용하면 별도의 인증서 설치 없이 Cloudflare를 통해 자체적으로 발급해주는 인증서로 좀 더 손쉽게 HTTPS를 구축할 수 있습니다.

CORS와 프론트엔드의 프록시 서버

CORS(Cross-Origin-Resource-Sharing)
서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘

⁕ 오리진 : 프로토콜과 호스트 이름, 포트의 조합

예를 들어 프론트엔드에서 127.0.0.1:3000으로 테스팅 하는데, 백엔드 서버는 127.0.0.1:12010이라면 포트 번호가 다르기 때문에 CORS 에러가 발생합니다.

이를 해결하는 방법은 2가지 입니다.

프론트엔드 프록시 서버
프록시 서버를 둬서 프론트엔드 서버에서 요청되는 오리진의 포트 번호를 바꿔주는 방법입니다. 이는 CORS 에러를 해결은 물론이며 다양한 API 서버와의 통신도 매끄럽게 해줍니다.
백엔드에서 CORS 설정
CORS와 Origin을 설정하여 white list에 있는 origin만 CORS를 허용하도록 설정할 수 있습니다.

1.1.6 이터레이터 패턴(Iterator Pattern)

이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴

이를 통해 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터로 순회가 가능합니다.

자바스트립트에서는 for of라는 이터레이터 프로토콜을 통해 순회가 가능합니다.

1.1.7 노출모듈 패턴(Revealing Module Pattern)

즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴

자바스크립트는 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행됩니다. 따라서 노출모듈 패턴을 통해 접근 제어자를 구현하기도 합니다.

1.1.8 MVC 패턴

모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴

애플리케이션의 구성 요소를 세 가지 역할로 구분하여 각각의 구성 요소에만 집중해서 개발할 수 있습니다.

재사용성과 확장성이 용이하다는 장점이 있지만 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점이 있습니다.

모델(Model)

애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻합니다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신합니다.

뷰(View)

사용자 인터페이스 요소, 즉 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻합니다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며, 단순히 화면에 표시하는 정보만 가지고 있어야 합니다. 변경이 일어나면 컨트롤러에 이를 전달해야 합니다.

컨트롤러(Controller)

하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당합니다. 또한 모델과 뷰의 생명주기를 관리하며, 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려줍니다.

MVC 패턴을 활용한 대표적인 예로는 Spring이 있습니다.

스프링(Spring)

MVC 패턴을 이용한 대표적인 프레임워크로 자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크

MVC 패턴이 적용된 부분은 디스패처 서블릿의 요청 처리 과정입니다. 그 과정은 다음과 같습니다.

요청이 들어오면
디스패처 서블릿은 핸들러 매핑을 통해 요청을 처리할 컨트롤러를 결정(@RequestMapping 참고)
컨트롤러는 비즈니스 로직을 처리, DB에서 데이터를 가져오고 이를 모델에 전달
모델과 ViewResolver가 함께 뷰를 생성, 결정
사용자에게 뷰 전달

컨트롤러가 모델과 뷰의 다리 역할을 하고 있으므로 MVC 패턴을 사용하고 있음을 알 수 있습니다.

1.1.9 MVP 패턴

MVC 패턴으로부터 파생되었으며 C에 해당하는 컨트롤러가 프레젠터(Presenter)로 교체된 패턴

뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴입니다.

1.1.10 MVVM 패턴

MVC 패턴의 C에 해당하는 컨트롤러가 뷰모델(View Model)로 바뀐 패턴으로 커맨드와 데이터 바인딩을 가지는 것이 특징입니다.

⁕ 뷰모델 : 뷰를 더 추상화한 계층
⁕ 커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법
⁕ 데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법, 뷰모델을 변경하면 뷰가 변경됩니다.

장점

뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원합니다.
UI를 별도의 코드 수정 없이 재사용할 수 있습니다.
단위 테스팅하기 쉽습니다.

MVVM 패턴의 예 : 뷰

watch와 computed 등으로 쉽게 반응형적인 값들을 구축할 수 있습니다. 또한 함수를 사용하지 않고 값의 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있습니다. 재사용 가능한 컴포넌트를 기반으로 UI를 구축할 수 있습니다.

참고

면접을 위한 CS전공지식노트
멀티스레드 환경에서 Thread Safe 하게 Singleton Pattern 사용하기
의존성(Dependency)과 의존성 주입(DI)

unzinzanda

안녕하세요 :)

다음 포스트

[면접을 위한 CS 전공지식노트] 1장 디자인 패턴과 프로그래밍 패러다임 (1)