# 서울숲_D_Day08 리뷰레포트

### 참석자
- 김준표, 유현희, 이영훈, 최성찬

## 1. 코드 동작 이해

### 옵저버 패턴 구현 설명

//옵저버 클래스
class Observable {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  deleteObserver(observer) {
    const index = this.observers.indexOf(observer);
    this.observers.splice(index, 1);
  }

  notifyToObservers(state) {
    this.observers.forEach(observer => {
      observer.update(state);
    });
  }
}

module.exports = Observable;

//TodoModel에서 Observable 상속
TodoModel.prototype = Object.create(Observable.prototype);
//prototpye 연결로 인해 변경된 constructor를 자신의 constructor로 연결
TodoModel.prototype.constructor = TodoModel;

//data fetch가 발생할때마다 Observer 구독자에게 알림을 보내줌
TodoModel.prototype.fetch = function() {
  this.notifyToObservers(this.todoList);
  return this.todoList;
};

## 2. 코드 동작 개선
- id를 받을 때 id를 string type으로 받는데 todolist의 id는 숫자로 되어있어서 에러가 발생

function isString(param) {
    return typeof param === "string";
}

- JSON.stringfy => number object array string boolean으로 구분한뒤 전체를 String으로 반환 [Document](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

## 3. 스스로 확인할 사항
- 주어진 요구사항을 꼼꼼하게 체크하고, OOP와 모듈단위로 나눈방식의 개발방법의 장점이 무엇인지 고민한다.
- 객체지향 프로그래밍은 프로그램을 변경을 용이하게 해준다.
- 모듈단위로 나누어 개발을 할 경우 유닛테스트에 용이하다.
- 프로그램을 이해하기가 쉬워져 유지보수가 용이하다.
- 더 개선할 부분은 없는지, 더 좋은 방식의 패턴이 없을지 고민해본다.
- TodoModel이 notify할 때, 현재 데이터만 넘겨준다. (콘솔에 출력되는 내용 X, todolist 데이터 O)
- MVC패턴을 사용한다.

### MVC 패턴

- **Model**: data를 조작하는 메서드를 갖는 모듈
- **Controller**: Model의 메서드를 이용해 사용자의 요청에 맞는 data를 추출하여 View에 전달
- **View**: Controller에게 받은 data를 이용하여 적절한 UI를 사용자에게 전달

### Singleton 패턴

- 클래스의 인스턴스를 오직 하나만 유지

- JavaScript에서는 Object Literal이 싱글톤에 해당됨(즉, 유일한 객체가 생성됨)

> 예시) let obj = { }

### Observer 패턴

- 관찰자(여러명 가능)와 발행자 사이의 데이터를 동기화하는 패턴
- 각 모듈의 의존성을 관리하기 위해서 사용되기도 함

- **특징**

> 1. 모든 관찰자는 발행자가 누구인지 알고 있다. 동시에 발행자도 모든 관찰자를 기억한다.
> 2. 발행자는 새로운 데이터를 발행하고, 관찰자에게 변경에 대해 공지한다.
> 3. 공지를 받은 관찰자는 발행자에게 변경된 데이터를 받아온다.

## 4. 다같이 확인할 사항
#### 1. undo/redo 기능을 제공하고 싶다. 특정 사람의 코드를 골라서, 이 기능을 추가하기 위한 전략을 세워보자.
- 명령어가 수행될 때마다 immutable한 방식으로 데이터를 수정한다.

#### 2. html파일생성이 아닌 markdown포맷을 생성하는 view클래스를 만든다고 가정한다. Obsever패턴을 어떻게 적용할 수 있을까? Observer패턴의 장점은 무엇일까?

- **옵저버 패턴 장점**: Model의 데이터가 변경될때마다, Subscriber(구독자)가 특별한 행동없이 변경된 데이터를 확인할 수 있다.