# 서울숲_T_Day08 리뷰 레포트

### 참석자

- 이창권, 손상렬, 서보현

## 1. 코드 동작 이해
- OOP
- 객체지향 프로그래밍이란 캡슐화, 다형성, 상속을 이용하여 코드 재사용을 증가시키고, 유지보수를 감소시키는 장점을 얻기 위해서 객체들을 연결시켜 프로그래밍 하는 기법.
- 객체는 속성(property)과 행위(method)를 가짐.
- OOP의 특징
- 추상화 : 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념, 객체들의 공통된 특징을 파악해 정의해 놓은 설계 기법
- 캡슐화 : 불필요한 정보를 감출 수 있기 때문에, 정보은닉을 할 수 있다는 특징을 가짐.
- 상속 : 상속 관계에 있는 두 클래스에 대해, 부모 클래스가 자손 클래스에게 속성을 물려주는 것
- 다형성 : 같은 형태이지만 다른 기능을 하는 것.
- 자바스크립트에서는?
- 모든 객체는 **프로토타입**이라는 다른 객체를 가리키는 내부 링크를 가지고 있다. 프로토 타입을 통해 직접 객체를 연결할 수 있는 데 이를 프로토타입 체인이라 하고, 이를 통해 상속을 구현할 수 있음.
- 자바스크립트에서의 객체 생성 방법
1. object literal
2. (ES2015) class
3. Object() 생성자 함수
4. constructor pattern

            // object literal
            var obj1 = {};
            obj1.name = 'Lee';
            
        
            // Object() 생성자 함수
            var obj2 = new Object();
            obj2.name = 'Lee';
            
            // 생성자 함수
            function F() {}
            var obj3 = new F();
            obj3.name = 'Lee';
            
            // (ES2015) class
            const health = class {
                constructor(...)
                ...
            }

- prototype chain과 method 정의

            function person(name){
                this.name = name;
            }
            person.prototype.setName = function(name){
            this.name = name;
            }
            Person.prototype.getName = function () {
              return this.name;
            };
            var me  = new Person('Lee');
            var you = new Person('Kim');
            var him = new Person('choi');

            console.log(Person.prototype);
            // Person { setName: [Function], getName: [Function] }

            console.log(me);  // Person { name: 'Lee' }
            console.log(you); // Person { name: 'Kim' }
            console.log(him); // Person { name: 'choi' }

- MVC 모델
- 모델-뷰-컨트롤러(Model–View–Controller, MVC)는 소프트웨어 공학에서 사용되는 __소프트웨어 디자인 패턴__ 이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.
- 모델 : 애플리케이션의 정보(데이터)를 나타낸다
- 뷰 : 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타낸다.
- 컨트롤러 : 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.
- 참고 : https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC

- 옵저버 패턴
- observer pattern은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴
- 각각의 옵저버는 notify 함수를 구현함으로써 이벤트가 발생했을 때 처리할 각자의 동작을 정의해야 한다.
- 주체에는 일반적으로 등록(register), 제거(unregister) 메서드가 존재 임시로 작동을 멈추거나 재개하는 메서드를 이용해 이벤트가 계속해서 있을 때 홍수같이 발생하는 요청을 제어할 수도 있다.
- 옵저버 패턴이 많이 쓰인 시스템에서는 순환 실행을 막는 메카니즘이 필요
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Observer.svg/854px-Observer.svg.png" style="width:500px;height:300px">

- Express 서버
- Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크
- Node.js로 서버 개발 시, 미들웨어 구조를 이용해 손쉽게 개발하게 해준다.
-

        var express = require('express');
        var app = express();

        app.get('/', function (req, res) {
          res.send('Hello World!');
        });

        app.listen(3000);

- async/await
- ES7부터 도입됐으며, Promise를 더 편하게 쓸 수 있는 문법이다.
- 활용 예시 :

        async function f() {
          try {
            let response = await fetch('/no-user-here');
            let user = await response.json();
          } catch(err) {
            alert(err);
          }
        }

        f();

-
- 참고 : https://javascript.info/async-await

## 2. 코드 동작 개선
- 주어진 요구사항을 꼼꼼하게 체크하고, OOP와 모듈단위로 나눈방식의 개발방법의 장점이 무엇인지 고민한다.
- 완전히 독립된 객체들을 만들고 그 객체를 넘겨받아 이용해주는 것이므로, 유지 보수에 장점이 있고, OOP의 주요 특징인 다형성 상속등으로 코드 재사용성이 높다.
- 예를들어 다른 상황에서 옵저버 패턴을 사용해주고 싶을 때 Observable.js를 사용해서 기능들을 상속받아 이용해줄 수 있을 것이다.

- 더 개선할 부분은 없는지, 더 좋은 방식의 패턴이 없을지 고민해본다.
- 이전의 함수형 프로그래밍 같은 경우, 순수한 함수를 작성해서 공유된 사태와 변경가능한 데이터 및 부작용을 피하면서 코드 작성을 하였었다. 이러한 점에서는 이번 과제로 진행한 상태가 공유되는 객체지향과 대조된다 생각한다.

- 디자인 패턴 중 대표적인 `GoF 패턴`들에 대해서 알아보았고 더 나을지는 모르겠지만 이 중 `Command pattern`을 활용해줄 수 있을 것 같다는 생각을 했다.

- command pattern
- 요청을 객체로 갭슐화함으로써 서로 다른 요청으로 클라이언트를 파라미터화하고, 요청을 저장하거나 기록을 남겨서 오퍼레이션의 취소도 가능하게 한다.
- 또, 실행될 기능을 캡슐화함으로써 주어진 여러 기능을 실행할 수 있는 재사용성이 높은 클래스를 설계하는 패턴이다.

<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Command_pattern.svg/2880px-Command_pattern.svg.png">

- 이를테면 새로운 기능을 구현하려고 할때, TodoModel을 변경하지 않고 TodoModel에 새로운 기능 자체를 전달하는 식으로 디자인 한다면 TodoModel의 재사용성을 증가시키고 전체적인 확장성도 증가시킬 수 있을 것 같다.

- 참고
- https://gmlwjd9405.github.io/2018/07/06/design-pattern.html
- https://gmlwjd9405.github.io/2018/07/07/command-pattern.html
- https://gone-sw.tistory.com/4
- https://en.wikipedia.org/wiki/Command_pattern

## 3. Consideration
- undo/redo 기능을 제공하고 싶다. 특정 사람의 코드를 골라서, 이 기능을 추가하기 위한 전략을 세워보자.

- undo 같은 경우, 가장 최근의 진행 과정을 저장하는 배열을 따로 TodoModel 객체의 property로 두어, undo 명령어가 들어올시 이를 참고하는 식으로 구현할 수 있을 것 같다.
- redo 같은 경우, undo와 마찬가지로 진행과정을 저장하는 배열에서 가장 최근에 저장된 요소를 다시 수행하는 식으로 하면 가능할 것으로 사료된다.

- html파일생성이 아닌 markdown포맷을 생성하는 view클래스를 만든다고 가정한다. Obsever패턴을 어떻게 적용할 수 있을까? Observer패턴의 장점은 무엇일까?
- 기존에 있던 observer패턴 그대로에, 기존에 있던 TodoHtmlView클래스와 같이 markdown포맷을 생성하는 view클래스를 생성해 update함수만 포함하게 하면 적용이 가능하다.
- 위와 같이 Observer패턴에서는 각각의 파생 Observer에서 각자 원하는 행동을 취할 수 있으며, 변화가 생겼을 때 자신이 가지고 있는 Observers에게 notify만 해주면, 그에 따른 필요한 행위를 한번에 처리가 가능하다.
- 위와 같이 Observer 패턴을 사용해주고자하면, 자체적으로 기능을 새로 추가하지 않고 Observable 모듈을 만들어두고, 이를 상속받아 활용해주면 된다.