Web Form을 이해하면 ASP.NET이 보인다?

이 얼마만의 강좌인가? 라고 여러분들이 눈총을 주는 것이 마구 느껴집니다. 오옷… 죄송합니다. 정말로 이제는 자주 올리도록 하겠습니다. 언제나 그렇게 마음을 먹습니다만.. 그것이 그리 쉬운 것이 아니네요. 게다가 ASP.NET쪽의 강좌는 함부로 강좌를 올리기가 조금은 겁이 나네요. 개념도 만만치 않고, 어떤 강좌를 올리는 것이 ASP.NET을 제대로 시작하는 것인지 자신이 쉽게 서질 않아서요. ^^;

그렇다고 막연히 여러 샘플 예제를 올리는 것은 그다지 바람직하지 않아보입니다. 실제로 지금의 우리에게 필요한 것은 예제를 만들어서 돌리는 것이 아니라, 왜 그렇게 해야하고, 어째서 그렇게 동작하게 되는지를 이해하는 것이 먼저일테니까요. 그래서, 많은 딜레마속에서 아직도 헤메이고 있는 태오이기는 합니다.

어��든 그러한 딜레마 속에서 강좌의 흐름을 조금은 바꾸어 볼까 하는 생각을 가지고 이번 강좌를 올려봅니다. 사실 이번 강좌는 써놓은지 한달이 넘은 것이기는 합니다. 올리기가 뭐해서 올리지 못하고 있었거든요. 제가 실제로 올리고 싶은 강좌는 .NET Framework 에 관한 것이었기에 말입니다. 하지만, 강좌가 제 하드에서 놀고있느니 욕을 먹더라도 하나라도 많이 웹으로 올려두는 것이 바람직하지 않을까? 하는 생각에 결국은 이제야 올립니다.

이번 강좌는 이전에 올렸던 강좌와 이어지는 내용은 사실 아닙니다. 비교는 이제 그만~~ 이제는 실제 ASP.NET을 이야기하자~~ 로 맘을 바꾸었거든요. 아무리 생각해도 ASP와 ASP.NET을 비교하는 것 자체는 그다지 의미가 없다고 느껴지기 때문입니다. ASP와 ASP.NET은 차라리 아무런 연관이 없다고 생각하고 공부를 시작하는 것이 처음 시작할 경우에는 도움이 될 것 같거든요. 조금 이해하고 나면 다르겠지만 말입니다.

자꾸 ASP와 ASP.NET을 연관시키는 것 자체가 조금은 기존 웹 프로그래머들을 혼란스럽게 할 것이라는 느낌입니다. 다른 분들이 ASP와 ASP.NET을 비교한 글을 보아도 글의 처음은 비교로 시작했을지 모르겠지만, 결국 글이 조금 진행되면 일방적인 ASP.NET의 소개 글이 되어버립니다. 그럴 수 밖에 없을 것 같다는 생각이 들기도 합니다. ASP.NET에서 처음 등장한 것들을 비슷한 것이 존재하지도 않았던 ASP의 경우와 어떻게 비교할 수 있겠습니까??

해서, 이제 강좌는 우리가 ASP.NET 이라는 것을 처음 만났고, 우리가 이것을 아주 새롭게 공부한다는 자세로 진행해보려 합니다. ASP와 비교하는 식의 표현은 조금 자제할 것입니다. 이것은 비교하는 마음으로 공부를 하면 오히려 공부에 방해가 된다는 아주 주관적인 견해에 의한 것입니다. 만일, 여러분이 굳이 ASP와 ASP.NET을 비교해 보고 싶다면 다음 Word 문서를 참고하십시오.

네오비스(http://www.neovis.pe.kr)의 ASP.NET 스터디 시삽으로 현재 활동중인 최용일(chivalry01@hotmail.com) 님께서 보내주신 정리 문서입니다… 많은 도움 되시길 바라겠습니다.

Introducing ASP.NET

아아.. 여기서 오해하기 쉬운 것 중에 하나는 ASP에 익숙하면 ASP.NET을 배우기가 무척 어려울지 모른다는 속설(?)입니다. 제가 느끼기에는 그렇지 않았습니다. 세상에 도움이 안되는 지식은 없다라는 것이 제 신조이기 때문인지는 몰라도, 제 생각에는 ASP를 모르면 오히려 ASP.NET을 배우기가 더 어려울 수 있다고 생각합니다. 정확히 말하자면, ASP 라기 보다는 웹 프로그래밍의 기반 구조를 잘 모른다면 ASP.NET을 공부하기가 까다로울 것이라는 것이지요. 만일, 자신이 ASP에 자신이 있다면 이것은 ASP.NET을 공부함에 있어서 잇점으로 작용할 것입니다. 단!! ASP 식으로 해석하는 사고를 잠시 버려둔다면 말이지요. 아집이나 자만심은 공부를 함에 있어서 어떠한 식으로도 도움이 되지 않습니다.

또한, 참고로 ASP.NET을 제대로 공부하기 위해서는 ASP.NET 에 대한 공부뿐 아니라 VB.NET이나 C# 혹은 Managed C++ 에 대한 공부가 병행되어야 합니다. 우리가 기존 ASP 에서는 실제 ASP 코드를 작성하기 위해서 VBScript를 사용했었던 반면, ASP.NET에서는 이러한 컴파일 언어들을 사용해야만 제대로 페이지를 작성할 수가 있습니다. 제 강좌는 가급적 C# 쪽으로 진행하려고 하고 있지만, VB.NET 언어를 사용하기도 할 것 같습니다. 여러분도 ASP.NET을 제대로 공부하기 위해서 하나의 언어를 선택하시고 그와의 공부를 병행하시면서 공부하셔야 할 것입니다. 솔직하게 말해서 이제는 그렇게 하지 않으면 ASP.NET을 제대로 익힐 수 없을 것입니다. 이제는 선택이 아니라 필수라는 것이지요. 적어도 하나의 언어를 공부하는 것은 말입니다. (개인적으로는 C#을 추천합니다. 이유는 들리는 소문에 의하면 VB.NET이 C#의 Wrapper 라는 이야기가 있거든요. 이 이야기는 C#이 VB.NET보다 좀더 빠르다는 것을 의미하는 것이지요. 믿거나 말거나 입니다만..)

자.. 그럼 이번 강좌 진짜루 시작합니다.

기존의 C/S 개발하시던 분들이 웹 프로그래밍을 만나면서 처음 외치는 말은 어쩌면 "오옷 이것은 완전히 노가다다!!" 였을 겁니다. HTML로 만들어지는 폼(예를 들어 회원가입 폼)을 만일 VB나 VC++에서 만들고자 했다면 단지 몇 번의 드래그 앤 드롭이면 어느 정도는 만족스러운 모습을 만들어 낼 수 있을 것을 웹 페이지로 만들면 왠걸.. 일일이 손으로 다 그러한 코드를 작성해 주어야 했으니까요. 상당한 HTML 타이핑 실력이 필요하지요. 태그들도 상당히 많이 알고 있어야 하구요. 어쩌면 조금 전까지도 여러분은 HTML로 회원가입 폼을 만들기 위해, 수많은 태그로 각각의 컨트롤 태그들을 다 작성하고 이곳 때오 사이트로 오셔서 이 강좌를 보고 계신지도 모르겠네요. 게다가 페이지의 모양을 이쁘게 꾸밀라면 태그를 써서 위치도 잡고, 들여 쓰기도 하면서 복잡한 태그를 구사할 줄도 알아야 하고, DHTML도 공부해야 하고, 스타일 시트도 다루어서 페이지 모양을 더 이쁘게, 옆에 있는 디자이너 친구 옆구리를 찔러서 이미지도 좀 만들어서 붙이고, 그러한 노력을 담아서 페이지 하나 만드는데 짧게는 몇 분에서 길게는 며칠씩 걸리기도 했을 겁니다.

그러면서 어느덧 그러한 작업에 익숙해 져버리기도 합니다. 심한 경우는 HTML 에디터를 워드보다도 잘 다루게 되어 누가 문서를 보내달라고 하면 차라리 HTML로 만들어서 보내주는 것이 워드나 HWP로 보내주는 것보다 더 편하게 느껴지기도 하지요.. 참으로 암울했습니다. 글치 않아요? 하지만, 우리는 그러한 암울함을 너무나도 쉽게 받아들이고, HTML 만들기를 마구 즐겼었지요. 하지만, 그로 인해 개발기간의 대부분을 우리는 ASP 보다는 HTML과 다투기도 하였고 말입니다.

게다가, 기껏 ASP 페이지를 완성해 두었더니, 디자이너가 디자인 붙이다가 ASP 코드를 지워먹어서 페이지에 오류 뜨고, 새벽에 회사로 불려 들어가고.. 그래본 적이 어쩌면 한, 두번씩은 있지 않았나요? 오오.. 정말 그럴 때는 너무 화가 나서, 정말 그래서는 안되지만 "그 디자이너는 완전 닭 아냐!!"라는 빈 말을 하기도 하지요. 그 말을 우연히 듣게 된 그 디자이너님도 오옷.. 성질을 부리기 시작합니다. 그래서 말을 전해준 친구는 어떻게든 수습하려고 노력을 하지요. 기분 나쁘시더라도 한번만 이해해 줍시다. 새벽 3시에 자다가 일어나서 회사 들어오려 하니 잠결에, 홧김에 그냥 나온 말일 겁니다. 한번 봐줍시다. 등등의 말을 하면서 말이지요. 그러면, 그 디자이너 언니는 또 가만히 있겠습니까? 얼굴이 벌개져서 이렇게 화를 냅니다. 새벽 3시까지 나는 밤 새면서 작업하는데 그 넘은 퍼질러 자다가 내가 어쩌다 한번 실수 한 것 가지고 넘 심한 거 아니냐구요. 그래요.. 듣고보니 또 이 언니의 말도 맞습니다. 그럼 어쩌죠? 하고 둘 사이에서 이야기를 들어주고, 어떻게든 사이를 좋게 해 볼라구 괜한 맘을 쓰다가 중간에 낀 사람은 난감합니다. 그렇게 그렇게 시간이 지나니.. 어랏? 이게 뭐하는 짓이지? 둘이 결혼을 한답니다. 이게 말이 되는 소립니까? 그럼 중간에서 난 뭐한 겁니까? 이것 참.. 웃기는 세상이 아닙니까?

한편의 시트콤을 보셨습니다만.. 이러한 일이 간혹 있고는 하지요.

워낙 중간에 잘 새는 태오. 다시금 복귀도 잘 합니다. 이제 ASP.NET이 도래하면 이렇게 해서 결혼하는 커플들 많이 사라질런지도 모르겠습니다.

이제는 다시금 VB나 VC++에서 폼을 작성했었던 것처럼 가벼운 Drag & Drop으로 페이지를 꾸밀 수 있게 되구요.(물론, 이것은 Visual Studio.NET을 사용한다는 가정하의 이야기입니다) 또한, 소스코드와 디자인 코드가 뒤섞여서(혹자는 이러한 코드를 스파게티 코드라고 하더군요) 생기는 문제를 어느 정도 방지할 수가 있게 되었습니다.

참고 : 어느 정도이지 완전하게는 아닌 것 같습니다. MS 는 언제나 - 물론, MS 뿐만이 아니지만 - 새로운 제품을 내 놓을 경우에는 항상 이전 버전은 문제가 사실 많았다. 하지만, 이번 버전은 정말로 그러한 문제를 모두 다 수습하였다. 끝내주지 않은가? 라고 하면서, 그러면서도 또 내부적으로는 지금 버전의 문제들을 해결하고자 조용히 새로운 버전을 준비하고는 하니까요. 언제나 그렇지만 MS는 마케팅 능력도 대단한 것 같아요. 믿을만한 소식통에 의하면 벌써 ASP.NET 2 개발에 착수했다는 믿거나 말거나의 정보도 있답니다.

ASP.NET에 들어서면서 페이지 작성시 가장 먼저 개발자들이 만나게 되는 것이 바로 웹 폼(WebForm)이라는 것입니다. 웹에서 사용하는 폼이라는 의미인데, 이것은 마치 웹 페이지를 일반 어플리케이션 폼을 작성하듯이 만들 수 있게 해 주는 웹 페이지 구조를 말합니다. 여러분이 VC++ 이나 VB 등을 다루어 보았다면, 여러분이 윈도우를 꾸미기 위해서 제공되는 폼 위에다가 필요한 컨트롤들을 그냥 Drag and Drop 으로 올려다 놓으면 그것으로 폼이 후딱 만들어지던 것을 보셨을 겁니다. VB나 VC++ 에서는 간단한 구성의 폼을 하나 꾸미는 데는 10초도 걸리지 않습니다. 그렇게 쉽고 간단하지요.. 그러한 기능이 이제 Visual Studio.NET을 통해서 제공이 된다는 것입니다. 물론, 직접 손으로 예전처럼(ASP 때처럼) 코딩해도 상관은 없습니다만 툴을 사용해서 작업할 경우, 단 몇 분만에 뚝딱 쓸만한 폼을 구성할 수 있게 되니 굳이 그렇게 할 필요는 없겠지요?

하지만, 그렇게 만들어지는 페이지의 HTML 소스나 소스코드를 보면 그리 쉽게 이해가 가지 않는 모습을 띄고 있지요. 이는 ASP.NET 의 웹 페이지 자체가 하나의 객체로써 구성되어지고, 상속되어진 클래스의 구성을 하고 있기에, 언어기반의 프로그래밍 경력이 없는 이들에게는 대단히 어렵고 복잡하게 받아들여질 수 있기 때문입니다. 잠시 후 이러한 예제들을 만나보게 될 것입니다.

그리고, ASP.NET 은 이벤트 중심의 프로그래밍을 지향합니다. ASP 때의 코딩방식에서 완전히 탈피한 스타일이라 이 부분은 ASP 식의 프로그래밍에 익숙하신 분들은 오히려 혼란스러울 수 있기까지 한 부분일 수 있습니다. 그러니 버리십시오. ASP 의 기억을 아주 잠시만 버려보세요. ^^

다음 페이지는 아주 기본적인 ASP.NET 페이지의 모습입니다. 페이지의 내용이 선뜻 눈에 안 들어올 수도 있습니다만, 그래도 어떻게든 이해 해 보려고 노력해 보세요. 만일, 자바스크립트에 익숙한 사람이라면 흡사 이 코드가 클라이언트측에서 어떤 이벤트를 처리하는 부분처럼 느껴질 수도 있습니다. 그리고, 이 예제는 솔직히 굳이 서버에서 처리하지 않아도 되는 예제이기는 합니다. 하지만, 우리에게 중요한 것은 이 페이지의 소스가 서버에서 처리된다는 것입니다. 먼저 소스를 보면서 설명을 드리도록 하겠습니다.

만일 소스를 코딩하고 테스트하고 싶으시다면 물론, 여러분의 시스템에는 .NET FrameWork 이 설치되어져 있어야 하구요. 이것을 설치하는 방법은 그냥 CD를 넣고 설치하면 되는 것이기에 설명은 생략합니다.(이 CD는 MS 세미나장에 가거나, 여러 컴 잡지를 사면 마구 공짜로 줍니다.) 어��든, 환경이 갖추어진 상태라면 위 파일을 코딩한 뒤,(어쩌면 카피한 뒤) 확장자를 .aspx 라고 해서 저장해야만 합니다.

소스를 보실 때 만큼은 ASP를 잊어주십시오. 그리고 보도록 합니다. 이 파일이 브라우저에 로딩이 되면 화면에는 하나의 텍스트 박스와 하나의 버튼("인사" 라고 쓰여져 있는)이 눈에 나타날 것입니다. 다음처럼요.

그리고 텍스트 박스에 적절히 이름을 넣고 "인사"버튼을 꾹 누르면.. 다음처럼 결과가 나올 것입니다.

오옷.. 하나도 놀랍지 않다구요? -_-; 뭐 그렇습니다… 언제나처럼 여러분은 왠간해서는 잘 놀라주지 않지요.

소스에서 <asp:textbox .. /><asp:button.. /><asp:label../>등과 같은 태그가 여러분을 당황스럽게 할런지도 모르겠습니다. 이것은 웹 폼 서버 컨트롤이라 불리는 것으로 기존의 HTML 컨트롤을 대신하게 될 서버와 연동이 가능한 컨트롤들입니다. 이름에서 느껴지듯이 이들은 각각 입력을 위한 텍스트 박스, 버튼, 레이블 이지요. 각 컨트롤의 속성으로는 runat="server" 라는 것이 들어있음에 주목하세요. 이 컨트롤들은 서버에서 연동되는 컨트롤이기에 이러한 속성이 지정되어져 있습니다.

각각의 컨트롤은 id 속성으로 구분을 하며, 서버에서는 그 ID로 각각의 컨트롤을 제어할 수 있습니다. 소스에서는 우리가 <asp:textbox 컨트롤에 특정 값을 넣고 버튼을 누룰 경우, 그 버튼에 걸려있는 이벤트가 서버측의 함수인 "Button1_Click"을 호출하게 됩니다. 주의하세요. 이 순간 폼의 내용은 서버로 전송되어지고, 함수가 구동되는 작업은 서버에서 일어나는 것입니다. 서버에서 말입니다.

그리고, 서버에서는 이미 작성되어져 있는 Button1_Click 라는 함수의 내용대로 미리 작성되어져 있던 "안녕하시렵니까?" 라는 문자열과 사용자가 txtName 이라는 컨트롤에 입력한 값을 합쳐서 컨트롤중의 "lblResult" 라는 아이디를 가진 녀석의 Text 속성에 넣게 되는 것입니다.

지금 ASP 를 다시금 떠올리시는 분들은 어서 ASP를 머리에서 지우십시오. 어떻게 이런 것이 가능할까는 생각하지 마십시오. 이와 같은 이벤트 중심적인 프로그래밍 방식이 웹 상에서 가능한 것 자체가 놀라움으로 다가오면서, 어떻게 그렇게 될 수가 있는지 궁금함이 드시는 분들이 많을 것으로 예상됩니다. 하지만, 그 부분은 지금의 우리가 따지고 들만한 부분이 아닙니다. 그것은 여러분이 몇 차례의 강좌에 걸쳐서 내공이 조금 올라오게 되면 이해가 가능한 부분이 될 것입니다. 그러니 지금은 "ASP.NET에서는 이렇게 멋지게 바뀌었구나. 와~ 이제 프로그래밍이 조금은 더 쉬워지겠다."라고만 느껴보시기 바래요

하지만, 그래도 미리 조금은 듣고싶다? 그렇습니다. 그렇게 호기심 천당이신 분들이 의외로 많이 있을 수 있기에 아주 간단히 울트라 닭발 쌈치기하게 설명을 드려볼까 합니다. 여러분이 모르는 용어가 꽤 나올 수 있지만 일단 참고 한번 들어보세요.

페이지가 처음 요청되는 순간, IIS는 웹 페이지를 파싱하는 ASP.NET 엔진으로 일단 페이지를 읽어들입니다. 그리고, 이를 JIT(just-in-time)로 컴파일을 합니다. 그리고, 페이지의 컨트롤들을 HTML로서 생성하면서, 컴파일된 코드가 실행되고, 호출된 이벤트가 있다면 그 이벤트 코드가 실행이 되어져서, 컨트롤과 상호작용을 하고, 출력 HTML은 생성됩니다. 그리고, 이 결과 HTML 페이지는 클라이언트의 브라우저로 넘겨지는 것입니다.

페이지가 처음 요청되는 경우는 위와 같은 동작을 하지만, 두번 이상 호출되어지면 컴파일을 하는 작업은 사라지고, 이미 컴파일이 되어져 있던 것을 사용하게 되기에, 이후 요청시는 페이지의 수행시간이 단축되어 집니다. 이를 그림으로 표시하면 다음과 같습니다.

그림은 ASP.NET M.O.C 중의 플래쉬 파일을 캡춰한 것임을 밝힙니다. 이거 이렇게 올려도 되는지는 잘 모르겠네요. 혹시 문제가 되지는 않을까??? 음...

그리고, 그림으로 인해 오히려 "오옷- 머리가 터질 것 같아...-_-"하신다면, 분들은 아직 .NET FrameWork 에 대한 학습이 없어서 그런 것입니다. 하지만, 걱정하지 마세요. 조만간 이 이야기도 언급을 할 것이니까요. 넘 어렵게 생각하지 마시고 한번 살며시 들여다 보는 마음으로 접근하면 될 것 같습니다. 잊으셨을까봐 다시 말씀드리는데 우리는 지금 ASP.NET을 처음 시작하고 있는 것입니다. 저도 그렇구요.

우리 눈에 보여지는 소스는 단지 버튼이 눌렸을 경우에 서버 사이드의 코드가 실행되어져서 지정된 컨트롤에 그 역할을 수행한 것처럼만 간단히 보였을 수 있지만 서버에서는 대단히 복잡한 처리가 이루어지고 있었던 것입니다. 첨 들으면, 전혀 쉽지 않은 이야기일 수 있습니다. 하지만, 장담컨데 여러분은 이어지는 2-3 강좌를 통해서 이를 쉽게 이해할 수 있을 것입니다. (정말?)

.NET 프레임워크가 많은 것을 처리해 주는 만큼 기쁘게도 우리 개발자들이 코딩작업을 하기는 그만큼 편리해진 것입니다. 이제는 특정 처리를 위해서 복잡하게 페이지의 구성을 계산하고, HTML에서 서버로 데이터를 넘기는 폼 페이지를 작성하고, 실제 그 처리를 담당하는 ASP 페이지를 작성하고, 그 결과를 다시금 결과 페이지를 만들어서 보여주고 하던 여러 단계를 처리를 가볍게 줄일 수 있게 된 것입니다.

자.. 위의 소스를 다시금 바라보도록 합시다. 간단하기는 하였지만 솔직히 말하면 저 소스는 제대로 된(?) ASP.NET 페이지는 아닙니다. 아아.. 어떤 오류가 있다는 것은 아닙니다. 다만, 저렇게 하면 노가다 코딩이라는 이야기를 무엇보다 먼저 듣게 됩니다. 물론, 그러한 소리는 참을만 할 수 있죠. 진짜 중요한 문제는 ASP.NET 에 들어서서 모든 웹 페이지(혹은 웹 폼)은 하나의 객체로 인식되어 지며, 그렇게 페이지를 구성하여야 한다는 점입니다. 그것이 객체 지향적인 프로그래밍을 위한 기본이니까요. 위의 우리가 작성한 소스는 페이지에 필요한 많은 소스들이 빠져있는 상태이며, 하나의 객체로써도 완전한 구성을 이루지 않고 있는 상태입니다. 또한, 실제 로직과 HTML들과의 코드도 하나의 페이지에 섞여(?) 있기에 비즈니스 로직과 컨텐츠의 분리도 제대로 잡혀져 있지 않습니다.

또한, 모든 코딩을 손수 해주어야 하기에 개발시간이 "뭐"에 비해서 조금은 늦어지게 됩니다. 뭐가 뭐냐구요? 그것은 바로 VS.NET을 사용할 경우를 말합니다. VS.NET을 사용하면 저러한 코딩을 여러분이 열(熱)나게 코딩하지 않아도 됩니다. 몇번의 드래그와 가벼운 코딩만으로도 이러한 페이지를 만들어 낼 수가 있게 되니까요. 바로 이것이 VS.NET 이 제공하는 개발의 편리성입니다. 또한, VS.NET을 사용하면 기본적으로 객체 지향적인 페이지의 코드 구성을 제공해 줍니다. 해서, 각각의 페이지가 하나의 객체처럼 구성되어진 채로 우리에게 제공되어지게 되지요.

해서, 이전에 객체 지향 프로그래밍에 대한 경험이 없으신 분들은 이제 ASP.NET을 접하면서 상당히 혼란스러울 수 있습니다. 그리고, 이 부분이 제가 일전에 책에다가 ".NET이 나오면 어쩌면 많은 웹 스크립트 프로그래머들이 딜레마에 빠지게 될지도 모르겠다"라고 말씀 드렸던 이유이기도 합니다. 물론, 그렇게 되지 않기를 바라는 마음으로 말입니다.

어쨌든 우리는 그렇게 나약하지 않으니 할 수 있다는 자신감을 가지고, 이제 위의 소스를 VS.NET으로 다시금 작성해 봅시다. VS.NET을 사용해서 ASP.NET 페이지를 만들게 되면 기본적으로 Code Behind 로써 페이지가 구성이 됩니다. 즉, 페이지의 컨텐츠 페이지와 실제 로직 부분이 각각의 페이지로 구성되어지고 연결되어진다는 것이지요.

다음 단계를 따라서 한번 웹 폼 페이지를 구성해 보세요.. ^^ 아 참. 저는 ASPNET_Start 라는 가상 디렉토리를 하나 만들었구요. 그 디렉토리에 다음처럼 새로운 웹 폼을 하나 추가하였습니다. (저는 솔루션 탐색기 창을 왼쪽으로 두었습니다. 여러분은 아마도 우측에 있을 겁니다만 저는 화면을 쉽게 캡춰하기 위해 왼쪽으로 두었습니다. 참고하세요)

웹 폼의 이름은 그냥 wFrm01.aspx 라고 주었습니다. ^^

페이지가 만들어지면 우측에는 폼의 모습이 모눈종이처럼 나타날 것이며, 중간에는 다음과 같은 메시지가 있을 것입니다.

이 메시지는 기본적으로 웹 폼 페이지가 DHTML의 absolute position을 사용한다는 것을 나타냅니다. MS의 DHTML을 사용하게 되면 페이지내에서 모든 컨트롤들과 객체들의 위치를 자기가 원하는 곳에 위치시킬 수 있습니다. X 좌표와 Y 좌표를 이용해서 말이지요. DHTML을 조금은 공부해보신 분이 이 말의 의미를 아실 수 있을 것입니다. 이 기능은 상당히 유용합니다. VS.NET 에서는 이러한 상태를 Grid 레이아웃 상태라고 말하는데요. 이것은 여러분이 폼 위에 컨트롤들을 마음대로 배치하는 데에 상당한 도움이 되어줄 것입니다. 하지만, 그렇게 배치한 뒤에 HTML 소스를 보시면 "뜨아앗~" 상당히 복잡하게 태그들이 만들어져 있는 것을 보시게 될 겁니다. 어느 정도 DHTML에 자신이 없으면 알아보기가 힘들 정도입니다. 해서 배치 후에 직접 HTML소스를 보면서 페이지내의 컨트롤들의 배치를 바꾸는 것은 거의 불가능에 가깝지요. 하지만, HTML을 몰라도 페이지를 맘껏 구성할 수 있다는 장점이 있기에 이 Grid 레이아웃은 기본 레이아웃으로 잡혀져 있습니다.

사람의 취향에 따라 다르겠지만, 저는 이러한 구성보다는 아무래도 HTML을 직접 제어할 수 있는 구성이 더 태오다운(?) 페이지를 만들 수 있을 것 같다는 생각이어서요. 해서 저는 이러한 레이아웃을 사용하지 않을 것이구요. 기본적인 HTML 의 레이아웃인 FlowLayout을 사용하려 합니다.

FlowLayout을 사용하게 되면. Grid 레이아웃처럼 컨트롤을 원하는 위치에 정확히 배치할 수는 없구요. .NET 이전 처럼 위에서 아래로 순차적으로만 컨트롤들을 배치할 수 있습니다. 또한, 위치를 잘 잡기 위해서는 태그를 사용해야 하기도 하지요. 물론, 노가다이지요. 그렇다고 제가 무조건 FlowLayout을 사용하겠다는 것은 아닙니다. 효율성에 따라 GridLayout과 FlowLayout을 섞어 사용할 것이기는 하지요. 하지만, 일단 지금은 FlowLayout으로 설정하고 사용해 보도록 하겠습니다. 즉, 이 FlowLayout 으로 두면 예전에 여러분이 HTML 페이지를 만들던 것과 같은 방식으로 HTML이 생성된다는 의미랍니다.

FlowLayout으로 변경, 설정하는 방법은 다음과 같습니다.

우측 폼에서 하단의 HTML 모드를 선택합니다.

그러면 화면에 HTML 태그들이 나옵니다. 그 상태에서 마우스 우측클릭 하시구요. 속성을 선택하세요. 혹은 우측 윈도우에서 속성 윈도우을 클릭하셔도 됩니다.

그러면 다음처럼 문서의 속성을 설정할 수 있는 윈도우가 뜰 겁니다.. 여기서 페이지의 레이아웃 값을 FlowLayout 로 설정해 주세요

혹은 속성 창에서 설정하실 경우는 다음처럼 pageLayout을 FlowLayout으로 설정하시면 된답니다. ^^ 둘 중 아무 방법으로나 하셔도 됩니다.

이제 여러분의 웹 폼은 Flow 레이아웃으로 설정이 되었습니다. 자 이제 컨트롤들을 올려놔 봅시다. 먼저 폼에다가 "이름 : "이라는 글을 쓴 뒤에.. 다음 그림처럼 [도구상자]에서 웹 폼 컨트롤 중에서 TextBox 컨트롤을 하나 Drag & Drop을 해서 올려놓아 보세요

그리고, 이 컨트롤에다가 마우스 우측 클릭해서 [속성]을 누르시거나, 속성 윈도우 창으로 가셔서 다음 그림과 같이 이 컨트롤의 ID 값으로 txtName 이라고 주시기 바랍니다. 많은 속성들을 설정할 수 있으니 여러분이 이것 저것 값을 주셔도 좋겠지요? 모양과 관련된 속성들이라면 말입니다.

다 되었으면 이번에는 버튼을 하나 올려놓아 봅시다요. 다음 그림처럼 [도구상자]에서 웹 폼 컨트롤 중에서 [Button] 컨트롤을 하나 드래그해서 올려놓아 보세요. 중요합니다. 웹 폼 컨트롤이어야 합니다.

그리고 난 다음에 그 밑으로 다음과 같이 레이블 컨트롤을 하나 드래그 앤 드롭해서 올려놓도록 합니다

그리고, 그 레이블 컨트롤의 속성으로 가셔서, Text 라는 속성의 값으로 Label 이라고 되어져 있는 것을 지워버리도록 하세요. 그리고, 그 녀석의 아이디는 Label1 이라고 그냥 두시구요.

자.. 그럼 이제 UI는 모두 준비가 되어진 것입니다. 이제 코딩을 하실 차례입니다. 버튼을 더블클릭하세요.. 그러면 갑자기 소스가 바뀌면서 wFrm01.aspx.cs 라는 파일이 열릴 것입니다. 그리고 그 안에는 다음 그림과 같은 소스들이 이미 만들어져 있을 것이구요.

이 소스들이 무엇일까? 궁금하시겠지만, 아직은 이 소스들의 목적들을 잘 몰라도 괜찮습니다. 이번 강좌의 목적은 어떻게 구동하는지를 알고자 함이니까요.

이제 커서가 깜박이는..

private void Button1_Click(object sender, System.EventArgs e)
{

}

이라는 곳 안에다가 여러분은 코딩을 하시면 됩니다. 그러면, 버튼이 클릭되었을 경우에 일어나야 할 일을 우리가 지정하게 되는 것이지요. 버튼을 클릭할 경우, 우리는 Label 컨트롤의 Text 값을 "안녕하시렵니까? OOO 님" 이라고 나타나게 하려 합니다. 물론, 이 문자열에서 OOO 이라는 것은 사용자가 입력한 값을 가지고 나타내는 것이지요.

어떻게 코딩하면 될까요? 아주 간단하게도 다음처럼 하면 됩니다.

private void Button1_Click(object sender, System.EventArgs e) {      Label1.Text = "안녕하시렵니까? " + txtName.Text + " 님"; }

이것은 C# 파일이므로, C# 의 규칙에 맞게 대, 소문자를 구분해서 코딩해 주셔야 하구요. 문자열 결합하는 연산자는 +, 문장이 끝날 때마다는 ; 를 달아주어야 합니다. ^^

이것은 마치 Visual Basic 프로그램이나, 자바스크립트에서 여러분이 코딩했던 스타일과 매우 흡사합니다. 그렇지 않나요?

자. 말씀드린대로 이 페이지는 몇 번의 Drag & Drop과 한 줄의 코딩만으로 페이지가 완성되었습니다. 그렇다면 이제 이 페이지를 어떻게 실행하면 될까요? 그것 또한 아주 간단합니다. 먼저 프로젝트내의 파일 중에서 어떤 페이지를 실행할 것인지를 지정해야 하기에 다음 그림을 참고해서 [솔루션 탐색기]에서 wFrm01.aspx 페이지를 선택하고, 마우스 우측 클릭하여 "시작 페이지로 설정(P)"를 지정해 줍니다.

시작 페이지로 설정하셨으면 이제 이 파일을 컴파일해야 합니다.(사실, 반드시일 필요는 없습니다만...) ASP.NET에서는 모든 페이지를 작성하신 후에는 컴파일해야 합니다. 그러면 이 페이지는 IL 이라는 것으로 새로이 만들어지게 되지요. 중간 언어인 IL 로 컴파일이 되어져 있다가 사용자가 이 페이지를 요청하게 되면 JITer에 의해서 다시금 시스템에 맞게 다시 컴파일을 하게 되고, 메모리에 올라오게 됩니다. 이러한 내용은 여러분이 .NET FrameWork을 공부하시면 이해하실 수 있는 부분이구요. 저도 이쪽에 대한 강좌를 준비중에 있습니다.

자. 그럼 어떻게 컴파일을 하느냐. 메뉴에서 [빌드]를 선택하면 됩니다. 다음 그림처럼요.

빌드를 하게 되면, 밑의 출력 창에는 다음과 같은 빌드과 성공하였다는 메시지가 나와야 합니다. 특별히 오타를 치신 것이 없다면 다음과 같이 좋은 결과가 나올 것입니다.

이제 컴파일이 되었으니 파일을 실행하는 것만 남아있네요. [F5] 키를 누르시거나, 메뉴중에 시작을 눌러서 파일을 실행할 수 있습니다.

그러면, 이제 실행이 되고, 여러분은 대단히 심플한 다음과 같은 브라우저를 만나게 될 것입니다. 그리고, 이전 예제와 같은 방법으로 테스트 하시면 잘 동작하는 것을 알 수가 있지요. 이것이 웹 폼입니다.

구동되는 방식은 앞에서 설명드린 것과 같습니다. 재미있지 않습니까?

물론, 이 강좌에서 여러분은 많은 것이 궁금해졌을 것이고, 많은 것을 느끼셨을 것입니다. 하지만, 이번 강좌에서 부족하게 설명된 많은 부분은 그렇게 쉽게 빨리 설명할 수 있는 것들이 아닌 듯 합니다. 해서 우리는 이러한 기반 지식들을 조금은 느긋하게 공부해 나가는 자세가 필요하지 않은가 생각해봅니다. 무턱대고 빨리 뭔가를 만들어보고자 기본을 건너뛰는 자세는 결과적으로 부실한 솔루션을 만들어 내게 하니까요. 그렇지 않나요?

사람에 따라 견해의 차이가 있을 수 있다는 것을 압니다. ASPX 페이지를 하나라도 더 만들어 테스트 해보고, 게시판을 만들고 이곳 저곳 뜯어보고 하는 부분도 물론 중요하겠지만, 그 못지 않게 중요한 것이 ASPX 가 동작하는 그 배경을 이해하는 것이라는 생각이 드네요.

좋습니다. 같이 공부합시다.. 개인적으로는 여러분이 공부하는 데에 도움이 될 만한 서적으로 추천할만한 서적이 있습니다. 이 책을 통해서 여러분은 .NET Flatfrom 을 어쩌면 쉽게 이해하실 수 있을런지도 모르겠습니다.

정보문화사 - INTRODUCING MICROSOFT.NET

까만 책이구요. David S. Platt 가 쓴 책입니다. 가격은 만원이구요. 정말로 잘 쓴 책이더군요. 얼마나 많은 실무 경험과 프로그래밍 경력이 있으면 이런 전체적인 그림을 그릴 수가 있을는지 부럽습니다. 저는 요즘 이 책을 거의 안고 자다시피 하고 있습니다.

경고!! 개인적인 제 취향에 맞는 책이지만 어쩌면 여러분중에는 이 책이 오히려 따분하고 짜증날 수도 있다는 것은 염두에 두시기 바랍니다. 취향에 따라 선호하는 책은 틀린 법이니까요. ^^

뭐냐? 이게 뭐하는 분위기냐? 강좌가 여기서 끝이냐? 라고 물으신다면 솔직하게 말해서 그렇습니다. -_-; 아쉽겠지요? 아쉬워야 합니다. 그렇다면 어서 책을 펴시고, 공부를 시작하세요. 재미가 있다고 느끼는 그 순간이 가장 집중력이 좋은 시간입니다.

그럼.. 다음 강좌가 올 때까지 많이들 공부하시구요.(저도 시간을 쪼개서 또한 열심히 해보겠습니다) 좋은 정보나 글, 팁들이 있다면 Knowhow 게시판에 올려주시면 감사하겠습니다. ^^ Knowhow 게시판은 질문하는 곳이 아닙니다. 질문은 ASP.NET 게시판으로 부탁드립니다.

좋은 하루 되세요.

Back