그렇다. 오랫동안 기다렸다. 손가락이 날뛰고 싶어하는 것을 오랫동안 참고 견디게 한 여러분의 노고를 치하한다. 그러면 이제 개념적인 이야기들을 잠시 접고, 우리의 첫번째 ASP.NET을 바라보도록 하자. 이 간단한 하나의 예제에서 여러분은 웹 폼(Web Form)과 웹 서버 컨트롤, PostBack 그리고 이벤트 중심적인 프로그래밍 방법을 모두 만나볼 수 있을 것이다.
메모장을 열고 다음과 같은 코드를 작성하자.(아직은 Visual Studio.NET을 사용하기에 이르다)
| <%@ Page language="c#"%> <HTML> <Script runat="server"> void btnSubmit_OnClick(Object sender, EventArgs e) { lblMsg.Text = "클릭!!!"; } </Script> <body> <form runat="server"> <asp:Label id="lblMsg" runat="server" /><br> <asp:Button id="btnSubmit" runat="server" Text="Click!!!" OnClick="btnSubmit_OnClick" /> </form> </body> </HTML> |
그리고, 이 페이지를 여러분의 가상 디렉터리에 Start.aspx 라는 이름으로 저장해보자. 때오는 TaeyoBook 라는 가상 디렉터리를 만들어 두었다. 만일, 가상 디렉터리가 무엇이고, 어떻게 만드는지를 모른다면 다음 강좌를 참고하도록 하라.
http://www.taeyo.pe.kr/lecture/1_beginner/aspbook6.htm
자. TaeyoBook 이라는 가상 디렉토리를 만들고, 그 안에 위의 파일을 Start.aspx 라는 이름으로 저장했다면, 이제 이 파일은 인터넷을 통해 공개가 되어진 것이다.(여러분의 IP주소가 고정 IP라면) 만일, 여러분이 사설 네트워크 망내에 들어있다면(대부분의 학원, 학교, 교육센터가 그러하다) 여러분의 ASP.NET 사이트는 외부인들은 구경해볼 수 없을 것이다. 하지만, 사설망안의 사람들은 여전히 가능하다.
대부분 아는 이야기겠지만, 개발자 자신이 자신의 서버에 존재하는 aspx 파일을 실행시키기 위해서라면 브라우저로 다음과 같이 URL을 요청하면 된다. 세 가지 중 어떤 방법이든지 사용해도 무관하지만, 일반적으로는 첫번째 방법을 많이 사용한다.
- http://localhost/TaeyoBook/Start.aspx
- http://서버이름/TaeyoBook/Start.aspx
- http://IP Address(아이피 주소)/TaeyoBook/Start.aspx
다음 화면은 이렇게 실행하였을 경우에 나타나는 결과화면이다. 왼쪽은 페이지가 로드되었을 경우의 화면이고, 버튼을 클릭하였을 경우의 화면은 우측과 같다.
좋다. 일단 동작했다는 점은 맘에 든다. 이번에는 브라우저의 결과화면에서 [보기] [소스 (C)]를 선택해서 결과 HTML은 어떻게 만들어졌는지 확인해 보자. 아마도 다음과 비슷할 것이다. (소스 중에는 <input type="hidden" 컨트롤이 하나 있을텐데 그 안에 들어있는 값들은 때오의 것과 다를 수 있다)
| <HTML> <body> <form name="_ctl0" method="post" action="Start.aspx" id="_ctl0"> <input type="hidden" name="__VIEWSTATE" value="dDwtOTk1MjE0NDA4O3Q8O2w8aTwxPjs+O2w8dDw7bDxpPDE+ Oz47bDx0PHA8cDxsPFRleHQ7PjtsPO2BtOumrSEhITs+Pjs+Ozs+Oz4+Oz4+ Oz6H3gaYy7qY2B/L0EAGvSqLn3ak8w==" /> <span id="lblMsg">클릭!!!</span><br> <input type="submit" name="btnSubmit" value="Click!!!" id="btnSubmit" /> </form> </body> </HTML> |
다 되었다. 이제 뭐가 어떻게 된 것인지 설명을 듣는 것만이 남아있다. 그러나, 주의하라. 새로운 기술의 첫번째 예제를 이해하는 것은 매우 중요하다. 첫번째 예제를 어떻게 이해했느냐에 따라 이후의 모든 예제들을 같은 방식으로 이해하려 들 것이기 때문이다. 그런 놀라운 적응력을 여러분들은 보유하고 있다. 그렇기에 이번 예제를 제대로 이해하려는 노력이 필요하다.
먼저, 원래의 aspx 의 소스를 라인별로 알아보자. 첫번째 라인의 소스는 다음과 같았다.
<%@ Page language="c#"%>
이 부분은 ASP.NET 페이지에서만 사용 가능한 @Page Directive 라는 지시자 구역이다. 반드시 <%@ Page 라는 것으로 시작해야 하며, 이 안에 여러가지 설정을 지정할 수 있다. 이 구역에 지정하는 설정은 ASP.NET 파서와 컴파일러에 의해 사용되어지며, Page 의 여러가지 특성을 정의하기 위해 사용된다. @Page 지시자내에 사용할 수 있는 여러가지 어트리뷰트들은 차후 하나씩 알아보게 될 것이다. 우리의 코드에서는 그 어트리뷰트중에서 language 라는 어트리뷰트를 사용하고 있는데, 이는 현재의 페이지에서 사용할 .NET 언어를 지정하는 특성이다. 우리는 현재의 ASP.NET 페이지에서 사용할 언어로 C#을 지정하고 있음을 알 수 있다.
소스의 다음부분은 <html>의 시작부분이며, 그 밑으로 다음과 같은 서버 사이드 스크립트 블럭이 나오고 있다.
<Script runat="server">
void btnSubmit_OnClick(Object sender, EventArgs e)
{
lblMsg.Text = "클릭!!!";
}
</Script>
서버에서 처리될 스크립트 블럭은 반드시 위처럼 runat="server" 라는 특성을 보유한 <Script> 코드로 작성되어야 한다. ASP.NET 코드의 절반은 runat= "server" 라고 말해도 과언이 아닐 정도로 runat= "server"라는 어트리뷰트는 중요하다.
스크립트 블럭내에서는 void btnSubmit_OnClick(Object sender, EventArgs e)라는 함수가 자리를 차지하고 있지만, 이 함수에 대한 설명은 잠시 미루자. 이 함수는 서버측에서 누군가가 호출을 할 경우에만 작동하는 함수이다. 아직은 그 누구도 이 함수를 부르지 않았으니, 실제로 누군가가 부르는 경우 그 때 이 함수를 확인해 보자.
이제 <body> 안으로 들어간다. 그 안에는 다음과 같은 폼의 코드가 있다.
<form runat="server">
폼 태그 안쪽으로 runat="Server" 라는 어트리뷰트가 설정되어져 있다. 이 설정은 매우 중요하다. 바로 이 runat= "Server"로 인해서 이 폼은 ASP.NET의 웹 폼(Web Form)이 되는 것이다. 두둥~~
잠시 시간이 정지한 듯 보였을 것이다. 이해한다. 웹 폼의 정체가 이토록 썰렁한 것이라는 사실을 알았을 때, ASP.NET의 새로운 프로그래밍 모델인 웹 폼의 정체가 단지 이것이라는 것을 알았을 때의 그 실망감.. 때오도 같은 기분을 느꼈었다. 그러나, 한편으로는 대단한 것이다. 단지 runat= "server"라는 어트리뷰트의 지정만으로 이 폼은 실제로 웹 폼으로써 동작하게 된다. 실제 운영에 필요한 하부구조는 ASP.NET이 준비해 놓은 것이다. 어쨋든 이렇게 웹 폼이 구성되어지면 우리 개발자들은 웹 폼 내부에 놓여질 서버 컨트롤들과 프로그래밍적으로 용이하게 작업할 수 있게 된다.
하나의 ASP.NET 페이지에는 오직 하나의 웹 폼만이 존재할 수 있다는 사실도 기억하자. 그리고, 모든 서버 컨트롤들은 반드시 웹 폼 구역안(<form runat="server"> </form>) 안에 존재해야만 한다. 그래야만 프로그래밍적으로 제어할 수 있다.
이제 폼 내부의 코드로 들어가 보자. 그 안에는 2 개의 ASP.NET Web Control 들이 존재하고 있다. 처음보는 이름의 <asp:Label>과 <asp:Button> 은 그 명쾌한 이름으로 인해 컨트롤들이 ASP.NET 에서 새로이 제공하는 컨트롤이라는 것을 느낄 수 있게 하며, 동시에 각각의 컨트롤이 Label, Button 컨트롤이라는 것을 알 수 있게 하고 있다.
<asp:Label id="lblMsg" runat="server" />
Label 컨트롤은 단지 문자열의 값을 디스플레이하는 역할을 하는 단순한 기능의 컨트롤이다. 이 컨트롤은 서버 컨트롤로 사용할 것이기에 태그 안의 어트리뷰트로 반드시 runat= "server"를 설정해주어야 한다. 그리고, 서버에서 프로그래밍적으로 이 컨트롤의 여러 속성들을 접근하기 위해서 id 를 부여해야 한다. 아이디는 웹 폼내에서는 고유한 값을 가져야 하며, 여기서는 Label의 약어인 lbl을 접두어로 사용하여 lblMsg 라고 그 값을 주었다.
현재 우리의 ASP.NET 코드상에서는 <asp:Label > 컨트롤이지만, 이 코드가 컴파일되고 실행되서 결과물이 만들어질 때에 이 코드는 <span> 태그로 바뀌게 된다. 다음은 이 Label 컨트롤의 코드가 클라이언트에게 전달될 경우에 생성되는 결과 HTML 이다.
<span id="lblMsg"></span>
|
서버 컨트롤은 서버에서만 인식되는 컨트롤이다. 클라이언트는 서버에 그러한 컨트롤이 있는지에 대해서는 전혀 알지 못한다. 또한, 클라이언트에서는 서버측의 컨트롤에 접근할 수도 없다. 우리가 작성한 모든 코드는 서버에서 실행시에 사용되는 컨트롤들이다. 클라이언트는 단지 자신이 받아 볼 결과에만 관심이 있다. 다시 말해서, 클라이언트에게는 원래의 aspx 소스를 훔쳐볼 방법이 없다. |
그 다음 컨트롤은 Button 컨트롤이다. 마찬가지로 반드시 runat= "server" 라는 부분을 지정해 주어야 하며, id 값도 부여해야 한다. 소스에서는 id를 btnSubmit 라고 지정하였다. 그리고, Text 속성의 값을 지정하고 있다. Text 속성은 버튼이 화면에 출력될 경우에 버튼에 쓰여질 텍스트 문자를 나타낸다. 소스에서는 "Click!!!" 이라고 지정하고 있으며, 결과화면에서 그러한 텍스트를 가진 버튼을 우리는 볼 수 있게 될 것이다. 그리고, OnClick 라는 것에 btnSubmit_OnClick 이라는 값을 지정하고 있는 것을 볼 수 있다.
<asp:Button id="btnSubmit" runat="server"
Text="Click!!!" OnClick="btnSubmit_OnClick" />
이것이 바로 웹 폼, 서버 컨트롤들의 이벤트 지정이다. 컨트롤들이 지원하는 이벤트들이 컨트롤들마다 조금씩 다르기는 하지만 대부분의 컨트롤이 OnClick 이라는 이벤트를 지원한다. Button 컨트롤도 이 이벤트를 지원하는데, 이는 버튼이 클라이언트에 의해 클릭되었을 경우 발생한다. (정확히 말하자면, 버튼이 클릭되었을 경우, 서버로 폼을 서브밋하고, 다른 여러가지 기본 처리 후에, 버튼의 클릭 이벤트도 수행을 한다)그리고, OnClick 에 지정된 문자열과 같은 서버측의 함수를 찾아서 그 함수를 수행한다. 만일, 지정된 이름의 함수가 없다면 에러가 발생할 것이다. 그리고, 함수 이름의 대,소문자의 지정이 틀려도 에러가 발생할 것이다. C# 이라는 언어는 문자의 대. 소문자를 구별하는 언어이다. 즉, "a" 와 "A"를 다르게 생각한다는 것이다. 그러므로, "함수를 찾을 수 없습니다."와 같은 에러는 마주하게 되면 스펠링의 대,소문자가 틀리지는 않은지를 검사하도록 하라.
그리고, 이 컨트롤의 소스(태그)를 잘 보면 태그가 닫히기 직전에 / 라는 문자를 사용하고 있는 것을 볼 수 있다. 이는 태그가 닫는 태그(</asp:Button> 과 같은)를 사용하지 않을 경우 반드시 넣어주어야 하는 문자이다. /를 사용하면 닫는 태그를 쓰는 것과 같다고 볼 수 있다. 서버 컨트롤들은 반드시 이렇게 태그의 닫힘을 명확히 지정해 주어야 한다. 그렇게 하지 않으면 제대로 동작하지 않는다.(에러가 발생할 것이다)
또한, Button 컨트롤도 현재 우리의 ASP.NET 코드상에서는 <asp:Button> 컨트롤이지만, 이 코드가 컴파일되고 실행되서 결과물이 만들어질 때에 이 코드는 <input type="submit"> 태그로 바뀌게 된다. 다음은 이 Button 컨트롤의 코드가 클라이언트에게 전달될 경우에 생성되는 결과 HTML 이다.
<input type="submit" name="btnSubmit" value="Click!!!" id="btnSubmit" />
자. 이제 ASP.NET 페이지가 어떻게 구성되어져 있는지 간략히 알아보았다. 자. 그럼 이제 좀 더 구체적으로 알아보자. 페이지가 실행될 경우, 그리고 페이지에서 버튼이 클릭되는 이벤트가 발생할 경우 어떤 일들이 추가적으로 일어나는지를 말이다.
|
버튼이 클릭되었을 경우에 위의 설명대로라면 btnSubmit_OnClick 이벤트 함수가 처리되겠지만, 잘 보면 버튼을 클릭하는 것은 클라이언트 측의 행동이고, btnSubmit_OnClick 함수는 서버측에 있다. 클라이언트측에서 서버측의 함수를 호출할 방법은 사실상 없다. HTTP 라는 프로토콜은 연결이 유지되는 환경이 아니기 때문이다. 사용자가 결과물을 브라우저로 확인하고 있을 당시에 서버와의 연결은 이미 끊긴 상태이고, 인터넷은 잠시 끊겨져 있는 상태라는 것을 기억하라. 그것이 웹이라는 환경의 특성이다. 그럼에도, 이와 같은 방법이 가능한 것은 클라이언트가 버튼을 클릭할 경우에 무조건 폼이 서버로 서브밋되기 때문이다. 폼의 모든 데이터들이 서브밋이 되어지며, 동시에 현재 서버측의 btnSubmit_OnClick 라는 이벤트 함수를 호출하였다라는 정보도 같이 서버로 전송되어진다. 서버에서는 현재의 aspx 페이지를 다시금 생성하면서 추가적으로 btnSubmit_OnClick 라는 함수도 실행한다. 대략 이러한 식으로 페이지가 동작한다는 사실을 잠시 알아두기 바란다. 곧 구체적인 실행의 흐름과정을 알아보겠지만, 먼저 살며시 알아두는 것도 이해에 도움이 되리라 생각한다. |
이제 Start.aspx 페이지의 첫 페이지가 로드되고, 사용자가 버튼을 클릭할 경우를 알아보자. 위의 참고에서 이야기했듯이 버튼이 클릭될 경우에는 무조건 웹 폼은 서버로 서브밋을 시작한다. 즉, 포스트백이 발생한다는 것이다. 별다른 제약을 두지 않는 한 기본적으로 웹 폼내에 존재하는 모든 버튼 서버 컨트롤들은 클릭시 웹 폼을 포스트백하게 된다. 단, 자신의 페이지로 폼을 서브밋하면서(즉, 포스트백) 현재 btnSubmit_OnClick 이라는 이벤트도 발생하였다라는 정보를 같이 넘긴다.
aspx 페이지는 사용자가 페이지를 요청하던, 버튼을 클릭하여 포스트백이 일어나던 매번 페이지의 요청에 따라 동적으로 결과물을 처음부터 다시 생성하기 시작한다. 버튼이 클릭되지 않은 첫 페이지의 로드시에는 btnSubmit_OnClick 이라는 함수는 실행되지 않은 채 결과 페이지가 생성되게 되지만, 버튼이 클릭되어 btnSubmit_OnClick 이라는 함수를 요청하게 되면, 결과 페이지가 생성되어지는 와중에 btnSubmit_OnClick 이라는 함수도 실행되어지게 되고, 그 결과를 포함한 결과물이 생성되어진다.
|
지금은 btnSubmit_OnClick라는 함수의 인자로 왜 (Object sender, EventArgs e)라는 것을 사용하고 있는지에 대해서는 잠시 무시하도록 하자. 곧 그 부분에 대한 자세한 설명이 뒤따를 것이다. |
void btnSubmit_OnClick(Object sender, EventArgs e)
{
lblMsg.Text = "클릭!!!";
}
위처럼 btnSubmit_OnClick 이라는 함수안의 코드는 서버측에서 실행되어지면 서버측에서 프로그래밍적으로 Label 서버 컨트롤로 접근하여 lblMsg 라는 컨트롤의 Text 값을 "클릭!!!" 으로 설정하게 된다. 그리고, 그 결과에 의한 HTML을 다시금 동적으로 구성하게 된다. 해서, 버튼을 클릭했을 경우에는 결과화면으로써 다음과 같이 Label 컨트롤에 "클릭!!!" 이라는 출력문자가 포함된 것을 보게 되는 것이다.
다시 한번 강조하는 데, <Script runat="server"> 라는 서버측 스크립트 블럭은 클라이언트는 전혀 볼 수 없는 구역이며, 오로지 서버측 개발자만이 볼 수 있는 구역이다. 또한, ASP.NET 에 의해 해석되고, 실행되는 구역이다. 지금 브라우저에 의해 결과화면을 보고 있다면, 그 결과화면에서 HTML 소스를 보도록 하자. 클라이언트에게 전송된 결과 HTML 에서는 서버측의 코드가 어떻게 구성되어져 있는지 알 수 있을만한 코드는 단 한줄도 없을 것이다.
그렇다. 머리가 아프다. 만일, 여러분이 이전에 웹 프로그래밍을 접해본 적이 없다면, 이것은 더더욱 여러분의 머리를 죄어올 것이다. 게다가 만일 여러분이 이전에 C/S 프로그래밍에 익숙해져 있는 개발자라면 어쩌면 처음 ASP.NET을 접하는 이들보다 더욱 머리가 아플 수도 있다. 그래서 습관이라는 것이 무서운 것이다.
더이상 여러분의 머리를 아프게 하지 말자. 그런 의미에서 이 전체적인 흐름을 다시 한번 친절한 그림과 함께 일단 정리해 보도록 하자. 이것을 이해하는 것은 매우 중요하다. 물론, 이미 ASP 를 중급정도 다룰 수 있는 독자가 있다면 그리 어렵지 않게 받아들여질 수 있는 이야기일 것이지만, 그들은 더 잘 알고 있을 것이다. 이러한 기본적인 개념을 이해하는 것이 얼마나 중요한 것인지 말이다.
다음 그림을 보자. 이것은 우리가 작성한 Start.aspx 의 원본 소스이다.
- 이 소스는 서버에 존재하고 있는 코드이며, 사용자는 이 코드를 볼 수가 없다.
- <asp:Label> 이라는 컨트롤을 서버의 처리에 의해 <span> 태그로 둔갑하게 된다.
- <asp:Button> 이라는 컨트롤은 서버의 처리에 의해 <input type="submit"> 로 바뀌게 된다.
그렇게 바뀌어서 다음과 같은 HTML이 만들어지고, 이 HTML이 클라이언트의 브라우저에게 넘겨진다.
이 코드는 생성된 클라이언트 코드이다. 폼 태그쪽을 보면 action (즉, 폼이 서브밋될 서버 페이지명)이 자기 자신 페이지로 지정되어져 있고, 폼의 아이디도 서버에 의해 동적으로 부여되어져 있다.
그리고, hidden 컨트롤이 하나 있는데, 그 이름은 _VIEWSTATE 이고, 값으로는 알아보기 힘든 값들이 들어있다. 이것은 서버측에서 여러 필요한 정보들을 base64 방식으로 인코딩하여 숨겨두는 방법이라고만 알아두자. 나중에 자세히 배우게 될 것이다.
물론, 여러분이 브라우저로 보게 되는 결과는 위의 코드가 아닌 다음과 같은 화면일 것이다. 하지만, 이 화면이 바로 HTML로는 위와 같다는 사실은 알고 있을 것이라 생각한다.
서버측의 코드와 클라이언트측의 결과를 비교해 보니 조금은 이해가 쉽다. 그렇지 않은가? 만일, 이해가 안가는 부분이 있다면 가장 좋은 방법은 일단은 그냥 외우는 방법이다. 프로그래밍은 많은 예제와 실습을 통해서 여러분의 것이 되어지기에, 지금의 설명이 피부에 와닿지 않을 수 있다. 그럴지라도 조급하지 말자. 곧 여러분의 것이 될 것이다.
자. 이 상태에서 클라이언트는 버튼을 클릭한다. 버튼을 클릭하는 순간, 폼은 서브밋되고, Start.aspx 는 서버로 페이지를 다시 구성해달라는 재요청을 하게 된다. 그 요청에 의해 클라이언트가 받아보게 되는 결과는 다음과 같은 HTML 이다.
_VIEWSTATE 라는 컨트롤의 값들이 많이 늘어난 것을 볼 수 있으며, <span> 태그 안에는 "클릭!!!" 이라는 문자열이 추가되어져 있다. 버튼이 클릭되어, 서버에서 추가적으로 실행된 함수(btnSubmit_OnClick)의 결과만이 추가되어진 것이다. _VIEWSTATE의 값이 늘어난 이유에 대해서는 곧 알아보게 될 것이다. 그리고,다음 그림은 이 HTML가 사용자 브라우저에 보여질 경우의 화면이다.
또한, 다음 그림을 통해서 클라이언트와 서버간의 흐름을 다시 한번 정리해 보자.
|
서버 컨트롤은 서버에서만 인식되는 컨트롤이다.