# 집합

![](https://github.com/sungguenja/studying/blob/master/do%20math/oiler.png?raw=true)

> 1. 집합의 뜻과 부분집합
> 2. 집합의 연산
> 3. 유한집합의 원소의 개수

## 1. 집합의 뜻과 부분 집합

1. 집합과 원소
   1. 우리의 직관 또는 사고의 대상이 되는 것 중에서 확정되어 있으며 또 서로 구별할 수 있는 것의 모임 전체를 한 덩어리로 생각한 것을 `집합`이라고 한다.
   2. 집합을 구성하고 있는 개개의 대상을 그 집합의 `원소` 또는 `원` 이라 한다.
   3. a가 집합 S의 원소일 때, `a는 S에 속한다`고 말하고, `a ∈ S`로 나타낸다
   4. 아닌 경우에는 `a ∈ S`
   5. 원소가 없는 것은 공집합으로 `∅` 또는 `{}` 로 표시한다
2. 집합의 표시법
   1. 원소나열법: `P = {a, b, c, d, ...}`
   2. 조건제시법: `S = {x | f(x)}`
3. 집합의 포함관계
   1. 집합 A의 모든 원소가 집합 B에 속할 떄,
      1. 즉, 임의의 x에 대하여 `x ∈ A 이면 x ∈ B 이다.`
   2. 이를 A를 B의 부분집합이라 하며 `A ⊂ B`로 나타낸다.
   3. `A ⊂ B` 이며 `B ⊂ A`일 때 A와 B는 서로 같다 또는 상등이라고 한다
   4. `A ⊂ B` 이며 `A != B`이면 A는 B의 진부분집합이라 한다

## 2. 집합의 연산

1. 집합에서의 연산
   1. 합집합
      - ![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/SetUnion.svg/250px-SetUnion.svg.png)
   2. 교집합
      - ![](https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/SetIntersection.svg/220px-SetIntersection.svg.png)
   3. 전체집합과 여집합
      - ![](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/SetComplement.svg/200px-SetComplement.svg.png)
   4. 차집합
      - ![](https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/SetDifferenceB.svg/200px-SetDifferenceB.svg.png)
2. 연산법칙
   1. 교환법칙
   2. 결합법칙
   3. 분배법칙
   4. 흡수법칙
   5. 드 모르간의 법칙
   - ![](https://github.com/sungguenja/studying/blob/master/do%20math/set_rule.png?raw=true)

## 3. 유한집합의 원소의 개수

- 유한집합 M의 원소의 개수를 n(M)으로 나타낸다
- n(A^c) = n(U) - n(A) (U는 전체 집합)
- n(A ∪ B) = n(A) + n(B) - n(A ∩ B)

## 참고자료

- 수학의 정석

집합

고등 수학

수학

# 옵저버 패턴

![](https://github.com/sungguenja/studying/blob/master/book%20review%20and%20theorem/%EB%A9%B4%EC%A0%91%EC%9D%84%20%EC%9C%84%ED%95%9C%20CS%20%EC%A0%84%EA%B3%B5%EC%A7%80%EC%8B%9D%20%EB%85%B8%ED%8A%B8/observer.png?raw=true)

> 옵저버 패턴은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴입니다.

- 주체란?
  - 개체의 상태 변화를 보고 있는 관찰자
- 옵저버란?
  - 이 객체의 상태 변화에 따라 전달되는 메서드를 기반으로 '추가 변화 사항'이 생기는 객체들을 의미한다
- 옵저버 패턴을 쓰기 전에 생길 수 있는 문제
  - Customer와 Store라는 두 객체가 있다고 해보자.
  - Customer는 곧 출시한다고 알려져있는 특정 브랜드(Store)의 상품에 매우 관심이 있다
  - Customer가 모든 매장을 매일 돌아다녀볼 수 도 있다
  - Store가 모든 Customer에게 메일을 보낼 수도 있지만 관심이 없는 Customer에게는 민폐다
  - 이 때 옵저버 패턴이 도움이 될 것이다
    - Subject라 불리는 관심 상태를 가진 객체가 있다고 해보자.
    - 이 객체는 자신의 상태에 대한 변경에 대해 다른 객체에게 알리기도 한다. 이 역할을 하는 객체는 Publisher라고 부를 수 있다
    - ![](https://github.com/sungguenja/studying/blob/master/book%20review%20and%20theorem/%EB%A9%B4%EC%A0%91%EC%9D%84%20%EC%9C%84%ED%95%9C%20CS%20%EC%A0%84%EA%B3%B5%EC%A7%80%EC%8B%9D%20%EB%85%B8%ED%8A%B8/subscribe.png?raw=true)
    - Publisher에게 어떠한 이벤트가 일어날때마다 Subscriber들에게 전달되고 그들의 객체에게 특정 알람 메소드가 전달된다
- 적용할만 한 상황
  - 한 객체의 상태가 바뀔 때 이 상태를 지켜보는 것이 많으면 쓸만합니다
- 대표적인 예시
  - 트위터
    - 어떤 사람(옵저버)가 주체를 팔로우 한다.
    - 주체가 포스팅을 올리게 되면 알림이 팔로워(옵저버)에게 간다
  - MVC 패턴도 옵저버 패턴이라 할 수 있다
    - 주체라고 볼 수 있는 모델에서 변경 사항이 생긴다
    - update() 메서드로 옵저버인 뷰에게 알려준다
    - 이를 기반으로 컨트롤러 등이 작동한다
- 코드 예시

  - JS로 구성해보기

    - ```javascript
      // Observer.js
      class Observable {
        constructor() {
          this.observers = [];
        }

        subscribe(f) {
          this.observers.push(f);
        }

        unsubscribe(f) {
          this.observers = this.observers.filter(
            (subscriber) => subscriber !== f
          );
        }

        notify(data) {
          this.observers.forEach((observer) => observer(data));
        }
      }

      export default new Observable();

      // app.js
      import observable from "./Observable";

      function handleClick() {
        observable.notify("User clicked button!");
      }

      function handleToggle() {
        observable.notify("User toggled switch!");
      }

      function logger(data) {
        console.log(`${Date.now()} ${data}`);
      }

      function toastify(data) {
        toast(data, {
          position: toast.POSITION.BOTTOM_RIGHT,
          closeButton: false,
          autoClose: 2000
        });
      }


      observable.subscribe(logger);
      observable.subscribe(toastify);

      export default function App() {
        return (
          <div className="App">
            <Button variant="contained" onClick={handleClick}>
              Click me!
            </Button>
            <FormControlLabel
              control=<Switch name="" onChange={handleToggle} />
              label="Toggle me!"
            />
            <ToastContainer />
          </div>
        )
      }
      ```

  - javascript와 proxy 객체

    - ```javascript
      // proxy 객체
      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

      // 앱 실행
      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.형규 = "커플";
      // 형규가 [솔로] >> [커플] 로 변경되었습니다
      ```

  - typescript로

    - ```typescript
      /**
       * Subject interface 는 subscribers를 관리하기 위한 methods들을 정의한다
       */
      interface Subject {
        // subject에 observer를 가입시킨다
        attach(observer: Observer): void;

        // subject로부터 observer를 분리시킨다.
        detach(observer: Observer): void;

        // 모든 observer들에게 알린다.
        notify(): void;
      }

      /**
       * 중요한 상태를 가지고 있는 Subject는 observer들에게 변화가 생겼음을 알린다
       */
      class ConcreteSubject implements Subject {
        public state: number;

        /**
         * @type {Observer[]} subscribers들로 이뤄진 리스트. 실제로는 , 좀 더 종합적으로 subscriber들을 포함한다.
         */
        private observers: Observer[] = [];

        /**
         * subscription 관리 methods.
         */
        public attach(observer: Observer): void {
          const isExist = this.observers.includes(observer);
          if (isExist) {
            return console.log("Subject: Observer has been attached already.");
          }

          console.log("Subject: Attached an observer.");
          this.observers.push(observer);
        }

        public detach(observer: Observer): void {
          const observerIndex = this.observers.indexOf(observer);
          if (observerIndex === -1) {
            return console.log("Subject: Nonexistent observer.");
          }

          this.observers.splice(observerIndex, 1);
          console.log("Subject: Detached an observer.");
        }

        public notify(): void {
          console.log("Subject: Notifying observers...");
          for (const observer of this.observers) {
            observer.update(this);
          }
        }

        public someBusinessLogic(): void {
          console.log("\nSubject: I'm doing something important.");
          this.state = Math.floor(Math.random() * (10 + 1));

          console.log(`Subject: My state has just changed to: ${this.state}`);
          this.notify();
        }
      }

      /**
       * Observer interface는 subject를 사용하는 method의 업데이트를 정의해야한다.
       */
      interface Observer {
        // Receive update from subject.
        update(subject: Subject): void;
      }

      class ConcreteObserverA implements Observer {
        public update(subject: Subject): void {
          if (subject instanceof ConcreteSubject && subject.state < 3) {
            console.log("ConcreteObserverA: Reacted to the event.");
          }
        }
      }

      class ConcreteObserverB implements Observer {
        public update(subject: Subject): void {
          if (
            subject instanceof ConcreteSubject &&
            (subject.state === 0 || subject.state >= 2)
          ) {
            console.log("ConcreteObserverB: Reacted to the event.");
          }
        }
      }

      const subject = new ConcreteSubject();

      const observer1 = new ConcreteObserverA();
      subject.attach(observer1);

      const observer2 = new ConcreteObserverB();
      subject.attach(observer2);

      subject.someBusinessLogic();
      subject.someBusinessLogic();

      subject.detach(observer2);

      subject.someBusinessLogic();
      ```

  - Vue.js
    - ```typescript
      function createReactiveObject(
        target: Target,
        isReadonly: boolean,
        baseHandlers: ProxyHandler<any>,
        collectionHandlers: ProxyHandler<any>,
        proxyMap: WeakMap<Target, any>
      ) {
        if (!isObject(target)) {
          if (__DEV__) {
            console.warn(`value cannot be made reactive: ${String(target)}`);
          }
          return target;
        }
        // target is already a Proxy, return it
        // exception: calling readonly() on a reactive object
        if (
          target[ReactiveFlags.RAW] &&
          !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
        ) {
          return target;
        }
        // target already has corresponding Proxy
        const existingProxy = proxyMap.get(target);
        if (existingProxy) {
          return existingProxy;
        }
        // only a whitelist of value types can be observed
        const targetType = getTargetType(target);
        if (targetType === TargetType.INVALID) {
          return target;
        }
        const proxy = new Proxy(
          target,
          targetType === TargetType.COLLECTION
            ? collectionHandlers
            : baseHandlers
        );
        proxyMap.set(target, proxy);
        return proxy;
      }
      ```
    - 위 코드는 실제로 Vue.js 3.0의 옵저버 패턴이 담긴 코드이다
    - proxyMap이라는 프록시 객체를 사용했고, 객체 내부의 get(), set() 메서드를 사용한 것을 볼 수 있습니다.

- 장점
  - 개방/폐쇄 원칙. publisher의 코드 변경없이 subscriber의 클래스만 변경 가능하다
  - 런타임에 객체 간의 관계들을 형성할 수 있습니다
- 단점
  - 구독자들은 무작위로 알림을 받는다

## 참고

- 면접을 위한 CS 전공지식 노트
- [refactoring guru](https://refactoring.guru/design-patterns/observer)
- [patterns.dev](https://www.patterns.dev/vanilla/observer-pattern)

옵저버 패턴을 공부해봤습니다

최신 글