sentimentalist

근 한달만에 ASP.NET AJAX 관련 포스팅을 올리는 것 같다. 슬슬 1분기에 눈치를 보던 프로젝트들이 본격적인 달리기 모드로 들어가면서 쪼임과 압박이 심해져가는 탓에 시간을 내는 것이 쉽지가 않다. 누가 그랬던가, 아무리 프로젝트가 압박스럽고 삶이 괴로울 지라도 계속 공부해야 한다고! 한달동안 다들 열심히 하셨겠지만, 혹시나 이전에 배운 내용을 잊어 버리신 분들은 아래 링크들로 한번 돌아가서 기억을 되살리고 오도록 하자.

• ASP.NET AJAX #1, 일단 설치해보자!
• ASP.NET AJAX #2, 비동기 통신 레이어의 이해
• ASP.NET AJAX #3, UpdatePanel과 페이지 렌더링

UpdateProgress란?

우리가 흔히 PC에 어플리케이션을 설치하는 모습을 상상해 보자. 몇가지 필요한 정보와 설치에 필요한 경로를 지정하고 나면 프로그레스바(Progress Bar)라 흔히들 부르는 바 형태의 진척율 표시기를 만나게 된다. 앞서 소개한 예제들을 보면서 답답했던 것이 없는가? 아마도 쿼리시간이 오래 걸리거나 복잡한 로직을 수행할 때, 멍하니 화면이 바뀌기 만을 기다려야만 했을 것이다.

UpdateProgress 컨트롤은 AJAX 스타일의 웹페이지의 업데이트 상태를 나타내 주는 가장 기본적이면서도 필수적인 기능이라 할 수 있을 것 같다. 사용자는 늘 시스템이 무슨일을 하고 있는지 궁금해 한다. 에러가 나서 화면이 안뜨는 것인지 아니면 로직이 복잡해서 시간이 많이 걸리는 것인지를 우리는 사용자에게 알려줄 필요가 있다.

물론, 서버가 작업을 수행하는 동안 행하는 액션 하나하나를 캐치해서 주는 것은 힘들다. 하지만 최소한 기다리는 사람들에게 "지금 서버가 작업중이다"정도의 정보만 제공해 준다면 충분히 쓸만한 가치가 있을 것이라 생각한다.

언제 써먹을 수 있을까?

최근 유행하는 웹사이트의 스타일을 보면 다양한 템플릿을 가지고 화면을 사용자의 입맛에 맞게 구성할 수 있는 경우가 많다. ASP.NET 2.0에서 도입된 웹파트(Web Part) 역시 그러한 일종의 하나라고 볼 수 있다. 이러한 웹사이트라면 우리가 공부한 ASP.NET AJAX를 사용할만한 곳이 무궁무진하게 많을 것이라 쉽게 생각할 수 있지 않을까 싶다.

• 여러개의 UpdatePanel을 사용하는 경우 - 각 Panel의 비동기 업데이트
• 속도가 느린 웹서버 연동시 - 사용자는 지루하다!
• 복잡한 로직이 필요한 경우 - 열심히 일한다는 것을 알려주자

이외에도 생각해보면 참 많은 곳에 써먹을 수 있는 것이 UpdateProgress 컨트롤이다. 어플리케이션 설치시에 프로그레스바를 봤던 지점들을 한번 떠올려보자. 예상치 못한 많은 아이디어를 얻을 수 있을 것이다

동작원리

XMLHttpRequest 객체를 공부한 사람이라면 이미 알고 있겠지만, 그렇지 못한 분들을 위하여 간략하게 설명해 보겠다. 비동기 통신이 이루어질 때, 클라이언트는 이벤트 핸들러를 이용하여 서버의 상태를 확인할 수 있다.

1. XMLHttpRequest 객체의 Open 메소드 수행 전
2. Send 메소드 수행 전  (로딩중)
3. Send 메소드 수행 완료 (서버가 Request를 받음)
4. 서버가 처리중인 상태
5. 서버 처리 완료

(참고 : 보성이의 정보수집)

XMLHttpReuqest 객체를 이용하여 날코딩을 진행하는 경우 이같은 ReadyState 값을 획득하여 처리를 하지만 ASP.NET AJAX는 이러한 처리 없이 UpdateProgress 컨트롤을 사용하는 것 만으로 이 같은 노가다를 하지 않아도 된다. 정확히 기술문서를 확인해보지는 않았지만 2번과 5번을 이용하지 않을까 추측만 해본다. 아래의 코드는 세번째 포스팅에서 사용했던 소스코드에 UpdateProgress를 추가해본 화면이다.

코드에서 보이는 것처럼 ProgressTemplate라는 태그속에 있는 코드가 비동기 통신이 시작되면서 화면으로 보이게 되는 부분이다. 적절한 문구나 NoPD가 소개했던 AJAXLOAD.INFO사이트를 통해서 적절한 이미지를 받아서 넣어주면 될 것 같다. 해당 코드들은 Run-Time시에 UpdateProgress 컨트롤은 div 태그로 렌더링이 된다. DHTML에 익숙한 개발자라면 눈치챘겠지만, div로 렌더링 한 후에 display 속성을 show / hidden 으로 바꾸어 줌으로써 프로그레스 바를 표시해줄 수 있다. 

어떤 UpdatePanel에 반응할 것인가?

UpdateProgress를 사용하는 방법은 크게 두가지로 나뉘어 질 것 같다. 하나는 페이지 안에서 일어나는 모든 비동기 통신에 대하여 동일한 대기 화면을 보여주는 용도가 될 것이고 다른 하나는 UpdatePanel에 따라서 서로 다른 대기 화면을 보여주는 것이다.

페이지 내에서 특정한 UpdatePanel 안에 UpdateProgress 컨트롤이 들어가 있지 않고, UpdateProgress 컨트롤의 AssociatedUpdatePanelID가 지정되어 있지 않다면 기본적으로 모든 비동기 통신에 대하여 동일한 대기화면을 만들어 줄 수 있다. 반면 AssociatedUpdatePanelID 값이 지정되어 있다면 특정 UpdatePanel이 비동기 통신을 하는 경우에만 반응하게 될 것이다.

마치며

사실 복잡하게 UpdateProgress 컨트롤을 설명할 수도 있겠으나 쉽게 쉽게 가는 것이 NoPD의 ASP.NET AJAX의 목표인 만큼 설명하지 않고 넘어갔다. 그럼에도 불구하고 섬세한 컨트롤이 필요한 경우가 발생한다면 ASP.NET 사이트의 링크를 참고하여 코딩을 하면 좋을 것 같다.

- NoPD -