ASP.NET에서 Page객체 내에 있는 IsPostBack과 IsCallBack의 차이를 명확히 몰랐다. 어떨때 Postback을 써야 할지, 어느 때 Callback을 써야 할지...

이제는 조금은 명확해져서 조심스럽게 포스트하도록 하겠다.

먼저 이 차이를 알려면, HTML을 이용한 서버 데이터 전송에 대해서 살펴보아야 할 것 같다.

예전 HTML로 작성된 데이터들은  정적 페이지라고 했다. 그 이유인 즉, 그 HTML 페이지에는 오로지 HTML 태그와 텍스트들로 나열되서 글과 그림 그리고 링크로 구성된 오로지 정보 전달만을 위한 페이지를 제공해 왔다. 그래서 당시 대부분의 홈페이지들은 텍스트와 이미지와 링크 만 있었고, 그나마 동적으로 움직이는 것을 움직이는 GIF나, 자바스크립트를 겨우 이용하는 정도 였다.  즐비했고, 사용자들은 서버에서 제공되는 값들을 이용만했지 절대 서버에 데이터를 주거나 하지 못했다.

그러다가, 이 HTML에 Form 이라는 것이 생겼다. 이 Form 내에 input 이라는 형태로 데이터들을 넣으면 form 내에 있는 각종 데이터들을 서버에 전달 할 수 있게 되었다. 아마 이 개념이 정립되면서 가입 양식 같은 형태로 만들 수 있었고, 이 가입양식 내에 데이터를 채우면 서버에 필요한 데이터를 전달할 수 있었다. 이 때 Form 안에 보면 action 이라는 속성 값으로 Html URL을 넘기게 되어있는데, 이 URL에 해당하는 서버로 데이터를 전송하게 된다. 이 때 부터 생긴 개념이 ghost 페이지라는 것이 생겼다. 이 ghost 페이지는 오로지 client에서 데이터를 받아 처리하는 로직만 담기고 실제로 사용자에게는 보여지지 않는 페이지였다.

이 개념을 ASP.NET에서 Postback이라는 것으로 만들었다. 즉 예전에는 총 3단계의 과정 [입력폼 페이지] -> [Ghost 페이지] -> [결과 페이지] 로 가졌던 것을 [입력폼 페이지] 하나만으로 그 Form 기능을 수행하게 하는 것이다.

ASP.NET에서 제공하는 System.Web.UI.WebControls 라는 네임 스페이스 안에 다양한 컨트롤들 Button, TextBox... 마치 Windows 클라이언트의 WinForm과 같은 컨트롤들을 생성해서 그 동작을 살펴보면 바로 저 Postback 개념으로 동작하는 것이다. 즉 예전 Form의 Post 방식으로 서버에 데이터를 전송하게 되는데, 단지 특정 Ghost 페이지가 아닌 자기 자신으로 다시 부르는 것이고, 이에 관련된 처리를 ASP.NET에서 자동으로 처리하는 것이다. 그래서 실제 프로그래밍 할 때는 Form 의 action이나, input 과 같은 태그 없이도 자동으로 클릭, 텍스트 변경 등의 이벤트에 대응되는 것이다.

그러나.... 이 방법은 큰 문제가 있으니, 바로 화면 Refresh이다. 이건 원래 Form의 Post 방식을 사용한 것이다 보니 Post가 발동 되는 순간 Form에 정의된 action의 페이지를 부르는 작업을 수행하는 것이다. 그 페이지가 다른 페이지던, 자기 자신이든 결국 그 페이지를 다시 부르는 것과 동일하기 때문에, 화면이 깜박이게 되는 것이다.

이 문제점에 대한 대안으로 callback이라는 것을 제공한다.
AJAX가 세상의 또하나의 트랜드가 되었을 때, 이번엔 HTTPRequest 라는 객체를 이용해 javascript로 데이터를 직접 읽어오는 로직을 ASP.NET으로 구현한 것이 바로 callback이라는 개념이다. 이 동작은 Form을 통해 데이터를 전달하는 것이 아니고 javascript가 독자적으로 httprequest 라는 모듈을 이용해 직접 페이지를 부르는 방법이기 때문에, 화면이 깜빡대지 않는다.


정리를 하자면, Postback은 옛날 개념, Callback은 근좌 유행한 AJAX 기반의 개념이라는 것. 그래서 일반적인 웹 컨트롤은 바로 Postback으로 체크하시면 되고, Callback은 ICallbackEvent 라는 인터페이스를 상속 받은 Page 객체 혹은 컨트롤에서 체크하면 된다.

728x90

여기서는  실제적인 Callback 구현에 필요한 각 부품들에 대한 소개와 그 조립 방법들을 전달한다.

일단 Callback을 수행하기 위한 Javascript를 구성하도록 한다.
Callback을 구현할 때 서버 내에서 동작하는 코드와 클라이언트 내에서 동작하는 코드로 나누어 구성한다. 물론 실제 구현 할 때는 대부분 서버 내에서 추가할 수 있지만, 실제 동작은 각기 나뉘어 동작하게 된다.
Callback의 시작과 종료 모두 Javascript를 이용하게 되기 때문에, 어느정도 Javascript에 대한 이해가 필요하다. (물론 고 난이도까지는 아니지만...)
자세한 내용은 아래의 more..를 클릭한다.


일단 Callback에서 가장 제일 중요하다고 생각되는 부분만을 정리해서 담아 보았다. 다음 3편에서는 실전에서 어떻게 쓰이는지 어떻게 활용할 수 있는지를 다시 둘러보는 시간을 갖도록 한다.

728x90

ASP.NET에서 사용되는 각종 서버 기반의 Control ( Button, TextBox 등등 )이 동작하는 방법을 가만히 살펴보면, 일부 컨트롤에서는 화면 리프레쉬 없이 동작하곤 한다. 또, AJAX 기분을 내기 위해 특정 영역 부분의 데이터만 업데이트 할 때가 있다. 보통 이런 경우 ASP.NET에서 제공하는 Postback이라는 기능을 알게 모르게 사용하게 된다.

왜 이런 기묘한 구성요소를 만들었을까?
일단 왜 이런 것이 필요한지에 대해 살펴보면서 진행하도록 한다. 과거 ASP나 PHP로 웹 응용 프로그램을 짜게 되면, 이른바 Ghost 페이지라는 것을 만들어 사용한다. 화면에 사용자의 입력을 받는 Form을 만들고, 그 Form의 Action 부분에 Ghost 페이지의 URL을 적어 동작하게 한다. 그래서 사용자가 입력 후 Submit 이라는 Form 동작을 하면 자동으로  이 Ghost 페이지를 호출하게 한다.
호출 되는 이 Ghost 페이지는 앞서 있던 Form에 있는 사용자 입력 값들을 GET이든 POST으로든 값을 받아, 이 값을 이용하여 서버에서 처리해야 되는 작업( 데이터베이스 입/출력 또는 비지니스 로직 등등)을 수행하게 된다.
이에 반해 ASP.NET에서는 Ghost 페이지 역할을 없애고 대신 이 Postback이라는 기능으로 대처하게 되었다. 즉 Form에서 Submit을 할 때, 예전 처럼 Ghost 페이지를 부르는 것이 아닌 자기 자신의 페이지를 부르는 것이다. 만일 default.aspx 페이지에 사용자 입력용 Form이 있다면, 그 Form에서 Submit을 하면 default.aspx를 다시 부른다는 것이다. 그래서 사용자의 입력값들을 모두 default.aspx 페이지 내에서 처리해 줄 수 있게 되는 것이다. 한개의 페이지 내에서 다양한 사용자의 액션도 처리할 수 있고, 보다 서버와 유기적으로 동작할 수 있다는 것이다. 페이지 리다이렉트 로 인해 발생되는 보안적인 오류( 이 Ghost 페이지에 별도 추가 설정을 하지 않는 경우 몰래 이 Ghost 페이지만 접속하여 해킹을 할 수 있다. )도 해결할 수 있고, 구현 작업을 위한 각종 소스가 별도 페이지로 쪼개지지 않아 유지보수에도 우수하다. 그외에도 이런 저런 장점이 있지만, 자세한 내용은 ASP.NET 관련 책자나, 사이트를 참조하도록 한다.

이제 이 Postback의 동작 원리를 살펴보도록 하겠다.
이 Postback의 동작을 따라가기 위해서는 먼저 ASP.NET으로 된 Page의 Life cycle 파악이 필요하다. 영어로 Life Cycle이라고 적어 뭔가 고상해 보일지는 모르겠다. 간단히 말해서 서버 상에서 이 ASP.NET 페이지가 언제 메모리에 올라갔다가, 언제 내려가는지를 살펴 보는 것이다.
ASP.NET으로 만든 페이지 자체가 HTML을 의미하는 것이 아니기 때문에, 웹서버에서는 이 ASP.NET 페이지를 메모리에 올려 각종 로직들을 처리하고 그 결과 값에 해당하는 HTML을 생성해서 뿌려주는 것이다. 즉 이런 전체 흐름을 보고 바로 Life Cycle이라 표현 한 것 뿐이다.

즉 Postback이 동작할 때 저 Life Cycle 중 언제 동작하는지를 명확히 알기 위해서는 바로 이 ASP.NET 페이지의 Life Cycle에 대한 이해가 필요하기에 먼저 그 부분을 짚고 넘어가도록 한다.

맨처음 ASPX 페이지를 Web Browser를 이용하여 Load 하게 되면 바로 ASP.NET 페이지의 Life Cycle이 시작된다. 아래의 그림을 보면 Page Load, CreateChildControl, OnPreRender, SaveViewState, Render 이런 순으로 나열 되어 있는데, 이 나열들의 하나하나들은 System.Web.UI.Page 에 만들어져 있는 각각의 메소드들을 의미한다.
보통 ASPX 페이지를 만들게 되면 System.Web.UI.Page를 상속 받아 구성하게 되는데, 상속 받게 되면 그 안의 메소드들이 자동으로 ASPX 페이지에 있는 것 처럼 된다. 물론 자신의 ASPX 페이지 내에 아래와 같은 메소드가 없어도 되는 것 같다고 말씀하시는 분이 계실지 모르겠는데, 만일 ASPX 페이지내에 해당 메소드를 구현 하지 않았다면, System.Web.UI.Page 클래스 자체에 있는 각각의 메소드를 대신 호출 하게 된다. 사실 ASP.NET 페이지를 가지고 여러가지 작업을 하게 되면 보통 아래의 순서들에 제신된 메소드들을 override 해서 대부분 쓰게 된다.

다시 원점으로 돌아와서, ASPX 페이지가 맨처음 불리게 되면 웹서버의 메모리에 올라가게 된다. 그 시점에 실행되는 부분이 바로 Page Load 부분이다. 이 부분은 대개 초기화에 관련된 사항들을 많이 넣게 된다. 그리고 난 뒤 CreateChildControl 이다. 완전 처음 부터 ASP나 PHP 등의 순수 웹 응용프로그램 언어 부터 출발하신 분들 께서는 이 부분이 명확하지 않은들 싶은데, 이 개념은 어떻게 되면 Windows 응용 프로그램 개발 프로세스에서 돌출된 사항으로 생각된다.
즉 ASP.NET에서는 System.Web.UI.Page 라는 큰 틀 안에 Control들을 붙인다는 생각에서 출발한 것이다. 예전에는 사용자 입력하는 값들이나 보여주는 부분을 대부분 HTML 페이지 내에 Form을 만들어 구성했었다. 그렇게 되면 사실 서버와는 완전히 분리되어 Form에서 Submit을 할 때까지는 서버와의 데이터 통신이 불가능하다. 그래서 ASP.NET 에서는 Server Control 이라는 개념을 만들었다. 그래서 그 컨트롤들을 System.Web.UI.Page 내에 붙여서 마치 Window Form 프로그램에서 처럼 넓다란 Form 위에 컨트롤들을 얹어 얹어 만드는 것처럼 구성한 것이다.
보통 해당 객체 내에 있는 Controls 라는 콜랙션 내에 더해주는 것으로 처리하게 된다.
(예 : Button btnOK = new Button; this.Controls.Add(btnOK); )
이런 유형의 소스 구현을 바로 CreateChildControl에서 수행한다.
다음은 OnPreRender. 이를 설명하려면 Render라는 것을 먼저 언급해야 할 것 같다. Render라는 것은 현재 Page 클래스내에 있는 Control들을 모두 합쳐 만든 HTML을 생성해주는 부분이다. 즉 실제 그리기 부분으로 이 부분에 직접 HTML을 뿌려주게 할 수 도 있고, CreateChildControl 에서 Controls.Add(xxxxx)를 통해 조립한 뒤 그 조립한 그대로를 자동으로 HTML화 시켜주기도 한다. 그런데, 이렇게 Render 하기에 앞서, UI에 관련된 일부분의 데이터 조작이나 수정작업을 할 때, 여기서 처리하게 된다. 대개는 PageLoad나 CreateChildControl에서 해주기는 하지만, 가끔Control이 생성되고 Add 되고 난 뒤, 별도 조작을 해야 하는 경우 바로 이 OnPreRender에서 그 뒷처리를 하곤 한다. 그리고 SaveViewState. 페이지가 새로 고침을 하는 경우 보통 HTML로 만든 경우 Input 내에 있는 각종 값들은 날라가게 된다. 그에 반해 ASP.NET을 이용해 만든 TextBox의 경우에는 새로 고침을 해도 값이 안전하게 담겨 있는 경우가 있는데, 그게 바로 이 SaveViewStatus 단계 때, 어떤 값들을 어떤 순서로 저장되는지를 정의하는 부분이다. 사용자가 Button을 누르게 되면 화면이 자동으로 새로 고침하게 되는데, 이 경우 ASP.NET의 Life Cycle이 Redner를 실행한 뒤, 모든 데이터가 사라지게 된다. 즉 C#으로 Behind Code로 클래스를 만들었을 때, 클래스 내의 맴버 변수들의 값들도 모두 사라지게 된다. 이 값들을 임시라도 저장을 할 때 이 부분에 구현하게 된다. 값을 실제 저장하는 방법들은 ASP.NET에 관한 다른 책들이나 자료를 참고하도록 한다. 마지막으로 Render.드디어 각종 처리를 수행한 뒤, 실제 HTML을 찍는 부분이다. 여기서는 HttpTextWriter 라는 개체를 제공하는데, 그 안에 원하는 HTML을 쓰거나, 아니면 base.Render()를 실행해서 해당 Page에 딸린 각종 서버 기반 Control들을 HTML화하여 자동으로 써지게 하는 것이다.

자 위의 Render 까지 하게 되면 실제 웹서버 상에서 해당 페이지 HTML을 클라이언트에게 제공하고, Page 및 그에 딸린 Behind Code들은 메모리 밖으로 퇴출된다. 즉, 모든 데이터들이 사라지게 되는 것이다. ( 물론 SaveVIewState에 저장해 놓을  수 있다. )

위는 ASP.NET 페이지의 Life Cycle이였다면, 과연 이 Postback은 언제 동작하는 것일까?.
일단 위의 모든 Life Cycle이 끝나야 한다. 실제 Postback 처리는 사용자가 실제 수행하는 동작을 대처하기 위한 부분이기 때문에, 무엇보다 선결되야 하는 것인 사용자의 웹브라우저에 HTML로 그림이 확실히 그려져 있어야 한다는 것이다. 그러기에 위의 단계가 완전히 끝나야, 실제적인 Postback이 실행 될 수 있는 조건이 된다.

Postback을 부르기 위해서는 대부분 Javascript를 사용하게 된다. 만일 Button 이라는 서버 기반의 컨트롤이 있다면, C#에서는 Button btnOK = new Button(); btnOK.Text = "OK!"; this.Controls.Add(btnOK);와 같은 단 세줄의 코드로 끝내져도, 실제 HTML로 찍히게 되면, 실제 Javascript를 이용하여 실행될 수 있도록 한다. 즉 ASP.NET의 서버 컨트롤이 진짜 서버에서 실행 동작된다고 보면 안되고, 실제로는 서버 컨트롤의 HTML + Javscript가 바로 그 서버 컨트롤이 된다.
Button .... 이라는 소스는 <input type="button" ..... >이 되고, 저 <input 태그 내에 Javacript로 서버를 다시 부르게 끔 하는 것이다.

아래의 그림을 보면 Callback이라고 적힌 부분이 있는데, Postback으로 이해를 하도록 한다.
자 아래의 Run Callback이라는 부분이 있다. Button에 해당하는 HTML 소스를 끄집어 내 보면 그 안에 click="webform.doPostback(......."  뭐 대충 이런 느낌의 메소드가 들어 있다.
바로 그 부분이 javascript 부분이고, 그 자바 스크립트에서는 각종 필요한 정보를 서버에 보내기 쉽게 구성하는 것이다.

자 이 Postback이 실행되면 어떻게 동작하는 것일까?
아래의 그림을 보시면 대략적인 Postback이 동작하는 그 순서를 볼 수 있을 겁니다.

맨 위의 Run Callback 이라는 부분이 있는데, 그 부분이 바로 Javascript로 된 서버 호출 로직을 담고 있는 부분이다. 이 부분이 기본 ASP.NET 컨트롤이라면 저 Run Callback이 Form의 Submit 으로 동작하는 부분일 것이고, 별도 PostBack 기반의 Callback Interface를 만들어 구성한 경우라면 Javascript로 실행하게 될 것이다. 여기서는 Javascript로 구성한 사용자 정의 Postback을 기준으로 나열할 것이므로 위의 그림이 나오는 것이다.

자 그림을 보면 Postback을 실행하는 경우 LoadViewState를 한뒤 CreateChildControl을 하고 Page를 Load 한다. 그리고 난 뒤 실제 Callback을 실행한다.
아까 맨처음에 떳던 그림과는 순서가 조금 다르지 않은가?

일단 제일 큰 차이점은 바로 Render 부분이 없다는 것이다.
Postback이 발생하였을 때, 실제 페이지에 대한 그림 그리는 부분은 없고, 단지 서버 상에서 ViewState를 복구하고 서버 컨트롤들을 구성한 뒤, Page Load 부분을 수행한다. 그리고 난뒤 Callback에 대한 실제적인 처리를 시작하게 된다. 그림 없이 데이터만 복구 하고 데이터만 돌려주는 구조라는 것이다.

위의 Page LifeCycle을 보면서 Callback에서 처리해야 하는 데이터에 대해 어떻게 보존할 것인지, 그리고 어떻게 처리할 것인지를 판단하면서, 맞추는 것이 관건이다.
초기 ASPX 페이지가 Load되서 Render된 후 Page Unload 되는 순간 모든 데이터는 파괴된다. ( 특히 aspx.cs 파일 내에 정의한 각종 member 변수들 ) 만일 이런 값들을 Callback에서 사용을 한다면 반드시 SaveViewState에서 저장해 놓도록 한다.

그리고 실제 Callback이 처리되어야 하는 로직에서는 RaiseCallbackEvent 에서 처리하도록 한다.

각 상세 코드는 2편에서 계속하도록 한다.

728x90

+ Recent posts

728x90