본문 바로가기

Dev-/java script, jQuery, Ajax

자바스크립트 MVC 패턴

인프런 김정환님의 vue.js 강의 초반부분에서

ES6 문법을 사용해 순수 자바스크립트로 MVC를 구현하는데,, 그 후기



- 기본적으로 View의 최상위 모듈을 만듦

- 기본 함수 틀

1. 모듈 생성

2. 이벤트 발생

3. 발생된 이벤트 핸들러

4. show

5. hide


- 함수 체이닝이 가능하도록 모든 함수는 this(모듈)을 리턴해줌

- 실제 해당 View가 다룰 엘리먼트는 el 프로퍼티에 저장


- View는 화면에 관련된 작업만 하도록, 

(이게 생각보다 잘 안될 수 가 있다. 특히 Model(데이터 부분)에서 해야 할 일을 무의식적으로 View에서 처리하기가 쉬우니 주의)

- 커스텀 이벤트만 발생시켜 Controller에 전달


- 위에서 View들이 발생시키는 커스텀 이벤트는 Controller에서 관리




위와 같은 패턴의 실습이 반복된다.





기타 느낀 점

- 이벤트를 줄 때, for문으로 줘도 된다는 점

- .length로 분기를 줄 수 있다!

- 함수는 실제 그 함수명이 나타내는 부분만 맡게 --> 작업단위를 쪼개는 게 좋은 거 같다.


- 이벤트 관련 함수들을 조금 더 알아야 할거 같다.






뷰는 시작도 못했지만,

앵귤러로 개발한 기억을 떠올려보면,,


왠지 여러 js 프레임워크의 동작 원리가 비슷비슷할 거 같다.




앞으로는 무작정 코드를 짜기 전에,

요구사항을 정리해서 생각해봐야겠다는 생각이 들었다.