# 강남_N_Day08 리뷰 레포트

### 참석자

- 김윤후, 나민지, 나영균, 조애리

## 1. 코드 동작 이해

가장 많은 체크포인트를 구현한 사람의 코드의 동작 원리를 
이해하는 과정에서 발생한 건설적인 대화를 기록, 정리합니다.

- 객체 생성으로 function 객체를 생성하고 상속하면 prototype에 상속한 객체의 메서드들이 존재한다. 그 부모객체의 메소드를 호출할때 인터프리터가 __proto__에서 해당 메서드를 찾아서 호출하는 방식을 사용한다.

- __proto__에서 찾을 수 없다면 __proto__의 __proto__에서 찾는 식으로 prototype들은 연결되어있다. 이를 prototype chaining이라고 부른다. 마지막엔 Object의 prototype으로 가서 찾으며 찾는 과정은 가장 가까운 prototype에서 찾는다.

- 옵저버 패턴은 상태를 유지하는 객체가 옵저버들을 자신의 안에서 구독형식으로 유지하고 상태가 변경되었을 시 상태유지 객체는 그 상태값 변화에 해당하는 옵저버들을 하나씩 불러 그에 맞는 메소드를 호출하게 한다.

- 옵저버 패턴의 이해
- observable객체

        1. 구독자(목록) 
        2. 데이터 변경시 호출할 notify
        3. 구독자를 등록하는 subscribe함수 필요

- 구독자 개체

        4. observerble객체
        5. 구독신청하는 함수(3 호출)
        6. 데이터 받아 실제로 동작하는 함수 필요
        *생성자에서 Observerble객체에 데이터를 운용하고싶은 함수를 등록해 사용

//구독자 개체 생성자 : 상태유지체 인스턴스를 컨스트럭터안에서 구독하게 한다.
constructor (TodoMedel) {
    this.TodoMedel=TodoMedel;
    this.TodoMedel.add(this.update);//구독신청
 }

## 2. 코드 동작 개선

- 다함께 하나 이상의 체크포인트를 구현하기 위해 시도했던 문제 해결의 과정을 정리합니다.
- 학습정리의 `스스로 확인할 사항`에 대해 고민한 내용을 공유하고 
서로의 코드를 더 발전시킬 수 있는 형태로 내용을 기록합니다.

#### 나영균
- observer패턴을 이해하려고 다른 observer패턴을 많이 찾아서 읽어보았다.
- observer와 observable의 역할을 명확히 파악하였다.
- 상속안에서 호출을 잘 이해하도록 노력하였다.
- prototype으로 객체를 상속할때 protytype과 constructor와 protytype체이닝에 대해서 조금더 이해를 한 후 쓸모없는 코드 구현을 줄여야 겠다. (필요하지 않은 구현을 집어넣었다.)
- prototype으로 메소드를 구현할때 하나하나 구현하여 prototype에 넣어주는 것보다 한번에 객체로 만들어 대체하는 것이 아니라 넣는 방식으로 구현하였어도 좋았을 것이다.
- 다른 부분의 try-catch는 잘 구현했지만 지연 부분의 에러를 try-catch로 잡는 부분이 미흡했다. 비동기와 try-catch를 조금더 공부해야겠다.

#### 조애리
- observer 객체를 생성해서 상속하면 observerable의 변수 배열이 프로토타입에 포함되어 공유될수 있으므로 안전성을 보장할 수 없음, 개선 방법 공부할 것

- observer에서 알림을 받고 실행하는 함수가 하나로 정해져 있으므로 배열에 push하지 않아도 됨

//이전 코드
    constructor() {
        this.observers = [];
    }
    subscribe(func) {
        this.observers.push(func);
    }
    notify(data) {
        this.observers.forEach(observer => observer(data));
    }

///개선 코드
    constructor() {
        this.observers;
    }
    subscribe(func) {
        this.observers=func;
    }
    notify(data) {
        this.observers(data);
    }

#### 나민지
- 옵저버에 대한 이해를 바탕으로 서버의 데이터를 실시간으로 변경할 수 있을 것이다
- `__proto__`, Object.create를 활용한 상속에 대해 익힐 필요가 있다.
- 리펙토링을 통해 더 간결한 코드로 개선해야한다.
#### 김윤후
- 데이터가 필요할때 마다 서버에서 데이터를 받아오고 서버에 수정된 데이터를 보내는 방식으로 데이터 처리를 구성했는데 이는 성능낭비가 너무 심했다. 로컬에서 데이터를 저장하고 있었다면 데이터를 계속 새로 받아올 필요가 없었을 것이다.
- async-await 함수의 반환값은 프로미스이다. 호출한 함수에 프로미스를 반환하기 위해 프로미스 객체를 만들고 콜백함수에서 async await을 또 사용해서 반환했는데 그냥 async 함수만 반환했어도 상관없었던 것 같다.

## 3. Consideration

### 스스로 확인할 사항

- 주어진 요구사항을 꼼꼼하게 체크하고, OOP와 모듈단위로 나눈방식의 개발방법의 장점이 무엇인지 고민한다.
- 더 개선할 부분은 없는지, 더 좋은 방식의 패턴이 없을지 고민해본다.

- 모듈화 프로그래밍 장점
- 프로그램의 효율적인 관리 및 성능향상
- 복잡도 감소로 프로그램 개발의 용이성, 시험, 통합 용이성
- 프로그램 재사용을 통한 유지보수 용이성
- 오류 파급효과 최소화
- 개발 노력/비용 최소화
- MVC패턴
- 모델 : 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보
- 뷰 : 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 옴
- 컨트롤러 : 모델에 명령을 보냄으로써 모델의 상태를 변경
- MVC의 장점
- 유연하고 확장하기 쉽다
- 디자이너와 개발자의 협업이 용이하다.
- 유지보수 비용을 절감할 수 있다.
- 단점
- 기본기능 설계를 위해 클래스들이 많이 필요하기 때문에 복잡할 수 있다.
- 설계시간이 오래 걸리고 숙련된 개발자가 필요하다.
- Model과 View의 의존성이 완벽히 분리 할 수 없기 때문에 패턴이 모호해질 수 있고 변형이 올 수 있다.

- MVP 패턴 (model view presenter)
- presenter이 model과 view에 데이터를 전달하고 model에서 가공된 데이터를 받는다.
- MVC모델에서 문제가 되었던 model과 view 사이의 의존성을 해결함.

### 다같이 확인할 사항
- undo/redo 기능을 제공하고 싶다. 특정 사람의 코드를 골라서, 이 기능을 추가하기 위한 전략을 세워보자.
- 나영균님의 코드에는 html을 하나의 메세지만 넣는것이 아니라 전체 메세지를 넣기위해 state말고도 logs라는 property를 유지하고있다.
- 이런식으로 logs라는 property를 유지하면 쉽게 undo/redo를 구현할 수 있을 것이다.
- logs를 이용해서 바로직전의 행위를 바로 알 수 있으므로 undo를 구현하는 것은 아주 쉽다.
- redo를 구현하기 위해서 다른 state인 undid라는 property를 생성하여 undo가 실행될때 undid에 undo한 데이터를 넣어 유지하고 redo를 실행할때 undid에서 가져와 실행하는 전략을 사용하면 좋을 것이다.

- html파일생성이 아닌 markdown포맷을 생성하는 view클래스를 만든다고 가정한다. Obsever패턴을 어떻게 적용할 수 있을까? Observer패턴의 장점은 무엇일까?
- Observer패턴의 장점은 한 객체 상태변화에 대한 동작을 구현하고 싶다면 observerble을 상속하는 객체를 만들어 동작할 객체에 구독을 시키기만 한다면 상태변화에 자동으로 대응하게 할 수 있다는 것이다. 상호의존성을 최소화해 변화에 유연하다.
- markdown을 생성하는 observer를 만들고 TodoModel 인스턴스를 constructor로 불러와 addObserver로 this(markdownobserver)하여 구독시키면 된다.

#### 참고 자료
###### mvc패턴 장단점: https://server-engineer.tistory.com/167
###### prtotype의 이해: https://webclub.tistory.com/509