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 강의 듣기