기본이 없는 기술은 언제나 반쪽짜리라는 것을 요즘 들어 더욱 강하게 느끼고 있네요

Hello. ASP.NET!!

 웹 폼(Web Form)과 웹 서버 컨트롤, PostBack 그리고 이벤트 중심적인 프로그래밍 방법을 모두 만나볼 수 있을 것이다.

 

Colored By Color Scripter

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<%@ 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 라는 이름으로 저장해보자.

만일, 가상 디렉터리가 무엇이고, 어떻게 만드는지를 모른다면 다음 강좌를 참고하도록 하라.

 http://www.taeyo.pe.kr/lecture/1_beginner/aspbook6.htm

 가상 디렉토리(이 강좌에서는 가상 웹 어플리케이션을 이렇게 지칭한다)

서버에 오직 단 한 개의 홈 디렉토리만이 있을 수 있다는 것은 상당히 피곤한 일이다.  그렇다면, 단 하나의 사이트밖에 구성할 수가 없기 때문이다. 그리고, 모든 ASP 페이지들이 반드시 wwwroot 의 하위로 존재해야 한다는 사실도 너무 제한적인 조건이다. 물론 홈 디렉토리의 서브로 여러 디렉토리를 만들어 사용할 수도 있지만 그 디렉토리들은 wwwroot 폴더의 모든 내용을 같이 적용받음으로서 여전히 독립적이지 못하다.

 

예를 들어보자. 그전에 먼저 한가지만 묻겠다. 여러분은 두루넷이나 천리안 등등에 홈페이지를 신청해 본적이 있는가? 있다면 그 업체들이 여러분들에게 홈페이지를 올리기 위한 장소를 제공하며 URL을 알려줄 것이다. 일반적으로 그들의 서버 URL에 ~여러분의 ID를 붙인 장소를 말이다.

 

예를 들면, http://myhome.thrunet.com/~taeyo로써

여러분이 회사에서 자그마한 서버를 관리한다고 치자. 이 서버는 웹서버이고, 여러분의 동료들은 이 서버에 자신만의 홈페이지를 만들고 싶어한다. 우리의 서버는 www.server.com이라고 할 때,어떻게 그 사원들만의 홈페이지 공간을 나누어 줄 것인가? 위의 두루넷 예처럼 말이다.

 

그 방법이 바로 가상 디렉토리이다. 가상디렉토리는 하나의 웹 서버에 무한대로 만들수가 있으며(하드 공간에 여유만 있다면), 위의 예와 마찬가지로 마치 서브 디렉토리처럼 url을 생성한다. 예를 들면, www.server.com/taeyo, www.server.com/dragon 처럼 말이다. 이것들은 마치 홈 디렉토리의 서브 디렉토리처럼 보이지만, 그렇지가 않다.

 

 

물론 홈 디렉토리의 서브 디렉토리이기는 하지만, 독립적인 서브 디렉토리이다. 홈 디렉토리의 그 어떠한 간섭도 받지 않고 독립적인 하나의 사이트처럼 행동하는 디렉토리인 것이다. 그렇다면 C:\inetpub\wwwroot\ 의 하위로 폴더를 만들면 되는 것인가?

그러면 가상 디렉토리가 되는 것인가? 그렇지는 않다. 가상 디렉토리를 만들기 위해서는 약간의 세팅이 필요하다. 그냥 디렉토리를 만들었다고 가상 디렉토리가 되지는 않는다. 이제 우리는 그 세팅을 알아보고자 하는 것이다. 세팅을 해보기 전에, 두 가지 더 이야기를 할 것이 있다.

가상 디렉토리라고 해서 반드시 그 물리적인 위치가 반드시 C:\inetpub\wwwroot 이하일 필요는 전혀 없다. 하드 공간의 그 어디에다가도 만들 수 있다. 어디다가 디렉토리를 만들던 전혀 상관이 없다는 것이다. 하지만 관리적인 차원에서 wwwroot의 하위로 만드는 것이 물론 좋은 편이다. 그러나, 이 부분은 지극히 개인적이니 여러분에게 맡긴다. 우리는 아무데나 만들어 볼 것이다. (C:\에다가 말이다)

위에서 홈페이지를 이야기할 때 두루넷은 http://myhome.thrunet.com/~taeyo 라고 ~가 들어가 있는데, 우리의 예에서는 단지 www.server.com/taeyo 라고만 되어있다. 왜 우리의 예에서는 ~가 빠진 것일까? 그것은 OS의 차이이다. Unix에서의 경우이고, NT에서는 ~없이 가능하다.

 

자신의 서버에 존재하는 aspx 파일을 실행시키기 위해서라면 브라우저로 다음과 같이 URL을 요청하면 된다.

http://localhost/TaeyoBook/Start.aspx

- http://서버이름/TaeyoBook/Start.aspx

- http://IP Address(아이피 주소)/TaeyoBook/Start.aspx

 

 

Colored By Color Scripter

1

2

3

4

5

6

7

8

9

10

11

12

13

<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>

<%@ Page language="c#"%>

language 라는 어트리뷰트를 사용하고 있는데, 이는 현재의 페이지에서 사용할 .NET 언어를 지정하는 특성이다. 우리는 현재의 ASP.NET 페이지에서 사용할 언어로 C#을 지정하고 있음을 알 수 있다.

 

소스의 다음부분은 <html>의 시작부분이며, 그 밑으로 다음과 같은 서버 사이드 스크립트 블럭이 나오고 있다.

    <Script runat="server">

    void btnSubmit_OnClick(Object sender, EventArgs e)

    {

        lblMsg.Text = "클릭!!!";

    }

    </Script>

ASP.NET 코드의 절반은 runat="server" 라고 말해도 과언이 아닐 정도로 runat="server"라는 어트리뷰트는 중요하다.

 

<form runat="server">

폼 태그 안쪽으로 runat="Server" 라는 어트리뷰트가 설정되어져 있다. 이 설정은 매우 중요하다. 바로 이 runat="Server"로 인해서 이 폼은 ASP.NET의 웹 폼(Web Form)이 되는 것이다. 두둥~~

개발자들은 웹 폼 내부에 놓여질 서버 컨트롤들과 프로그래밍적으로 용이하게 작업할 수 있게 된다.

 

하나의 ASP.NET 페이지에는 오직 하나의 웹 폼만이 존재할 수 있다는 사실도 기억하자. 

그리고, 모든 서버 컨트롤들은 반드시 웹 폼 구역안(<form runat="server"> </form>) 안에 존재해야만 한다. 그래야만 프로그래밍적으로 제어할 수 있다.

 

<asp:Label id="lblMsg" runat="server" />

Label 컨트롤은 단지 문자열의 값을 디스플레이하는 역할을 하는 단순한 기능의 컨트롤이다. 이 컨트롤은 서버 컨트롤로 사용할 것이기에 태그 안의 어트리뷰트로 반드시 runat="server"를 설정해주어야 한다. 그리고, 서버에서 프로그래밍적으로 이 컨트롤의 여러 속성들을 접근하기 위해서 id 를 부여해야 한다. 아이디는 웹 폼내에서는 고유한 값을 가져야 하며, 여기서는 Label의 약어인 lbl을 접두어로 사용하여 lblMsg 라고 그 값을 주었다.

 

서버 컨트롤은 서버에서만 인식되는 컨트롤이다.

클라이언트는 단지 자신이 받아 볼 결과에만 관심이 있다. 다시 말해서, 클라이언트에게는 원래의 aspx 소스를 훔쳐볼 방법이 없다.

 

asp:Button id="btnSubmit" runat="server"  

        Text="Click!!!" OnClick="btnSubmit_OnClick"/>

 

Button 컨트롤도 이 이벤트를 지원하는데, 이는 버튼이 클라이언트에 의해 클릭되었을 경우 발생한다. (정확히 말하자면, 버튼이 클릭되었을 경우, 서버로 폼을 서브밋하고, 다른 여러가지 기본 처리 후에, 버튼의 클릭 이벤트도 수행을 한다)그리고, OnClick 에 지정된 문자열과 같은 서버측의 함수를 찾아서 그 함수를 수행한다. 

 

클라이언트측의 버튼 클릭!! 서버측의 함수가 반응???

클라이언트측에서 서버측의 함수를 호출할 방법은 사실상 없다. HTTP 라는 프로토콜은 연결이 유지되는 환경이 아니기 때문이다.

사용자가 결과물을 브라우저로 확인하고 있을 당시에 서버와의 연결은 이미 끊긴 상태이고, 인터넷은 잠시 끊겨져 있는 상태라는 것을 기억하라. 그것이 웹이라는 환경의 특성이다. 그럼에도, 이와 같은 방법이 가능한 것은 클라이언트가 버튼을 클릭할 경우에 무조건 폼이 서버로 서브밋되기 때문이다. 

 

사용자가 버튼을 클릭할 경우를 알아보자. 위의 참고에서 이야기했듯이 버튼이 클릭될 경우에는 무조건 웹 폼은 서버로 서브밋을 시작한다. 즉, 포스트백이 발생한다는 것이다.

 

다시 한번 강조하는 데, <Script runat="server"> 라는 서버측 스크립트 블럭은 클라이언트는 전혀 볼 수 없는 구역이며, 오로지 서버측 개발자만이 볼 수 있는 구역이다. 또한, ASP.NET 에 의해 해석되고, 실행되는 구역이다. 

 

전송된 결과 HTML 에서는 서버측의 코드가 어떻게 구성되어져 있는지 알 수 있을만한 코드는 단 한줄도 없을것이다.

 

- 이 소스는 서버에 존재하고 있는 코드이며, 사용자는 이 코드를 볼 수가 없다. 

- <asp:Label> 이라는 컨트롤을 서버의 처리에 의해 <span> 태그로 둔갑하게 된다.

- <asp:Button> 이라는 컨트롤은 서버의 처리에 의해 <input type="submit"> 로 바뀌게 된다.

그렇게 바뀌어서 다음과 같은 HTML이 만들어지고, 이 HTML이 클라이언트의 브라우저에게 넘겨진다.

이 코드는 생성된 클라이언트 코드이다. 폼 태그쪽을 보면 action (즉, 폼이 서브밋될 서버 페이지명)이 자기 자신 페이지로 지정되어져 있고, 폼의 아이디도 서버에 의해 동적으로 부여되어져있다.

그리고, hidden 컨트롤이 하나 있는데, 그 이름은 _VIEWSTATE 이고, 값으로는 알아보기 힘든 값들이 들어있다. 이것은 서버측에서 여러 필요한 정보들을 base64 방식으로 인코딩하여 숨겨두는 방법이라고만 알아두자. 나중에 자세히 배우게 될것이다.

 

하지만, 이 화면이 바로 HTML로는 위와 같다는 사실은 알고 있을 것이라생각한다.

 

이 상태에서 클라이언트는 버튼을 클릭한다. 버튼을 클릭하는 순간, 폼은 서브밋되고, Start.aspx 는 서버로 페이지를 다시 구성해달라는 재요청을 하게 된다. 그 요청에 의해 클라이언트가 받아보게 되는 결과는 다음과 같은 HTML이다.

 

_VIEWSTATE 라는 컨트롤의 값들이 많이 늘어난 것을 볼 수 있으며, <span> 태그 안에는 "클릭!!!" 이라는 문자열이 추가되어져 있다. 버튼이 클릭되어, 서버에서 추가적으로 실행된 함수(btnSubmit_OnClick)의 결과만이 추가되어진 것이다. 

 

 

다음 그림을 통해서 클라이언트와 서버간의 흐름을 다시 한번 정리해 보자.

 

구체적인 ASP.NET의 처리방식, 이벤트 로딩순서등에 대해서는 계속해서 보강해 가며 알아볼것이다.

서버 사이드 스크립트 블럭내에서는 void btnSubmit_OnClick(Object sender, EventArgs e)라는 함수가 자리를 차지하고 있다. 

첫번째 Object 라는 타입의 인자를 사용해야 하며, 두번째 인자로는 EventArgs 타입의 인자를 사용해야 한다.

무조건 일반적인 경우는 (Object sender, EventArgs e) 를 사용한다고 기억해 두자. 이것은 ASP.NET에 의해 어느정도는 고정되어져 있다고 생각하자.

 

버튼이 클릭될 경우, 폼은 자기 자신 페이지로 전송이 되고, 버튼이 클릭하여 발생한 이벤트인 btnSubmit_OnClick 이라는 함수가 실행되어진다는 것은 알았는데 그런데, 만일 폼을 자기 자신 페이지가 아닌 다른 페이지로 전송한다면? 즉, 폼 태그 부분을 다음처럼 수정하여 action 을 다른 페이지로 지정한다면?

<form runat="server" action="otherPage.aspx">

이렇다면, 버튼이 클릭될 경우, 폼은 otherPage.aspx 로 전송되어질 것이고, otherPage.aspx 페이지의 btnSubmit_OnClick 함수가 실행되어지는 것인가? 만일, otherPage.aspx 페이지에 btnSubmit_OnClick 이라는 함수가 없다면? 이렇게 되면 상당히 많은 문제가 발생한다. 이것은 난감하지 않을 수 없다.

ASP.NET은 이러한 부분도 해결하고 있는데, 그것은 개발자가 폼의 action을 바꾸어도 그 내용은 무시해버리고, 자기 자신 페이지로 포스트백 하도록 한다는 사실이다. 그래서, 이전에 필자는 ASP.NET의 흐름은 다음 그림과 같다고 강조했던 것이다.

기억하자. 웹 폼의 action을 개발자가 바꾸어도 ASP.NET은 그 경로를 자기자신 페이지로 강제한다는 것을 말이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


+ Recent posts