Materail Anglarjs 를 알아보기 전에 - Javascript MVVM 패턴을 구성해보자!
예전에 포스팅하였던,
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를 변경하는 코드를 작성해보겠다.
'과정!' 카테고리의 다른 글
| 알고리즘 - 1차원 배열에서 연속된 부분 구간 중 그 합이 최대인 구간을 구하기 (0) | 2014.12.26 |
|---|
Android - 실제 디바이스 사이즈 가져오기 (Get screen size without status bar and system bar)
어제 작성한 코드 중에 나름 필요한 코드가 있어 이곳에 다시 업로드
안드로이드 스크린 사이즈 가져오기 ( Fullscreen size )
* 하단 시스템 바(System bar)가 있는 폰에서 나름 필요한 코드가 아닌가 싶음.
* 안드로이드 버전 14 이하(4.0)에서 원활히 동작
'완료!' 카테고리의 다른 글
| 다시 시작! 약 2년만의 포스팅 (0) | 2016.12.10 |
|---|---|
| SRM 144 DIV 1(300-point) - 문제 풀이 (0) | 2015.01.12 |
| PHP Composer 란 무엇인가? - Composer.json (0) | 2014.12.21 |
| 오픈소스를 개발함에 있어 몇가지 아쉬운점. (0) | 2014.12.21 |
| 개발과정 중, 개발 진행 중, 완료 후 생각 정리를 위한 발로그! 개설 (0) | 2014.12.21 |
알고리즘 - 1차원 배열에서 연속된 부분 구간 중 그 합이 최대인 구간을 구하기
제목이 길다.
알고리즘 실력이 점점 떨어지는 것 같아. 예전에 구입하였던 프로그래밍 대회에서 배우는 알고리즘 문제해결전략이라는 책을 다시 보던 중 정리 차원에서 남긴다.
제목 그대로 1차원 배열에서 연속된 부분에서 그 합이 최대인 구간의 값을 구하면 되는 문제.
책에 제시된 샘플은
[-7, 4, -3, 6, 3, -8, 3, 4]
답은 4,-3,6,3 구간으로 , 합을 구했을 경우 10이 나온다.
이 문제를 처음접했을때 가장 쉽게드는 생각은 다 구해서 최대 구간과 값을 구한다.
-> 가장 무식한 방법이 아닐까 싶다. 그래도 가장 확실히 구할 수 있다 라는 것에는 의심의 여지가 없다.
간단히 코드를 작성해보면
int 결과 = 0;
for ( int i = 0 ; i < Array크기 ; i++ ) {
int Sum = 0 ;
for ( int j = i ; j < Array크기 ; j++ ) {
Sum += Array[j];
비교후 가장 큰 값 저장
}
}
<- 결과 리턴
코드 보기가 약간 그지같긴 하지만 어쩔 수 없다,.
이렇게 진행하였을 경우 N제곱이 소비되기 때문에 큰 값이 들어오면 처리할 수가 없다.
그럼 2번째 방법으로 생각할 수 있는건, 어케어케 구하면서 진행하는 것이다. (?) 보통 동적 프로그래밍으로 코드를 작성하려면 나름 타당한 수식을 생각해서 이를 코딩으로 구현해야하기 때문에 곰곰히 생각을 해보았다. 요런건 보통 점화식을 통해 해결하는 경우가 많아 살짝 잘라서 생각을 해보았는데,
A 배열의 최대 부분합을 B 배열이라고 하면 B배열의 제일 왼쪽 혹은 오른쪽을 i 인덱스라 했을때 아래와 같이 표현할 수 있다. (편의상 제일 오른쪽 인덱스를 i라 하겠음 )
B = B[i-1](임의로 표현) + B[i]
요렇게 하면 나름 타당한 점화식이라 할 수 있겠다. 초기 코드만 살짝 잘 처리해주면 큰 문제가 없을꺼 같다.
for ( int i = 0 ; i < 크기 ; i++ ) {
합 = max( 합 , 0 ) + A[i];
결과 = max( 합, 기존 최대값 )
}
결과 리턴...
확실히 글로 쓰니 생각 정리가 명확히 된다.
이제 비슷한 문제 다시 리뷰하면서 생각을 좀 더 구체화 해보자!
'과정!' 카테고리의 다른 글
| Materail Anglarjs 를 알아보기 전에 - Javascript MVVM 패턴을 구성해보자! (0) | 2014.12.28 |
|---|
