Taeyo's ASP.NET
|
|
강좌 최초 작성일 : 2003년 04월 15일|
강좌 전 태오의 잡담> 아.. 저는 태오입니다. ^^; 설마 까먹으신 것은 아니겠죠? 하하하 이 강좌는 여러분이 기본적인 ASP.NET의 사용법을 어느정도 공부했다는 가정에서 출발하도록 할랍니다. 특히나, Taeyo's ASP.NET v1.0 라는 2003년 2월에 영진출판사(+인브레인 프레스)에서 나온 베스트셀러를 통해서 ASP.NET 을 공부하셨다면 더더욱 이 강좌가 도움이 될 겁니다. ^^; 아~ 네!! 은근한 책 광고는 이만큼만 하구요. 강좌를 진행해 보도록 하겠습니다. ^^; 이번 강좌는 여러분이 혹 은근슬쩍 지나쳤을지도 모르는 웹 폼 Page의 PreRender 라는 이벤트의 효과적인 사용방법에 대한 이야기입니다. 외국 Wrox의 서적에서는 이 부분이 Performance(성능)과 관계해서 무게있게 다루고 있기도 한데요. 이 PreRender 이벤트를 적절히 사용한다면 여러분은 코드의 반복을 상당히 줄일 수 있을 뿐 아니라, 전체적인 코드의 구성도 매우 깔끔하게 잡으실 수 있을 겁니다. 도대체 Page_PreRender 이벤트가 어떤 특별한 기능을 제공하기에 초반부터 그렇게 마구 과장을 쏟아붓느냐 하실 지 모르겠네요. ^^; 일단 한번 두고볼까요? 자. 먼저, 본격적인 이야기를 시작하기 전에 여러분과 함께, 웹 폼(WebForm)의 기본적인 이벤트 처리 순서를 한번 살펴보도록 하겠습니다. 크게 보았을 때, 웹 폼 페이지의 이벤트는 다음과 같이 분류할 수 있습니다. (이 내용은 Taeyo's ASP.NET 책의 185, 372 페이지를 참고하시면서 보면 더욱 좋습니다 -_-;;)
자. 이것이 Page의 이벤트들이 동작하는 흐름이랍니다. 멋지죠? 일반적인 경우는 이 이벤트들 중에서 Page_Load 를 제외하고는 그리 사용할 일이 없다는 것도 이미 여러분은 아시고 계실 겁니다. 여러분은 일반적으로 변수 초기화를 이 이벤트 내에서 하고 있을 것이며, DataGrid 로의 데이터 바인딩도 주로 이 장소에서 하시고는 할 것입니다. 그리고, 웹 폼 내에 존재하는 BUtton이나 TextBox 등의 컨트롤에서 발생한 이벤트들은 Page_Load 이벤트가 일어난 다음에 발생한다는 다음 사실도 알고 계실 겁니다. 그렇죠?
하지만, 위의 표는 단지 Page의 대표적인 이벤트만을 소개한 것에 불과하지요. 실제로는 웹 폼의 전체적인 이벤트 처리 프로세스는 다음과 같은 흐름을 가지고 있답니다. 물론, 아래의 그림에서 표현한 모든 것을 기억하고 있을 필요는 없지만, 나중에 여러분의 내공이 상승한다면 이 그림은 아마도 상당히 유용할 것이라 생각합니다. 하지만, 이러한 이벤트 구조로 인해 가끔은 코드 작성의 순서때문에 고민을 하신 적도 있을 것이라 추측합니다. 예를 들면, 웹 폼 서버 컨트롤들(Button, TextBox등)의 개별적인 이벤트들(ex: Clicked, TextChanged 등...)이 Page_Load 이벤트 이후에 발생함으로써 코딩 시에 여러가지를 예상하고, 고려해야만 하는 피곤한 점들이 생기곤 한다는 것이죠. 이해가 잘 안가시나요? 그렇다면, 예제를 통해서 한번 그 피곤함이라는 것이 무엇인지 확인해 보도록 하고, 그것을 어떤 식으로 개선해 나갈 수 있는지도 한번 알아보도록 해요 먼저, 여러분이 기존에 작업하던 VS.NET 프로젝트에(만일, 그런거 없다면 새로이 만드셔두 됩니다) PreRenderEventTest.aspx 라는 이름의 페이지를 하나 새로이 추가해 주세요. 사실 파일 이름이야 여러분 맘대로 주셔두 됩니다만... 그래도, 기왕이면 같이 해보죠~~ PreRenderEventTest.aspx 웹 폼을 만드셨다면, 폼 위에 DataGrid 컨트롤을 하나 올리시구요. 그 컨트롤에 마우스 우측클릭 한 다음, [자동 서식]에서 ]다양 2]를 선택하도록 하세요 물론, 이 스타일은 여러분이 원하는 것으로 선택해도 무방하긴 하지만 말입니다. ^^; 여기까지 되었다면, 현재 웹 폼의 [HTML] 모드로 이동하셔서 약간의 <style> 태그를 추가해 보도록 해요. 물론, 반드시 그래야하는 것은 아니지만 페이지의 출력결과가 조금은 깔끔하게 나올 수 있도록 말입니다. 다음과 같은 <style>코드를 <head> 구역에 추가하시면 될 것입니다.
자. 다 되었다면 이제 DaraGrid 컨트롤의 AutoGenerateColumns 속성의 값을 False로 주시고, cssClass 속성의 값으로는 아까 <style>에서 작성한 grid 를 주도록 해요. ^^; 그리고, DataGrid 컨트롤의 컬럼 출력부를 다음과 같이 한번 작성해 보도록 하자구요. 참고로, 이 코드는 제 ASP.NET 책의 'DataGrid' 장에서 예제로 작성해 보았던 페이지들과 거의 유사합니다. pubs 데이터베이스로부터 책 정보를 가져와서 그 목록을 출력해 주는 것이지요. 고로, 이미 그 부분을 공부하신 분들은 왜 Columns 섹션을 이와같이 꾸며야 하는지, 또한 이렇게 꾸미면 어떤 식으로 출력될지를 예상하실 수 있을 것이라 생각합니다. 말씀드렸다시피, 이번 강좌는 PreRender라는 잼나는 이벤트에 대해 알아보는 시간이지, DataGrid 컨트롤의 사용방법이나, <Columns> 구역의 작성 방법을 알려드리는 시간은 아니기에, 이러한 부분에 대한 설명은 과감하게 건너뛰려 합니다. 만일, 그 부분에 대한 학습이 아직 미흡하신 분들이 있다면 먼저 그러한 부분을 학습하신 다음에 이 강좌를 보셨으면 합니다. 개인적으로는 그래야지만 이 강좌에 대한 이해가 쏙쏙 될 것이라 생각하거든요.... ^^(코드 중 하얀 배경을 가진 부분이 직접 추가한 부분이 되겠슴다 ^^)
그리드에는 페이징 기능을 사용하도록 지정해 두었구요. 그리드의 마지막 컬럼에는 버튼을 하나 추가해 두었습니다. 이 버튼은 클릭될 경우, 현재 행을 편집모드로 바꾸기 위해서 둔 버튼일 뿐입니다. 그리고, 현재까지의 작업으로 웹폼은 다음과 같은 모습을 띄고 있을 겁니다. 그쵸? 그쵸?
자. 이제 화면의 출력부는 모두 작성한 것 같네요. 이제 코드 비하인드쪽으로 들어가서, DataGrid에 데이터를 반영해 보도록 합시다. 일반적으로라면 여러분은 다음과 같이 코드 비하인드 구역을 꾸미실 것으로 생각되네요(참고로, 이 강좌를 위해서 쓰이는 테이블은 SQL 서버에서 기본적으로 제공하는 Pubs 데이터베이스 내의 titles라는 테이블이랍니다)
대략적인 코드는 이해하실 것이라 생각합니다. 물론, 그리드의 AutoPaging 기능을 켜두었기에, 그리드에 데이터를 바인딩을 하기 전에 PageSize 를 지정해주면 그 크기에 따라 자동으로 그리드는 페이징이 될 것입니다. 하지만, 지금 상태로는 페이징이 절반밖에 되지는 않죠. 실제 페이징이 되려면, 해당 그리드 컨트롤의 PageIndexChanged 이벤트를 작성해 주어야 하니까요. 그렇다면, 그러한 코드를 한번 추가해 보도록 합시다. 이를 위해서는 그리드의 PageIndexChanged 이벤트 코드를 작성할 필요가 있는데요. 이 이벤트를 쉽게 작성하기 위해서 간단하게 웹 폼의 디자이너 모드에서 그리드를 마우스로 클릭한 뒤, [속성 창]에서 번개모양의 버튼을 클릭하고, PageIndexChanged 라는 이벤트구역을 더블클릭하시면 됩니다. 다음 그림처럼 말이지요.
그러면, 코드 비하인드 구역에 다음과 같은 코드가 자동으로 생성되구요. 여러분은 그 구역을 다음과 같이 작성하시면 됩니다.
해서, 위의 코드만으로도 여러분은 페이징이 되는 멋진 그리드를 만들어 낼 수가 있게 되지요. (물론, 자동 페이징 기능은 대량의 데이터를 다룰 경우에는 상당히 성능이 떨어집니다만, 지금처럼 20여개 밖에 되지 않는 데이터를 다룰 경우인지라 한번 사용해 보았습니다) 단, 위의 코드를 작성할 경우 주의할 점은 페이지 변경 시, 그 새로운 페이지를 DataGrid 컨트롤의 CurrentPageIndex 로 지정해 준 다음, 반드시 다시금 데이터를 바인드 해주어야 한다는 점입니다. 그렇지 않으면, 현재 지정한 페이지가 아닌 이전 페이지가 나올 수 있거든요. 자. 이제 페이지를 컴파일하고 한번 실행해 보세요. 페이지가 기대한 대로 동작하는 것을 확인할 수 있지요? 그렇다면, 이번에는 그리드에 올려져 있는 편집 버튼이 동작하도록 한번 만들어 볼까요? 이를 위해서는 그리드의 EditCommand 이벤트 코드를 작성할 필요가 있는데요. 이 이벤트를 쉽게 작성하기 위해서 간단하게 웹 폼의 디자이너 모드에서 그리드를 마우스로 클릭한 뒤, [속성 창]에서 번개모양의 버튼을 클릭하고, EditCommand 라는 이벤트구역을 더블클릭하시면 됩니다. 다음 그림처럼 말이지요. (참. EditCommand 이벤트는 <asp:ButtonColumn> 의 CommandName 이 edit 인 경우에 사용되는 이벤트라는 것은 알고 계시지요?)
위와 같이 더블클릭을 하면 코드 비하인드 구역에는 다음과 같은 이벤트 코드가 자동으로 생성될 것입니다. 그 코드 구역안에 코드를 다음과 같이 기입해 주세요. 이 코드는 현재 그리드 컨트롤에서 선택된 행을 편집모드로 지정하는 코드이구요. 그렇게 지정한 다음에는, 반드시 다시금 데이터를 바인딩해주어야 한답니다. 그래야지, 페이지가 다시 그려지면서 해당 행만이 편집모드로 나타나게 되는 것이지요
이렇게 작성하셨다면, 다시금 페이지를 컴파일하고 실행해 보도록 하세요 ^^. 그러면 이제는 페이징 기능과 함께 행 단위 편집 기능도 제대로 동작하게 될 것입니다. 다음 그림과 같이 말이지요 ^^
제가 샘플로 만들어 보는 기능은 여기까지 입니다. 서두에서도 언급했듯이, 이번 예제가 그리드 컨트롤의 사용방법에 대한 것은 아니니까요. 어디까지나, 이번 예제는 Page_PreRender 이벤트의 효과적인 사용법에 대한 이야기입니다. 혹시 까먹었을지 모르겠지만, 진짜입니다. -_-+ 해서, 그리드 컨트롤에다가 기능을 붙이는 것은 여기까지만 이야기하구요. 원래 하려던 이야기를 이제 시작해 볼까 합니다. 지금까지 코드를 멋지게 작성해 보았는데요. 코드를 작성하다보니 느껴지는 불만같은 것은 없었나요? 예를 들면, 불편하게 동일한 코드를 반복한다던지 하는 문제로 말이죠. 만일, 어떠한 불편도 느끼지 못했다면 뭐.. 기존과 같이 작성해도 큰 문제는 없습니다만...... 태오는 이러한 코드를 개선해 보려고 합니다. 개선하려는 것은 바로... Page_Load 이벤트 이후, 그리드에 기능을 추가하면서 매 이벤트마다 추가해야만 하는 Listing() 이라는 함수(바인딩을 위한 함수)의 위치에 대한 것입니다. 코드 비하인드 페이지에서 지금까지 작성한 코드를 한번 전체적으로 바라보도록 해요. 코드를 잘 보면 매 이벤트 처리함수마다 Listing() 이라는 함수가 반복되고 있는 것을 볼 수 있습니다.
Page_Load 에도, PageIndexChanged 이벤트에도, EditCommand 에도 말이지요. 이것은 당연한 것이긴 합니다. 그리드가 페이징이 되려면 PageIndexChanged 이벤트 함수에다가 새로이 출력할 페이지 번호를 지정한 뒤에 바인딩을 해 주어야 하고, 그리드의 특정 행을 편집하려면 또한, EditCommand 이벤트 구역에서 편집할 행 번호를 지정한 다음, 다시금 바인딩을 해주어야 하는 것은 당연하기 때문이지요. 하지만, 그러한 이벤트를 거치지 않을 경우, 즉 페이지가 처음 로드될 경우에도 데이터는 바인드 되어야 하기에, Page_Load 에서도 바인딩은 수행하고 있구요, 페이지가 포스트백 될 경우는(즉, 우리의 코드에서는 EditCommand 나 PageIndexChanged 경우에) 각각의 함수내에서 자체 바인드를 수행하기에 굳이 바인드를 먼저 수행할 필요가 없어서, Page_Load 이벤트 에서는 IsPostBack 여부를 체크해서 IsPostBack 이 아닌 경우에만 바인등을 수행하게 하고 있는 것입니다. 다시 말해서, 현재의 코드는 논리적으로는 조금 복잡한 다음과 같은 구조로 바인딩이 수행되고 있는 것이지요.
굳이 다시 설명드리자면, 페이지가 처음 로드될 경우는 무조건 Page_Load에서 바인딩!, 페이지에서 컨트롤의 이벤트가 발생할 경우는 Page_Load에서 바인딩하지 않고, 각각의 컨트롤 이벤트 구역내에서 바인딩을 수행하는 구조라는 것입니다. 이 구조가 나쁘다는 것은 아니지만, 페이지에 이벤트들이 많이 늘어나게 되면, 차후에 논리적으로 이런 이벤트 흐름을 머리속으로 계획하고, 코드를 작성하는 데에서 어떤 논리적인 오류가 발생할 가능성이 커진다는 문제가 있지요. 이 모든 문제의 근원지는 바로 Page_Load 입니다. 이 이벤트가 컨트롤들의 이벤트보다 앞서서 수행되기에 논리적으로 조금은 복잡하게 처리 순서를 머리속으로 정리해야 하는 것이지요. 그렇다면, 가정해 봅시당. 예를 들어, 어떤 이벤트가 있다고 가정해 보는 거지요. 그 이벤트는 컨트롤들의 이벤트들이 모두 일어난 다음에 발생하는 이벤트라고 가정해 보자는 겁니다. 그렇다면, 위의 코드 처리 방식은 다음과 같이 간단해 질 수 있습니다. 그렇지 않나요?
이렇게 되면, 기존처럼 바인딩을 수행하는 Listing() 을 Page_Load 이벤트와 각각의 컨트롤 이벤트에 분산시켜서 두고, 상황에 따라 수행되게 할 필요가 없어집니다. 단지, 그 처리(Listing())를 "모든 이벤트들이 처리된 다음, 마지막으로 수행되는 어떤 멋진 이벤트"에서 처리하면 전체적으로 코드와 구성이 깔끔해질테니까요. 그렇습니다. 눈치채셨겠지만, 그러한 이벤트가 바로 Page_PreRender 이벤트입니다. 그렇기에, PreRednder 이벤트를 여러분이 사용하게 되면, 기존의 코드는 간단해 지게 됨과 동시에, 논리적인 혼돈에서 벗어날 수도 있습니다. 단, 이 이벤트를 사용하려면 여러분은 코드 비하인드 구역에 이벤트 핸들러를 등록해 주어야 한답니다. 이 부분은 랭귀지(언어)에 약한 분들이 조금 피곤하게 생각할 수도 있는 부분일 것 같은데요. 뭐 그리 어려운 것은 아닙니다. 단지, 코드 비하인드 페이지 안에 내부적으로 숨어있는 InitializeComponent() 구역에다가 한 줄의 코드를 추가해 주기만 하면 되는 것이니까요. 여러분의 코드 비하인드 구역에 보면 Web Form Designer generated code 라고 되어져 있는 부분이 있죠? 그 부분을 확장시켜 보면 InitializeComponent() 라는 함수가 있을 것이고, 그 안에는 VS.NET이 내부적으로 만들어 둔 이벤트 핸들러 등록부분이 있을 겁니다. 다음과 같이 말이죠
그리고, 이제 여러분의 코드 비하인드에 Page_PreRender 이벤트 함수를 추가하시면 됩니다.
그리고, 여기에다가 바인드 하는 함수인 Listing()을 넣으면 되는 것이죠. 일단, 여기를 그렇게 꾸미게 되면 이제 기존 컨트롤의 이벤트 함수들에서는 Listing() 함수를 모두 제거할 수 있게 됩니다. 위에서 설명했듯이 말입니다. ^^ 해서, 최종적으로 꾸며지는 여러분의 코드 비하인드는 다음과 같게 되는 것이죠
그렇습니다. 바인드를 위한 코드는 이제 Page_PreRender 에다가만 작성하면 만사 OK 라는 의미입니다. 이렇게 되면, 여러분의 코드는 기존보다 훨씬 가독성도 높아지고, 코드의 양도 줄어들게 됩니다. 물론, 모든 경우에 Page_PreRender 를 사용하는 것이 좋다는 것은 아닙니다. 지금은 막상 적절한 예가 떠오르지 않습니다만.. 이 구역은 적절하게 상황에 맞게 사용해야 할 것입니다. 주로, 페이지에 뭔가를 출력하기 위한 코드들을 이곳에 위치시키는 것이 좋겠죠. 변수에 값을 할당한다거나 하는 초기화 작업은 이곳보다는 여전히 Page_Load 에서 해결하는 것이 좋을 것입니다. ^^ 정리하자면, Page_PreRender 이벤트 함수는 - 페이지 출력작업을 위한 마지막
구역이며, 이제 이 이벤트를 이용해서 여러분의 페이지를 좀 더 효과적으로 꾸며보세요. ^^ 태오였어요~~~
|
