• e-book
• 회원가입
• 정기구독신청
• 전체보기
• 로그인

비쥬얼 스튜디오 2008 3부

프린트 이메일 전송

파워 웹 개발자의 후회없는 선택 ASP.NET 3.5

새로운 개념과 기술의 등장은 개발자에게는 양면의 날처럼 느껴지기도 한다. 새로운 것을 이용하여 더 재미있고 신기한, 그러면서도 더 강력한 애플리케이션을 개발하는 즐거움을 만끽하는 사람이 있는가 하면 자신이 도태되고 있다는 왠지 모를 불안감에 자신감을 상실하는 사람도 있으니 말이다. 그러나 여러분이 전자에 속하게 될지 후자에 속하게 될지는 오로지 여러분에게 달려있다. 그리고 여러분이 새로운 도전들을 즐길 준비가 되어 있다면 비주얼 스튜디오 2008과 ASP.NET 3.5는 여러분에게 편리함과 강력함을 동시에 선사해 줄 것이다.

웹 개발자를 위한 수퍼 도우미 비주얼 스튜디오 2008

전세계적으로 가장 많이 사용되는 개발 도구인 비주얼 스튜디오 시리즈는 1997년 비주얼 스튜디오 97을 시작으로 지속적인 발전을 거듭해 2007년 11월 비주얼 스튜디오 2008이라는 이름으로 새롭게 업그레이드 되었다. 알다시피 비주얼 스튜디오는 통합 개발 환경(IDE: Integrated Development Environment)이기 때문에 애플리케이션의 개발은 물론 디버깅과 컴파일 등 개발에 필요한 모든 과정을 하나의 도구 안에서 해결할 수 있다. 게다가 비주얼 스튜디오 2005 버전부터는 팀 파운데이션 서버(Team Foundation Server)와의 통합 환경을 구성하여 애플리케이션 개발에 대한 수명 주기 관리까지 가능한 ALM(Application Lifecycle Management) 도구로써의 가능성도 보여주었다.

이번에 새로 출시된 비주얼 스튜디오 2008은 개발 도구로서의 면모는 물론 다양한 측면에서 발전을 이루었지만 이번에는 특히 웹 개발과 관련된 비주얼 스튜디오 2008의 새로운 기능들을 위주로 살펴볼 것이다.

더욱 강력해진 디자이너 도구들

우선 웹 개발자라면 비주얼 스튜디오 2008이 제공하는 강력한 디자이너 도구에 눈을 돌려볼 필요가 있겠다. 이전 버전의 비주얼 스튜디오도 나름대로 쓸만한 디자이너 도구를 제공해 왔지만 비주얼 스튜디오 2008의 웹 폼 페이지 디자이너와 소스 코드 편집기는 웹 2.0 시대를 맞아 더욱 의존도가 높아진 CSS와 자바스크립트에 대한 지원이 크게 향상되었다.

기존의 비주얼 스튜디오를 사용하는 대부분의 개발자들은 아마도 필자처럼 디자인 뷰 대신 소스 뷰를 주로 사용했을 것이다. 사실 비주얼 스튜디오 2005까지는 디자인 뷰와 소스 뷰 둘 중 하나만을 볼 수 있었으며 뷰를 전환하려면 약간의 시간이 필요했다. 그러나 비주얼 스튜디오 2008은 <화면 1> 과 같이 분할된 뷰를 지원함은 물론 디자인 뷰와 소스 뷰 사이의 전환 속도가 눈에 띄게 향상되었다.

● 비주얼 스튜디오 2008의 CSS 지원
앞서 설명했듯이 비주얼 스튜디오 2008은 CSS를 위한 새로운 디자이너 도구를 제공한다. 기본적으로 웹 페이지의 손쉬운 개발을 위해 출시된 익스프레션 웹(Expression Web)과 동일한 페이지 디자이너 도구를 채택함으로서 디자이너와 개발자의 협업을 보다 원활하게 지원함은 물론 CSS에 대한 지원이 다양하게 추가되었다. 예를 들면 아래 화면과 같이 HTML 태그나 웹 컨트롤에서 CSS 스타일을 지정할 때 인텔리 센스 기능이 제공된다.

뿐만 아니라 새롭게 추가된 [스타일 관리 창]은 CSS 관련 작업에 큰 도움이 된다.

이 도구는 현재 페이지가 참조하는 모든 외부 CSS 파일 및 <STYLE> 태그에 정의된 스타일 목록을 보여준다. 또, 목록의 스타일을 더블 클릭하거나 마우스 오른쪽 버튼으로 클릭한 후 [Modify Style] 메뉴를 클릭하면 해당 스타일을 편집할 수 있도록 CSS 파일 편집 창을 열어준다.

또 다른 CSS 관련 도구인 [CSS 속성 창]도 매우 유용하게 사용할 수 있다. 이전 버전의 비주얼 스튜디오에서는 CSS 스타일 정의를 변경하려면 반드시 CSS 파일을 편집기로 열어야만 했다. 그러나 비주얼 스튜디오 2008에서는 CSS 속성 창을 이용하여 CSS 파일을 열지 않고도 외부 CSS 파일에 정의된 스타일도 웹 폼 페이지 디자이너에서 곧바로 수정할 수 있다.

● 비주얼 스튜디오 2008의 자바스크립트 지원 기능
아마도 여러분은 Ajax를 이용한 페이지를 구현해 본 경험이 한 번쯤은 있을 것이다. Ajax 페이지를 구현하려면 필연적으로 자바스크립트를 이용할 수 밖에 없는데 많은 개발자들이 Ajax 프로그래밍을 어렵게 느끼는 이유가 바로 여기에 있다. 즉, 지금까지 쓸만한 자바스크립트 편집기나 디버거가 없었다는 점이다. 그러나 이런 고민은 비주얼 스튜디오 2008을 통해 말끔히 해결할 수 있다. 우선 비주얼 스튜디오 2008은 <화면 5>에서 볼 수 있듯이 자바스크립트 코드 내에서 완벽하게 인텔리센스를 지원한다.

비주얼 스튜디오 2008의 자바스크립트 인텔리센스는 표준 자바스크립트 객체뿐 아니라 사용자 정의 객체와 외부 자바스크립트 파일에 작성된 코드에 대해서도 완벽하게 지원된다. 따라서 Microsoft AJAX Library를 비롯한 다양한Ajax 라이브러리를 사용하는 경우에도 예전보다 훨씬 빠르고 편리하게 자바스크립트 코드를 작성할 수 있게 되었다.

또 한가지 환영할 만한 기능이 바로 많은 개발자들이 기다려온 자바스크립트 디버깅이다. C# 코드를 디버깅 할 때와 마찬가지로 자바스크립트 코드 내에서 디버깅 하고 싶은 라인에서 단축키 <F9>를 지긋이 눌러주고 <F5> 키를 이용하여 페이지를 디버그 모드에서 실행하면 <화면 6>에서와 같이 자바스크립트 코드를 디버깅할 수 있게 된다.

지금까지 비주얼 스튜디오 2008의 향상된 기능 중에서 극히 일부를 살펴보았다. 지면 관계상 비주얼 스튜디오 2008의 모든 기능을 소개하지는 못했지만 이 외에도 많은 기능들이 추가되어 있으므로 MSDN의 ‘What’s New in Visual Studio 2008‘ 섹션을 - 비록 아직은 영어지만 - 꼭 읽어보길 바란다.

최상의 웹 개발 플랫폼 ASP.NET 3.5

ASP.NET이 출시된 지도 어느덧 7년이라는 세월이 흘렀다. 그 동안 ASP.NET은 많은 부분에서 괄목할만한 향상을 이루어 왔으며 전신인ASP의 바통을 이어 최상의 웹 개발 플랫폼으로서의 입지를 굳혀가고 있다. 닷넷 프레임워크 3.5와 함께 출시된 ASP.NET 3.5는 기존의 ASP.NET에 새로운 컨트롤을 추가하고 개발 언어의 확장을 통해 편의성과 생산성을 더욱 향상시켰다. ASP.NET에 새롭게 추가된 컨트롤 중 가장 애용하게 될 것으로 예상되는 ListView 컨트롤과 DataPager 컨트롤에 대해 살펴보자.

● 새로운 데이터 바운드 컨트롤 - ListView 컨트롤
지금까지 ASP.NET에서는 리스트 형식의 데이터를 보여주기 위해 Repeater 컨트롤이나 DataList 또는 DataGrid 컨트롤을 사용해 왔으며 ASP.NET 2.0에서는 GridView 컨트롤이 주로 사용 되어 왔다. 이들의 공통적인 단점은 ? Repeater 컨트롤을 제외하고는 - 최종적으로 렌더링되는 마크업 코드를 개발자가 자유롭게 제어할 수 없다는 점이다. 그러나 ListView 컨트롤은 GridView 컨트롤과 마찬가지로 풍부한 기능을 제공하면서도 전체적인 마크업 코드를 개발자가 직접 제어할 수 있는 자유를 부여한다.

그러면 간단한 예제를 통해 ListView 컨트롤의 사용법을 알아보자. 우선 이 예제가 사용하는 데이터는 XML 형태로 구성되어 있으며 코드는 <리스트 1>과 같다.

이 데이터들은 XmlDataSource 컨트롤을 통해 ListView 컨트롤에 바인딩 될 것이다. ListView 컨트롤의 소스는 <리스트 2>와 같다.

<리스트 2>에서 사용된 ListView 컨트롤의 템플릿은 다음 같다.

● LayoutTemplate: ListView 컨트롤이 렌더링할 전체 레이아웃을 정의한다.
● GroupTemplate: ListView 컨트롤 내에 그룹으로 관리될 콘텐츠를 위한 템플릿을 정의한다.
● ItemTemplate: ListView 컨트롤의 그룹 내에 각 아이템에 적용될 템플릿을 정의한다.
● EmptyItemTemplate: ListView 컨트롤의 각 그룹 내에 적용되는 아이템의 개수가 GroupItemCount 속성에 지정된 그룹 아이템의 개수보다 적은 경우 빈 부분을 채울 아이템의 템플릿을 정의한다.

<그림 1>은 이들 템플릿의 구조를 그림으로 표현한 것이다.

<그림 1>에서 보듯이 ListView 컨트롤은 LayoutTemplate 템플릿 내에 GroupTemplate 템플릿이 렌더링되며 각각의 Group Template 템플릿에는 ItemTemplate 템플릿이 렌더링 되는 것을 볼 수 있다. 또한 오른쪽 아래에서 볼 수 있듯이 빈 공간이 생기는 경우에는 EmptyItemTemplate 템플릿으로 채워진다.

ListView 컨트롤의 장점은 컨트롤의 전체 렌더링 마크업을 개발자가 임의로 지정할 수 있다는 것이다. 따라서 템플릿 내에 중첩될 다른 템플릿이 위치할 곳을 지정할 수 있어야 하며 이를 위해 예제에서와 같이 PlaceHolder 컨트롤을 사용한다. 즉, LayoutTemplate 템플릿과 GroupTemplate 템플릿에는 각각 GroupTemplate 템플릿과 ItemTemplate 템플릿이 렌더링 될 위치를 지정하기 위해 PlaceHolder 컨트롤이 사용되고 있다. 이 PlaceHolder 컨트롤의 ID는 각각 GroupPlaceHolderID 속성과 ItemPlaceHolderID 속성을 이용하여 지정한다. 앞서 보여준 XML 문서의 데이터를 ListView 컨트롤에 바인딩한 모습은 <화면 9>와 같다.

● DataPager 컨트롤을 이용한 페이징 구현
DataGrid 컨트롤과 GridView 컨트롤에는 기본적으로 페이징 기능이 제공되었다. 그러나 이 페이징 부분의 마크 업을 개발자가 직접 정의하기에는 제약이 많았으며 설상 가상으로 성능상의 문제를 피하려면 개발자가 직접 페이징과 관련된 코드를 개발해 주어야만 했다. 그러나 ASP.NET 3.5에 새롭게 추가된 DataPager 컨트롤은 이러한 고민을 한 번에 해결해 준다. 앞서 화면 9에서 페이징에 사용된 것이 바로 DataPager 컨트롤이다. DataPager 컨트롤을 이용하는 방법은 매우 간단하다.

<리스트 3>에서 보듯이 DataPager 컨트롤을 이용하는 방법은 매우 간단하다. PagedControlID 속성을 이용하여 페이징을 사용할 컨트롤의 ID를 지정하고 몇 가지 추가적인 속성을 정의하면 간단히 <화면 9>와 같은 페이징 기능을 구현할 수 있다. 또한 GridView 컨트롤과 마찬가지로 개발자가 임의의 페이징 인터페이스를 정의하기 위한 PagerTemplateField 역시 제공되므로 입맛에 맞게 정의하여 사용할 수도 있다.

향상된 ASP.NET AJAX 지원

2007년 1월 1.0 버전이 출시된 ASP.NET AJAX는 MS가 Open Ajax 연합의 일원으로서 무료로 배포하는 현존하는 가장 강력한 Ajax 프레임워크라고 할 수 있다. 이미 알고 있겠지만 ASP.NET AJAX는 크게 다음과 같이 두 부분으로 나누어 생각할 수 있다.
● 서버 측 라이브러리 (ASP.NET AJAX Extensions) : 기존의 ASP. NET 애플리케이션을 Ajax 애플리케이션으로 손쉽게 마이그레이션 할 수 있음은 물론 ASP.NET의 거의 모든 기능을 그대로 활용할 수 있는 서버 측 프레임워크를 제공한다.
● 강력한 객체지향 스크립트 라이브러리 : 자바스크립트에  닷넷과 유사한 형태의 객체지향적 특징을 부여하여 객체 단위로 스크립트 코드를 작성할 수 있는 풍부한 스크립트 라이브러리를 제공한다.

ASP.NET 3.5에는 ASP.NET 3.5 Extensions라는 이름으로 ASP.NET AJAX 프레임워크가 통합되어 있다 (이하 ASP.NET AJAX 3.5라 하겠다). 또한 기존의 1.0 버전에서는 제공하지 못했던 여러 가지 새로운 기능들을 추가로 제공한다. 새로 추가된 기능들에 대해 간단히 살펴보도록 하자.

WCF 서비스의 지원

기존의 ASP.NET 1.0은 WCF가 지원되는 닷넷 프레임워크 3.0 이후에 출시되었음에도 불구하고 WCF 서비스를 지원하지 못했으며 ASP.NET AJAX 3.5에 와서야 비로소 추가되었다. WCF에 대한 내용은 그 동안 진행되었던 유경상 수석의 WCF 기고를 통해 이미 많은 분들이 잘 알고 있을 것이므로 필자는 WCF 서비스를 ASP.NET AJAX를 통해 호출하기 위해 고려해야 할 사항들만을 간단히 설명하도록 하겠다.

(1)WCF의 서비스를 정의하는 인터페이스에 다음과 같이 Ser viceContract 특성을 정의해야 한다.

[ServiceContract(Namespace=“MasoService”)]
public interface IService

이 WCF 서비스는 자바스크립트 내에서 MasoService. IService라는 이름으로 참조할 수 있게 된다.

(2)다음으로 인터페이스를 구현하는 클래스에는 다음과 같이 AspNetCompatibilityRequirements 특성을 지정해야 한다.

 [AspNetCompatibilityRequirements(
RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)
]
public class Service: IService { … }

AspNetCompatibilityRequirements 특성의 유일한 속성인 RequirementsMode 속성에는 AspNetCompatibilityRe quirementsMode 열거형 값 중 하나를 사용할 수 있는데 이 속성 값의 종류와 그 영향에 대해서는 MSDN의 “How to: Configure WCF Services in ASP.NET AJAX” 라는 제목의 토픽을 참고하길 바란다.

(3)마지막으로 Web.config 파일에 몇 가지 설정을 변경해야 한다. 가장 중요한 것은 EndPoint Behavior를 추가하고 enable WebScript 속성을 정의하는 것이다. 관련된 예제는 이달의 디스켓으로 제공되는 소스 코드를 참고하길 바란다.

또 어떤 기능들이 제공될까?

앞서 살펴본 WCF 서비스 호출 외에도 ASP.NET AJAX 3.5에는 아래와 같은 몇 가지 기능이 더 추가되어 있다.

● ASP.NET 역할 기반 보안 서비스 통합: 기존의 ASP.NET AJAX 1.0에서는 인증 서비스와 프로파일 서비스만을 이용할 수 있었으나 ASP.NET AJAX 3.5에서는 Role 서비스도 호출할 수 있게 되었다. 보다 자세한 내용은 MSDN에서 “Using Roles Information with ASP.NET AJAX”라는 이름의 토픽을 참고하기 바란다.
● AJAX Control Toolkit의 통합: 별도로 다운로드 해야 했던 AJAX Control Toolkit이 완전히 통합되어 제공된다. 또한 AJAX Control Toolkit이 제공하는 다양한 Extender 컨트롤들을 보다 손쉽게 적용할 수 있도록 디자이너 도구가 향상되었다.
● 향상된 컨트롤 지원: 기존의 ASP.NET AJAX 1.0은 Menu 컨트롤이나 WebPart 관련 컨트롤들은 ASP.NET AJAX와 함께 사용할 수 없거나 사용시 문제가 발생하곤 했다. ASP.NET AJAX 3.5에서는 이러한 문제들을 해결하여 앞서 나열한 컨트롤들도 Ajax 스타일로 이용할 수 있게 되었다.

이상으로 비주얼 스튜디오 2008과 ASP.NET 3.5의 새로운 기능에 대한 간략한 소개를 마치겠다. 한정된 지면과 필자의 끝없는 욕심 사이에서 심히 방황하다가 결국 중요한 키워드만을 전달하는 선에서 그쳤지만 다음 기회에 더 유용한 내용으로 여러분을 다시 만날 수 있기를 기대해 본다. 

참고 자료
1. MSDN Library - What’s New in Visual Studio 2008: http://msdn2.microsoft.com/en-us/library/bb386063.aspx
2. Scott Guthrie’s Blog: http://weblogs.asp.net/scottgu/archive/2007/11/19/visual-studio-2008-and-net-3-5-released.aspx