한빛출판네트워크

저자: 한동훈(traxacun)

[지난기사보기]
• ASP.NET 가이드 5. NDoc을 통한 코드 문서화
• ASP.NET 가이드 4. 통합 예외처리
• ASP.NET 가이드 3. UI 향상 및 사용자 템플릿 만들기
• ASP.NET 가이드 2. 숫자/문자 입력 텍스트 박스 만들기
• ASP.NET 가이드 1. 자바 스크립트 사용하기

자바 스크립트와 연관된 부분을 다루는 것은 이번 글을 끝으로 끝난다. 지금까지 읽은 분들이라면 자바 스크립트 추가를 위해 사용하는 방법에 대해 충분히 숙지하고 있을 것이기 때문에 여기서는 간단히 해당 함수의 사용법을 살펴보고, 코드 설명은 간략하게 하는 것으로 마칠 생각이다.

자동 포커스 이동

텍스트 박스들간에 포커스 이동이 필요한 것중에 대표적인 것이 신용카드 번호입력이다. 물론, 이외에 업무용 프로그램들을 작성하면서 1 - 환매, 2 - 매절 등과 같은 거래유형에 대한 숫자 입력이라든가 거래처 코드, 상품 코드 입력에 있어서도 사용자 편의를 위해 자동 포커스를 이용할 수 있다. 대부분의 응용 프로그램에서 자동 포커스가 무시되는 이유는 웹 페이지를 개발할 때마다 그에 상응하는 자바 스크립트를 작성하는 반복 작업을 해야한다는 것이고, 페이지의 구성 요소가 변경될 때마다 스크립트를 변경해야하는 반복 작업을 해야한다는 것이다. 하지만, BasePage를 이용하여 자주 사용하는 자바 스크립트를 라이브러리화하면 이런 문제를 쉽게 해결할 수 있다. 때문에, 지금까지 개발한 BasePage는 게으른 ASP.NET 프로그래머들에게 좋은 선물이 되리라 생각한다.




[그림1] 카드번호 입력 디자인



[그림2] 카드 번호 입력을 위한 자동 포커스


[그림2]에서 볼 수 있는 것처럼 A -> B 컨트롤로 포커스를 이동시키기 위해 컨트롤 이름만 적어주면 되는 것을 알 수 있다. SetAutoFocus 뒤의 숫자 4는 몇자가 입력되면 입력 커서를 이동시킬지를 정하는 것이다.

자동 포커스의 원리는 간단하다.

1. TextBox나 HtmlInputText 컨트롤에 MaxLength 속성을 설정한다.
2. 필드에 값이 입력될 때 그 Length를 센다.
3. Length == MaxLength 이면 입력 커서를 이동시킨다.

MaxLength 속성은 HTML로는 mmlt;INPUT type=text maxlength="4" /mmgt;와 같이 작성하는 부분에 해당한다.
신용 카드 번호 입력이면 당연히 숫자만 입력되어야 하지 않을까? 그래서 SetNumeralsOnly를 이용하여 각 필드를 숫자 입력만 받을 수 있게 설정하였다.
BasePage의 거의 모든 함수는 중첩해서 사용할 수 있는데, 그 이유는 키보드와 관련된 각 이벤트를 경우에 따라 철저하게 분리하여 사용하고 있기 때문이다.

즉, SetNumeralsOnly는 onkeypress 이벤트를 이용하지만, SetAutoFocus는 onkeyup 이벤트를 이용한다.

SetAutoFocus 함수가 이용하는 자바 스크립트는 AddAutoFocusScript 함수에 등록되어 있으며, 이 함수는 2번과 3번 과정을 수행한다.

페이지 만료하기

사용자 인증이나 회원 가입 페이지와 같이 정보 보안에 중요한 부분은 페이지를 떠나자마자 만료될 필요가 있다. 이와 같은 페이지를 만료시키기 위한 별도의 메서드가 ASP.NET에는 존재하지 않는다. 사실, 대부분의 웹 프로그래밍 언어에 페이지를 만료 시키는 메서드는 없다. 대신에 HTTP 헤더를 통해서 이러한 설정을 수행할 수 있다.
Expire() 함수는 페이지를 즉시 만료시키며, 코드는 다음과 같다.




[그림3] Expire() 함수


페이지를 만료시키는 함수 구현이 여러가지로 설정되어 있는데, 이는 다양한 환경에서 항상 캐시가 만료되기 위한 것이다. 다만, ASP.NET과 같이 한 페이지에서 포스트백 이벤트와 같이 서버와 여러 번 통신하는 경우에는 적용되지 않는다. HTTP 1.1 스펙의 캐시 만료 정책에는 현재 페이지에서 발생하는 포스트백 이벤트에 대한 정책이 정의되어 있지 않기 때문이다. 즉, POST 이벤트가 발생한 후에 다른 페이지로 이동하는 경우에만 페이지 만료가 성립한다는 점에 주의해야 한다.

마찬가지로 페이지를 캐시하고 있는 경우에도 Expire() 함수를 응용할 수 있다. 대부분의 블로그나 게시판에서는 페이지 캐시를 사용하여 성능 향상을 가져올 수 있지만, 새로운 내용이 추가되었을 때 이전 캐시를 만료하고 새로운 캐시를 시작해야한다. 캐시 관리 면에서는 복잡도가 다소 상승하지만 이를 잘 활용하면 성능 향상을 가져올 수 있다. Expire()는 이런 용도로도 사용할 수 있게 작성되었다.

Response.Expires는 이전 ASP와의 호환성을 위해 사용되며, ASP.NET의 CachePolicy를 이용하고 싶다면 Response.Cache.SetExpires()를 이용하면 된다.

DataGrid에 롤오버 사용하기

DataGrid와 같은 바인딩 컨트롤에 마우스를 가져가면 해당 항목의 색상이 반전되는 롤오버 기능이 있다면 사용자 UI를 개선시킬 수 있다. 구현은 BasePage.ApplyRowRollOver() 메서드를 참고하면 되며 사용법은 다음과 같다.




[그림4] ApplyRowRollOver 메서드


여기서는 web.config에 onmouseoverColor와 onmouseoutColor 키를 추가하여 이곳에 롤오버에 사용할 색상을 지정하였다. 메서드 이름에서 알수 있는 것처럼 DataGrid의 ItemDataBound 이벤트에 메서드를 추가하였다.

이것으로 UI 향상을 위한 BasePage 사용에 대해서 살펴보았다. 다음부터는 프로그래밍시에 생산성을 향상시키기 위한 부분을 살펴볼 것이다.