WPF로 툴 만들기. MVVM은 부록! #1

안녕하세요 zinzza, 연두父, 이경배입니다.

오랫만에 글을 적어봅니다.

글을 적는 시점에서 제 계획은 C#으로 게임에 응용될 간단한 툴을 제작해보려고 합니다.

이 글의 대상은 엄청 간단한 C#책을 살짝쿵 읽어본 기획자, 대학, 학원등에서 C#프로그램을 좀 배운 수준의 사람들을 대상으로 적었습니다.

일단... 프로그래머 분들께서는 이 글의 오류를 찾아 저에게 제출해주시고, 그럴 목적이 아니시라면 읽지 말고 나가주세요.(부끄로아요ㅜㅜ)

그 시작은...

시작.

그리고 강의에서 만들려고 하는 툴은 이러하지요.

학습목표.

목표는 이러합니다.

이걸... WPF와 XML과 C#을 이용해서 만들려고 합니다. MVVM패턴으로요^^;
천~천~히(달땡님 미추어버리게)

MVVM이란?
뭐든지 정의를 찾아야 할때는 만든놈들한테 물어봐야 합니다.
http://msdn.microsoft.com/ko-kr/magazine/dd419663.aspx#id0090006
Microsoft에 나와있는 MVVM에 대한 정의.


주의!
위 내용을 읽으려고 시도하던 중 뭔 소린지 모르겠다 할때는 일단 읽는 것을 중단하고 아래로 진행해야 합니다.  저걸 이해하겠다고 사전찾고 MVC, MVP 등... 모르는 것들의 정의를 찾아 여행여행 하다보면... 똑똑해집니다-o-;
하지만 저는 위의 내용들을 이해하려고 하다가 포기하게 되더군요. 

그레서 전 포기하는것보다 “모르고 마구자비로 하다보니 알게되었다” 의 테크를 추천합니다. 사실... 저도 잘 모르는게 많고요 ㅜㅜ

내가 생각하는 MVVM
그레도 아예 모르고 넘어가는 것 보다는 조금이라도 알 수 있게... 제가 이해하고 있는걸 풀어보겠습니다. 이것까지 모르겠으면 또 넘어가 봅시다.

MVVM은 프로그램을 개발할때 Model 과 View와 ViewModel을 나눠서 개발하자는 뜻입니다.
그림으로 볼까요?

출처:
http://openlightgroup.net/Blog/tabid/58/EntryId/84/Silverlight-MVVM-The-Revolution-Has-Begun.aspx

오~~ 설명이 잘 되어있는 이미지군요.
(이미지 안에 있는 UI, Collections,...Web Services등은 무시하세요. 나중에 나중에^^)

해석이 다를 수 있지만 제가 생각하는 단어로 매칭을 좀 해보면
Model은 데이타, 자료 등으로 해석할 수 있을거 같습니다.
View는 UI정도로 해석해볼까요?
ViewModel은... 글쎄요-_-??? 그냥 뷰모델이죠 뭐.(데이타를 제어하는 로직, 화면에서 내려지는 명령 처리등이 들어갑니다)

저도 잘 모른다니깐요ㅜㅜ

반복하는 거지만 MVVM은 위 그림처럼 프로그램에서 UI와 데이터, 로직을 분리하겠다는 뜻입니다.

그나저나 왜 나누냐구요-_-?
이유는 이런 상황에 대처하기 위해서 입니다.
일반적인? Winform에서는 뷰를 제어하는 코드가 직접 들어가죠.
예를들어 텍스트박스에 글자를 넣기 위해서는...
form1.txtName = “연두부”;
이런 코드 말이죠.
만약에 위 코드에서 텍스트박스를 label로 바꾼다면요? 그 label을 또 다시 TextBox으로 바꾼다면?
뷰는 당연히 바꾸는거고,  모든 소스코드를 뒤져가며 txtName을 lblName으로 또 txtblockName등으로 바꿔줘야 합니다.(뒤에 간단한 실습으로 한번 보여드리겠습니다.)
물론 Ctrl + H는 저도 잘 알고있습니다만... 어느정도 규모가 되는 프로그램이라면 그것도 보통 일은 아니죠-_-;
이런 문제를 해결하는 방법으로 MVC라는 패턴이 생겨났고, MVC의 파생된 형태라고 생각하면 됩니다.
그럼 어떻게 나누냐구요-_-?
그건 좀 있다가^^;

뭐 그림으로도 설명은 잘 안되는군요-_-;
일단 막 진행해 볼까요?
하다보면 되겠죠 뭐~ 안되서 질문이 올라오면 업데이트도 좀 하고... ㅎ

왜 MVVM인가?
여러가지 장점이 있지만 가장 큰 이유는...
개발자가 WPF와 MVVM에 익숙해진 뒤에는 이 둘을 차별화하기가 어려워집니다.(msdn)
때문입니다.
제가 회사에서 거의 대부분의 프로젝트를 MVVM패턴을 이용하거든요.
실제로 MVVM에 익숙해진 다음 WinForm프로그래밍을 하면 짜증이 밀려오는 재미있는 경험을 하게됩니다.

그럼 직접 그 짜증을 경험해봅시다.
C#으로 간단하게 화면에 숫자를 표시하고 “+”버튼을 누를때마다 숫자가 증가하고, “-”버튼을 누를때마다 숫자가 감소하는 프로그램을 만들어봅시다.

일반적인 윈폼으로 말이죠^^;

먼저 폼을 디자인합니다. label 하나와 button 2개로 구성합니다.
이부분은 자세히 설명하지 않겠습니다.
그리고, 버튼의 크기다 다르고 디자인이 구린건 님들 모니터가 불량인겁니다.
자 그럼 + 버튼과 -버튼을 더블클릭해서 소스를 입력합시다.

1. 숫자변수 TestNumber를 선언했습니다.
2. + 버튼의 코드입니다.
3. -버튼의 코드입니다.

자... 이젠 문제점을 파악해야 하니 이 프로그램의 label을 textbox로 변경해보겠습니다.

자... 이렇게 label을 지우고 textbox를 올려놨습니다.

오호라... 역시나 에러가뜨는군요.
위의 label1을 textbox1이라고 바꿔주면 일단 정상적으로 돌아갑니다^^;

이왕 하는거 좀 더 가보죠.
최대값은 10, 최소값은 0으로 지정해서 0이 되면 -버튼을 눌러도 숫자가 변하지 않게 해보는겁니다.
+버튼도 마찬가지로 10 이상 증가하지 않게^^;

오~~~ 점점 코드가 늘어가는군요. 복잡해요.

하나만 더 해봅시다.
이번엔 0일때 -버튼이 비활성화, 10일때 +버튼이 비활성화 되는겁니다.

사실 0일때 -버튼을 누를 일이 없으니까요.^^;

자 저는 CheckButtonEnable() 이라는 함수를 하나 만들어서 두 버튼 이벤트에 추가해줬습니다.

ㅎㅎㅎ 이제 One more thing!
프로그램을 요모냥으로 짰더니 누군가 와서 이렇게 말합니다.
“야 인간아~ button1이 뭐냐? 당장 txtNumber, btnPlus, btnMinus로 바꿔!” 라고 말이죠.

정신차리고 뭘 해야 할지... 생각 좀 해봅시다. 뭘 해야하지-_-?

1. 일단 뷰에 가서 컨트롤들의 이름을 변경합니다.
2. 이벤트 이름이 바뀝니다. 그럼 각 버튼 이벤트에 있는 코드를 복사해서 새로 생긴 btnPlus_Click , btnMinus_Click 이벤트쪽으로복사합니다.
3. 코드에서 textbox1 로 되어있는 코드들을 전부 txtNumber로 변경합니다.
4. 코드에서 button1로 되어있는 코드들을 전부 btnPlus로 변경합니다.
5. 코드에서 button2로 되어있는 코드들을 전부 btnMinus로 변경합니다.

안해-o-!

이 연두 코딱지만한 프로그램에서 할일이 이따위로 많은데 실제로 회사에서 하는 프로젝트면... 에효...

그리하야!

이런 문제를 해결하고자 MVVM을 사용합니다!!! 

다음번엔 똑같은 짓을 MVVM패턴으로 해봅니다. ㅎㅎㅎㅎ

그럼 다음시간까지~ 안녕~~~