아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 세번째인 Using Networking to Retrieve Data and Populate a DataGrid 번역본 입니다.  

번역 : 오일석

실버라이트 튜토리얼 파트 3: 네트워킹을 이용하여 데이터를 가져와서 데이터그리드에 뿌리기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 두 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

네트워킹을 사용하여 Digg 스토리 가져오기

실버라이트 2는 실버라이트 클라이언트가 원격의 REST, SOAP/WS*, RSS, JSON, XML HTTP 서비스를 사용 가능하게 하는 빌트인 네트워킹 API를 가지고 있습니다. 또한 실버라이트 2는 HTTP 프로토콜을 이용하지 않고도 (채팅 서버와 같은 시나리오를 위해서) 통신할 수 있는 빌트인 소켓 API를 포함하고 있습니다.

크로스 도메인 네트워크 접근

실버라이트 2 응용프로그램은 네트워크 호출이 필요할 때 항상 "origin" 서버로부터 호출을 받을 수 있습니다. 이 의미는 응용프로그램을 다운로드 받은 같은 도메인의 URL을 호출할 수 있다는 것입니다. 또한 선택적으로 원격의 웹 서버에 클라이언트가 크로스 도메인 호출을 해도 좋다는 XML 정책 파일을 가지고 있을 때 크로스 도메인 호출을 할 수 있습니다. 실버라이트 응용프로그램이 다운로드 된 도메인과 다른 도메인의 URL을 호출할 수 있다는 말입니다.

서버 관리자가 어떤 클라이언트의 접근을 가능하게 할지 미리 관리 할 수 있게 하는 XML 정책 파일 포멧이 있습니다. 또한 플래시 크로스 도메인 정책 파일 포멧도 받아들입니다. 이 의미는 여러분이 플래시 클라이언트를 위해 웹 상에 열어놓은 크로스 도메인 접근이 가능한 원격의 REST, SOAP/WS*, RSS, JSON, XML 엔드포인트를 실버라이트 2에서 호출 가능하다는 얘기 입니다.

Digg.com은 HTTP를 통해서 제공하는 매우 쓸만한 Digg API를 가지고 있습니다. Digg.com은 Flash를 위한 크로스 도메인 정책 파일을 가지고 있기 때문에 Digg 클라이언트 응용프로그램에서 직접 API를 호출할 수 있습니다. Digg.com API에 접근하기 위해서 우리의 웹 서버를 통해서 터널을 만들 필요가 없습니다.

Digg.com의 Topic Feed API

우리는 사용자들이 이 프로그램을 사용하여 검색어를 입력(예를 들어 "Programming")하고 검색 버튼을 눌러 Digg.com으로부터 검색어와 관련된 스토리를 가져올 수 있게 하고 싶습니다.



Digg.com의 List Stories REST API Feed API를 이용해 보겠습니다. API는 URL을 통해서 매개변수를 전달 받은 다음 (예를 들어 GET /stories/topic/programming) 검색어와 관련된 Digg 스토리의 결과를 XML로 받습니다. 여기를 클릭하여 XML이 어떻게 생겼는지 보시기 바랍니다.

System.Net.WebClient를 사용하여 Digg REST Feed를 비동기 호출하기

검색 버튼을 클릭할 때 "Click" 이벤트를 핸들링 합니다. WaterMarkTextBox 컨트롤에서 검색하려는 검색어 문자열을 가져와서 관련된 XML 결과를 받기 위한 Digg 네트워크 호출을 초기화 합니다.

실버라이트는 System.Net 네임스페이스에 WebClient 헬퍼 클래스를 포함 합니다. (이것은 닷넷 프레임워크에도 포함되어 있습니다.) 우리는 이 클래스를 이용하여 URL로부터 비동기적으로 컨텐츠를 다운로드 받을 수 있습니다. Digg 스토리를 비동기적으로 다운로드 받는 것의 장점은 원격 서버로부터 응답을 기다리는 동안 UI가 응답이 없거나 차단되지 않을 것입니다. 이것은 매우 자연스러운 사용자 경험을 제공할 것입니다.

WebClient 클래스로 비동기 방식 다운로드를 하려면 요청된 컨텐츠가 다운로드 될 때 호출되는 "DownloadStringCompleted" 이벤트 핸들러 메소드를 등록하고 다운로드를 시작하기 위해서 WebClient.DownloadStringAsync(url) 메소드를 호출 하기만 하면 됩니다.

그리고 위의 코드에서 보듯이 사용자가 원하는 주제에 대한 Digg 스토리를 포함한 XML 데이터의 문자열을 비동기 적으로 가져올 수 있습니다.

LINQ to XML을 사용하여 스토리 클래스에 Digg XML 스토리 파싱하기

지금까지 Digg 스토리의 XML 데이터를 얻었습니다. 다음 단계에서는 데이터를 바인딩 시킬 "DiggStory" 오브젝트 속에 그것을 파싱하고 변환할 것입니다.

이를 위해서는 우선 Digg로부터 받은 XML 컨텐츠에 맵핑할 속성들을 가진 "DiggStory" 클래스를 정의해야 합니다. 새로운 C# 기능인 "automatic properties" 이용할 수 있습니다.

실버라이트 2에 들어있는 LINQ와 Digg로 부터 받은 XML 문서를 쉽게 파싱하고 필터링 할 수 있는 LINQ to XML (실버라이트 응용프로그램에 포함될 수 있는 추가 라이브러리)을 이용할 수 있습니다. 그리고 아래 코드를 사용하여 "DiggStory" 오브젝트의 시퀀스로 변환할 수 있습니다.

위에서 보듯이 앞으로 작업할 강력한 형식의 DiggStory 오브젝트 가지게 되었습니다.

데이터그리드 컨트롤에 Digg 스토리를 표시하기

Digg 스토리를 표시하기 위해서 새로운 실버라이트 데이터그리드 컨트롤을 사용하겠습니다. 이를 위해서 실버라이트 데이터 컨트롤 어셈블리를 참조해야 하고 데이터그리드 컨트롤 선언으로 페이지에 남아 있는 "Todo" 텍스트를 바꿔야 합니다.

데이터그리드는 명시적으로 컬럼 선언을 설정하고 타입을 표시할 수 있습니다. 다른 방법으로는 데이터그리드의 "AutoGenerateColumns" 속성을 true로 설정하여 바인딩 할 오브젝트의 스키마를 바탕으로 데이터원본 리플렉션(reflection)을 통하여 디폴트 컬럼을 만들게 하는 방법이 있습니다.

검색 버튼을 클릭했을 때 Digg로부터 받은 결과를 데이터 그리드의 "ItemSource"에 프로그램적으로 바인딩 시키기 위해 코드 비하인드 클래스를 수정해 보겠습니다.

이제 프로그램을 실행시키고 검색을 하면 Digg로부터 가져온 스토리 데이터 리스트를 보게 될 것입니다.



실버라이트 데이터그리드 컨트롤은 읽고 쓰기가 가능한 다이렉트 에디팅, 선택, 스크롤링, 컬럼의 크기변경 등 클라이언트 측에서 사용하는 그리드 컨트롤에서 기대하는 기본 기능을 모두 제공합니다. 데이터그리드를 포함하고 있는 컨테이너가 동적으로 늘어나고 줄어들어도 컨테이너를 채우는 자동 레이아웃 기능을 제공합니다. 또한 데이터그리드는 훌륭한 템플릿 모델을 제공하고 있어서 컬럼 데이터의 표시와 편집 방법을 모두 커스터마이징 할 수 있습니다. 데이터그리드의 사용법에 대해서는 조만간 더 포스팅을 하겠습니다.

다음 단계

이제 우리는 Digg.com에서 Digg 스토리를 가져올 수 있고 프로그램에 스토리 데이터를 표시할 수 있습니다. 다음 단계는 Page.xaml 로 되돌아가서 우리가 지금까지 사용해 온 인라인 스타일 선언을 제거해 보겠습니다.

다음 튜토리얼 Using Style Elements to Better Encapsulate Look and Feel (한글 번역본)로 이동하겠습니다.

Published Friday, February 22, 2008 5:54 AM by ScottGu