1주차 - CS 스터디

Posted Mar 24, 2026

By WOOJIN CHOI

13 min read

1주차 - CS 스터디

1. 디자인 패턴이란?

디자인 패턴은 소프트웨어 설계 과정에서 반복적으로 발생하는 문제를 해결하기 위해 정리된 설계 규약이다. 객체 간 관계와 역할을 구조화함으로써 코드의 재사용성과 유지보수성을 높일 수 있다.

디자인 패턴의 종류

디자인 패턴은 크게 생성패턴, 구조패턴, 행동패턴 3가지로 나누어짐

1) 생성 패턴

생성패턴은 객체 생성 방법이 들어간 디자인 패턴

싱글톤, 팩토리, 추상팩토리, 빌더, 프로토타입 패턴이 있음

2) 구조 패턴

객체, 클래스 등으로 큰 구조를 만들 때 유용한.

3) 행동 패턴

객체나 클래스 간의 알고리즘, 책임 할당에 관한 디자인 패턴

eterator, observer, strategy..

22. 라이브러리와 프레임워크의 차이

22.1 라이브러리

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

예) axios

22.2 프레임워크

공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 말한다. 폴더명, 파일명 등에 대한 규칙이 있으며 라이브러리에 비해 좀 더 엄격한 특징을 지닌다.

예) vue.js , Django

23. 싱글톤 패턴

싱글톤 패턴(Singleton pattern)이란?

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

하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만 그렇게 하지 않고, 하나의 클래스를 기반으로 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며 보통 데이터베이스 연결 모듈에 많이 사용됨.

왜 사용하는 걸까요?

보통 클래스를 만들면 필요할 때마다 new 연산자로 인스턴스를 여러 개 만들 수 있다. 하지만, 자원관리, 상태 공유 등의 상황에서는 인스턴스가 여러 개면 오히려 문제가 발생할 수 있다.

자원관리
- 데이터베이스 연결 객체(Connection Pool)
- 로그 기록 객체 (Logger)등
상태 공유
- 설정 정보(Config) 처럼 프로그램 전체에서 동일한 데이터를 참조해야할 때 유용

싱글톤 패턴의 특징

private 생성자 : 클래스 외부에서 new 를 통해 인스턴스를 생성하지 못하도록 막는다.

장점

하나의 인스턴스를 기반으로 해당 인스턴스를 다른 모듈들이 공유하여 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어듦

단점

의존성이 높아짐
TDD(Test Driven Development)를 할 때 걸림돌이 됨.

멀티스레드 환경에서 동시성 문제 방지

synchronized나 double-checked locking등을 사용

코드 예시 (JS)

        
      
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 

24–25. 싱글톤 패턴을 구현하는 7가지 방법 #1,2

1. 단순한 메서드 호출

싱글톤 패턴 생성 여부 확인
- 싱글톤이 없으면 → 새로 생성
- 새로 만들고 있다면 → 인스턴스 반환

        
      
public class Singleton {
    private static Singleton instance;

    private Singleton() {
        
    }

    public static Singleton getInstance() {
        if (instance == null) {  
            instance = new Singleton();
        }
        return instance;
    }
}

해당 코드의 문제점

원자성 결여

2. synchronized

3. 정적 멤버(즉시 초기화, Eager Initialization)

4. 정적 블록

5. 정적 멤버와 Lazy Holder(중첩 클래스)

6. 이중 확인 잠금(DCL)

7. Enum

26. 팩토리 패턴

팩토리 패턴이란?

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

상위 클래스에서는 객체 생성방식에 대해 알 필요가 없어져 유연성을 갖게 되며 객체 생성 로직은 하위클래스에서만 관리 되기 때문에 유지보수성이 증가

27. 이터레이터(iterator) 패턴

이터레이터 패턴이란?

이터레이터(iterator)를 사용하여 컨테이너의 요소에 접근하는 디자인 패턴이다. 각기 다른 자료구조들을 똑같은 인터페이스로 순회를 쉽게할 수 있다는 장점이 있다.

*컨테이너란 동일한 요소들을 담아놓는 집합을 말한다. 배열과 맵이 있다.

28. DI와 DIP

의존성 주입(DI)과 의존 관계역전원칙(DIP)

의존성 주입(Dependency Injection)이란?

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

의존 관계역전원칙(DIP)이란?

DIP; Dependency Inversion Principle

자신보다 변하기 쉬운 것에 의존하던 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것의 변화에 영향받지 않게 하는 원칙을 말합니다.

이는 2가지의 규칙을 지키는 상태를 의미함.

상위 모듈은 하위 모듈에 의존해서는 안됨
추상화는 세부사항에 의존해서는 안됨

의존성 주입의 장점

외부에서 모듈을 생성하여 모듈을 쉽게 교체할 수 있는 구조가 됨.
단위 테스팅과 마이그레이션이 쉬워짐
애플리케이션 의존성 방향이 좀 더 일관되어 코드를 추론하기 쉬워짐

의존성 주입의 단점

결국에는 모듈이 더 생기게 되므로 복잡도가 증가하게 됨
종속성 주입 자체가 컴파일을 할 때가 아닌 런타임 시에 일어나기 때문에 컴파일할 때 종속성 주입에 관한 에러를 잡기가 어려워짐

29. 전략 패턴

전략패턴이란?

전략(Strategy)라고 부르는 ‘캡슐화한 알고리즘’을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 디자인 패턴이다.

30. 옵저버 패턴

옵저버 패턴이란?

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

31. Proxy 패턴

프록시패턴이란?

객체가 어떤 대상 객체에 접근하기 전, 그 접근에 대한 흐름을 가로채서 해당 접근을 필더링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴이다.

프록시 서버 예시

Cloud Flare

32. MVC / MVP / MVVM 패턴

1) MVC 패턴

MVC패턴은 Model, View, Controller로 이루어진 디자인 패턴

모델(Model)

모델은 애플리케이션의 데이터인 데이터베이스, 상수, 변수등을 의미

뷰에서 데이터를 생성하거나 수정할 때 컨트롤러를 통해 모델이 생성 또는 업데이트 됨.

뷰(View)

뷰(view)는 inputbox, checkbox, textarea등 사용자 인터페이스 요소를 나타내며 모델을 기반으로 사용자가 볼 수 있는 화면을 뜻함.

컨트롤러(Controller)

컨트롤러(Controller)는 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리역할을 하며 이벤트등 메인 로직을 담당함.

MVC 패턴의 장점

애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있음
재사용성과 확장성이 용이하다는 장점

MVC 패턴의 단점

애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점 존재

폭포수 효과
- MVC패턴은 규모가 커질 수록 Model과 View가 서로를 복잡하게 참조하는 양방향 데이터 흐름을 갖게됨.
- 예시) 페이스북의 Markseen

2) MVP 패턴

3) MVVM 패턴

대표적인 프레임워크 뷰(Vue.js)

33. Flux 패턴

단방향을 가지기 때문에 일관성이 증가함.

일관성이 증가하기 때문에 테스팅이 쉬워짐

Flux의 4가지 핵심 요소

Action
- 무엇이 일어날지 정의하는 객체
- 사용자의 이벤트 처리
  - 마우스 클릭, 스크롤 등
Dispatcher
- 어떤 action을 관리하는 객체
- 모든 action을 받아서 Store에 저장하는 중앙 통제실
Store
- 애플리케이션의 상태와 이를 변경하는 로직을 담고 있음
- Dispatcher를 통해서만 상태 변경이 가능함.
View
- Store에서 데이터를 가져와 화면에 렌더링하고, 사용자 입력이 들어오면 새로운 Action을 생성함

Flux 패턴이 적용된 Redux

This post is licensed under CC BY 4.0 by the author.