> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/april/20210410.md).

# 20210410(토)

## 2021-04-10

### 1. 학습 날짜

* 2021-04-10

### 2. 학습 시간

* 15:00 \~ 19:000

### 3. 학습 범위 및 주제

* 바닐라 자바스크립트로 MVC 패턴으로 todo 앱 마무리

### 4. 학습 목표

* todo 앱 리팩토링(컴포넌트 분리까지는 x)

### 5. 학습 정리

* x

### 6. 상세 학습 내용

* todo 앱 리팩토링
  * 어제까지 해서 모든 기능은 다 구현했었다. 하지만 지금 몇가지 문제가 있었다.
* 문제1. view 의 render 관련 메서드가 많아도 너무 많다.
  * 컨트롤러에서 view 메서드를 호출할 때 너무 많은 종류의 메서드를 호출하고 있었다.
  * 예를 들면, 어디에서는 `this.view.renderTodo`, this.view\.renderAgain\` 등이 있다.
  * 하지만 생각해보면 어떤 메서드를 호출하던간에 view 메서드를 호출한다는 거는 보이는 렌더링 자체를 바꾼다는건데 메서드 이름은 다 통일성 없게 구현되어 있어서 보기에 너무 좋지 않았다
  * 따라서 이 문제를 해결해야 했는데, 인터넷에 있는 자료들을 보니깐 오브젝트 안에 함수들을 구현해두고, 키 값으로 메서드를 찾은다음에 실행하는 방식으로 멋들어지게 구현되어 있었다.
  * 나도 이 방법을 사용해서 구현했는데, 자바스크립트에는 스위치 문이 존재하므로 스위치문을 이용해서 구현했다.
  * 결론은 컨트롤러에서 호출하는 view의 메서드는 오직 `render` 하나 뿐이고 이 메서드 안에 인자로 커맨드와 인자를 넘겨주게 만들었다.
  * 그리고 함수 이름들도 일괄적으로 수정해줬다.
* 문제2. model과 db의 역할이 애매하다.
  * 흠... 기존에는 model 의 역할이 비즈니스 로직을 수행하는 곳이 아닌, 컨트롤러처럼 웹과 localStorage 간의 연결을 이어주는? 그런 역할을 해주고 있었다.
  * 하지만 생각해보면, SPA 라는 것은 실제 데이터를 처음 로딩할 때 모델이 갖고 있어야하고, 이 모델의 변화를 뷰 들이 listen 하고 있다가 변화를 감지했을 때 view 에 나타내주는 것이다.
  * 결론은 model 자체가 데이터를 들고 있어야 한다는 것!! 그리고 이 모델의 변화를 주고, 모델은 db에 알려주는 것이다.
  * 따라서 기존에 db 자체가 갖고 있던 모든 로직을 model 로 옮겼고, db 에는 오직 save와 delete 하는 로직만을 담았다.

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 1차적으로 바닐라 자바스크립트와 MVC 패턴을 이용해서 TODO 앱을 구현했다.
* 어제까지는 MVC 패턴 자체를 오해하고, 특히 모델 자체에 오해를 많이 하고 있었던 것 같다.
* 많은 시간 학습하지는 못했지만 그래도 괜찮았던거 같다.

### 8. 다음 학습 계획

* vue 강의 듣기