개발정리를 위한 개발로그, 발로그!

예전에 포스팅하였던, 


HTML 기반 Material 디자인 라이브러리(?) - Angular Material 을 자세히 알아보기 전에 

Angular JS에 대해 알아봐야 할 것 같아, 글을 남긴다.


Angular JS는 Javascript MVW Framework 라고 하는군. ( MVW에 관련해서는 이곳을 참조 - https://plus.google.com/+AngularJS/posts/aZNVhj355G2 ) Model - View - Whatever ... ㅋ


어떻게 사용하는지, 간단한 예제는 다른 곳에도 나와 있는 곳이 많이 있으므로 이 부분도 링크로 대체 

- http://inspiredjw.tistory.com/28 

위의 링크에서 보면 jQuery를 먼저 로딩하면 AngularJS에서 제공하는 jqLite를 사용하지 않고 jQuery를 사용해서 DOM 접근을 한다니 참고!


사실 이 포스팅해서 명확히 하고 싶은 부분은, 자바스크립트로 MVVM 패턴 혹은 , MVW 혹은 MVC 패턴을 어떻게 구축하느냐는 것이다.



3
4
5
6
7
8
9
10
<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
  </head>
  <body>
      <input type="text" ng-model="yourName">
      <p>안녕하세요, {{yourName}} !!!</p>
  </body>
</html>

- 출처 : http://www.nextree.co.kr/p3241/

- Angular JS로 위와 같이 개발, 코딩이 가능하다고 하는데 위처럼 쓰기는 쉬워도 막상 저렇게 AngularJS 같은 무언가를 개발을 하려고 하면 답이 없다. 


그래서 지금은 가장 간단한 형태의 MVVM 패턴, 라이브러리를 구축해보고자 한다.

HTML은 아래같이 구성하겠다.



  <div data-value="helloworld"></div>


  화면엔 그냥 

  helloworld 만 출력 


개발 편의상 DOM Selector는 jQuery를 사용하도록 하겠다.




- 일단 위와 같이 작성하면 1차 목표는 달성.

하지만 위와 같이 구현하였을 경우 MVC, MVVM 등 관련 적용과는 굉장히 거리가 있어 보인다. ( 단순히 특정 DOM을 선택해서 데이터를 직접 입력하는 방식이기 때문에 )


Javascript 상으로 MVVM 패턴을 적용하려면 먼저 Javascript object와 DOM의 연결? 이 필요하다.

일단 HTML을 아래와 같이 변경하겠다.


 <div data-value="wow"></div>

<div data-value="wow2"></div>


위의 두 DIV를 Javascript Object wow, wow2에 연결하겠다. MVVM 패턴을 적용해서 이야기하면 View를 HTML로 위와 같이 구성하고 ViewModel을 wow, wow2 로 각각 설정하겠다.




HTML 상으로 각각의 value를 표현해야하기 때문에 위의 Object에 value 프로퍼티를 추가하도록 하겠다.


이제 HTML(View), Object(View Model) 를 연결하는 코드를 추가해보자. 반복되는 코드가 예상되므로 별도 Object로 작성을 한뒤 wow, wow2에 Apply하는 방식으로 제작을 하겠다. ( 이부분은 기존 jQuery, knockout을 일부 참조 하였다 )

먼저 공통코드 ( 편의상 Pattern으로 명명 )



이제 wow, wow2에 커스텀 함수를 추가하겠다. update라고 하겠음 

이제 위에서 작성하였던 document ready 함수를 일부 수정하겠다. 이제 요정도 했으면 어느정도 최소한의 MVVM 패턴을 구성했다 할 수 있겠다.ㅋ.. 



동작 과정을 조금 정리하면

기본 함수를 Pattern에 적용해 놓고, wow, wow2 object를 구성 이제 각각 object에 Pattern 을 apply한다.

apply후 Object 각각 에 커스텀 함수를 추가하고 document ready 시점에 해당 object와 html view를 연결한다. ( 바인드라 하는게 더 나으려나.. ) 전체 소스를 붙여넣는 것으로 이번 포스팅은 마무리! 다음에는 ViewModel이 업데이트 되는 시점에 View를 변경하는 코드를 작성해보겠다.