[Visual Studio 2010 SP1] HTML5, CSS3 지원

Visual Studio 2010 2011. 6. 17. 08:00 Posted by POWERUMC

처음 Visual Studio 2010 릴리즈 되었을 때는 HTML5 기능이 추가가 되지 않았습니다. 그래서 XML Schema 를 이용하는 방법으로 HTML 텍스트 에디터에서 HTML5 구문을 사용하기도 하였습니다. 하지만 이번 Visual Studio 2010 SP1에는 정식으로 HTML5 인텔리센스와 유효성을 검사할 수 있는 기능이 추가가 되었습니다.

이 기능을 활성화하기 위해서 도구->옵션의 텍스트 에디터->HTML->유효성에서 HTML5 유효성 검사를 지정할 수 있습니다.

HTML5가 지원하는 여러 구문을 인텔리센스에서 자연스럽게 보여줍니다.

더불어 CSS3 를 완벽하게 지원하지는 않지만, 일부분 CSS3를 지원해 줍니다. CSS3 기능은 앞으로 그 기능을 보강할 수 있는 확장 기능으로 Visual Studio Gallery 에서 배포가 되길 기대해봅니다.


배포 가능한 종속성(Deployable Dependencies) 는 이번 Visual Studio 2010 SP1 에서 새롭게 추가된 기능입니다. 웹 응용 프로그램을 서버로 배포하기 위해서는 필수 구성 요소들이 설치가 되어 있어야 하는데, 배포 가능한 종속성 기능을 이용하면 웹 응용 프로그램이 동작에 필요한 일부 컴포넌트를 바로 배포할 수 있도록 도와줍니다.

웹 응용 프로그램에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 활성화하면 다음과 같은 메뉴 항목이 추가가 되어 있습니다.

메뉴 항목을 선택하면 아래와 같은 창이 나타납니다. 이 창에서는 ASP.NET MVC3 에서 사용하는 Razor 컴포넌트와 SQL Server Compact 를 선택할 수 있습니다.

위와 같이 배포 시 포함할 종속된 어셈블리/컴포넌트를 선택하여 확인 버튼을 클릭하면, 다음과 같이 웹 응용 프로그램 프로젝트에 _bin_deployableAssemblies 폴더가 생성이 되고, 이 하위에 관련된 어셈블리가 추가가 됩니다.

웹 응용 프로그램을 게시를 하게 되면, 위의 _bin_deployableAssemblies 폴더의 어셈블리는 웹 응용 프로그램의 bin 폴더로 배포가 됩니다.

물론, 웹 배포 패키지로 .ZIP 파일로 생성을 하여도 종속성을 추가한 어셈블리는 BIN 폴더에 추가가 되며, 이 패키지를 이용하여 배포할 서버에 컴포넌트의 설치 없이 바로 배포할 수 있습니다.

다만 현재는 여러 가지 배포 어셈블리/컴포넌트를 지원하지 않고 아래의 3개지의 컴포넌트만 배포를 지원해 줍니다.

  • ASP.NET Web Pages / Razor
  • SQL Server Compact 4.0
  • ASP.NET MVC 3

Razor 지원

ASP.NET MVC3 가 릴리즈 되면서 이에 발맞추어 Visual Studio 2010 SP1이 개발 도구에서 ASP.NET MVC3를 지원합니다. 특히 ASP.NET MVC3 Beta 버전에서는 지원하지 않았던, ASP.NET MVC3의 중요한 기능 중의 하나인 Razor View Engine인데, Razor View Engine의 Syntax 및 Intellisence 도 함께 지원합니다.

새로운 프로젝트를 만들 때 ASP.NET MVC3 프로젝트 템플릿에서 Razor 뷰를 선택하면 Razor View Engine을 사용할 수 있습니다.

더불어 일반 ASP.NET MVC3의 ASPX 페이지 또한 새로운 뷰를 추가할 때 Razor 뷰로 추가하면, 기존 ASP.NET MVC3의 Razor Engine을 그대로 사용할 수 있습니다.

Web Platform Installer 통합

Visual Studio 2010과 Web Platform Installer(WPI) 가 통합이 되었습니다. Visual Studio 2010에서 WPI를 바로 실행할 수 있는 툴바가 추가 되었습니다.

WPI를 통해 아래의 최신 제품을 다운로드 받을 수 있습니다.

  • SQL Server Compact 4.0
  • IIS 7.5 express
  • ASP.NET MVC3
  • WebMatrix
  • 기타…


기본적으로 웹 응용 프로그램을 개발할 경우 로컬에서 동작하는 ASP.NET Development Server 가 활성화가 됩니다.

그림 1 로컬 ASP.NET Development Server 가 동작하는 화면

웹을 개발할 때 Visual Studio가 제공하는 로컬에서 동작하는 ASP.NET Development Server 로 충분히 어려움 없이 개발을 할 수 있으나 웹 개발의 여러 가지 상황을 고려해 보면 기능이 충분하지는 않았습니다.

예를 들면, 기존의 로컬에서 동작하는 ASP.NET Development Server는 특정 웹 페이지나 XML 웹 서비스, WCF 서비스가 SSL(Secure Sockets Layer)로 동작한다거나 WCF의 NET.TCP, NET.PIPE 등의 바인딩을 사용할 수 없었습니다.

이런 여러 가지 기능적으로 IIS Express 를 사용할 경우 얻을 수 있는 이점이 많고, 기존 웹 응용 프로그램을 IIS Express에서 동작하도록 변경하기 위한 절차 또한 매우 간단합니다.

IIS Express가 설치되어 있다면, 웹 응용 프로그램에서 마우스 오른쪽 버튼을 클릭하여 IIS Express 사용을 선택하면 즉시 IIS Express 에서 웹 응용 프로그램이 동작하도록 할 수 있습니다.

그리고 다음의 확인 메시지에서 '예'를 클릭하면 바로 IIS Express로 웹 응용 프로그램을 개발할 수 있습니다.

IIS Express는 윈도우의 알림 영역에서 찾을 수 있으며 이 아이콘을 이용하여 여러 개의 호스팅 되고 있는 웹 응용 프로그램을 관리할 수 있습니다.

IIS Express를 사용하여 Visual Studio 2010에서 여러 가지 설정을 즉시 변경해 줄 수 있습니다.

그림 2 IIS Express 설치시 웹 응용 프로그램 속성

그림 3 기존 ASP.NET Development Server 속성

IIS 7과 IIS Express 버전의 비교표:

Area

IIS 7

IIS Express

Shipping mechanism

Ships with the OS.

Ships out-of-band. It is automatically included with WebMatrix but can also be installed separately.

Supported Windows editions

Limited number of Windows Vista and Windows 7 editions

Most editions of Windows Server 2003, 2008 and 2008 R2

All editions of Windows XP, Vista, Windows 7

All editions of Windows Server 2008 and 2008 R2

Supported .NET Framework versions

v2.0 SP1 and above

v2.0 SP1 and above (.NET 4.0 is required).

Supported programming languages

Classic ASP, ASP.NET, and PHP

Classic ASP, ASP.NET, and PHP

Process model

Windows Process Activation Service (WAS) automatically manages configured sites.

User launches and terminates sites.

Hosted WebCore (aka Hostable Web Core) support

Yes

Yes. IIS Express is implemented as a layer over HWC.

Supported protocols

HTTP, FTP, WebDAV, HTTPS, and WCF (including over TCP, Named Pipes, and MSMQ)

HTTP, HTTPS, and WCF over HTTP

Non-admin support

WAS must run with administrator user rights.

A standard user is allowed to complete most tasks.

Multi-developer support

None

Yes. Configuration files, settings, and Web content are maintained on a per-user basis.

Visual Studio support

Yes

VS 2010 SP1 Beta allows IIS Express to be used instead of Cassini. VS 2008 can also be manually configured to use IIS Express.

Runtime extensions

See http://www.iis.net/download/All for a complete list.

URL Rewrite and FastCGI. These extensions are built into IIS Express.

Management tools

IIS Manager, appcmd.exe

Appcmd.exe. Common IIS Express management tasks are also built into WebMatrix and Visual Studio 2010 SP1 Beta.

System tray support

None

Yes

Includes built-in IIS 7x modules for authentication, authorization, compression, etc.

Yes

Yes

IIS Express를 설치하기 위해 WPI(Web Platform Installer) 다운로드 페이지

http://www.microsoft.com/web/gallery/install.aspx?appid=iisexpress

그림 4 Web Platform Installer 초기 설치 화면

그림 5 기본적인 구성 요소인 IIS Express 설치 화면


실버라이트 4 이전의 버전에서 Visual Studio에서 성능 프로파일을 지원하지 않은 것은 아닙니다. 다만, 개발 도구에서 지원하지 않았을 뿐이고, Command Line을 이용하여 브라우저를 Attached 하여 성능 프로파일을 할 수 있었습니다.

물론, 예전에도 실버라이트에서 성능 프로파일링을 위해 커맨드 라인으로 프로파일링을 할 수 있었습니다. 아래와 같은 순서대로 커맨드를 실행하면 되었습니다.

  1. VSPerfClrEnv /sampleon
  2. "c:\Program Files (x86)\Internet Explorer\iexplore.exe" C:\Breakout\Breakout\Bin\Release\TestPage.html
  3. VSPerfCmd /start:sample /output:MyFile /attach:<PID of iexplore.exe process>
  4. Run your scenario
  5. VSPerfCmd /detach
  6. VSPerfCmd /shutdown
  7. VSPerfClrEnv /off

이번 Visual Studio 2010 SP1에서는 개발 도구에서 직접 성능 프로파일을 지원합니다. 번거로이 Command Line을 사용할 필요 없이, 기존의 성능 프로파일의 사용 경험을 그대로 실버라이트 4에 적용할 수 있습니다.

Visual Studio 2010의 분석->성능 마법사 시작 메뉴를 클릭하여 실버라이트 응용 프로그램을 프로파일링 할 준비를 합니다.

아래와 같이 성능 프로파일을 시작하면 성능 마법사 페이지가 실행됩니다.

  • CPU 샘플링
    예를 들어, 많은 데이터 작업이나 UI요소 핸들링에서 CPU에 얼만큼의 부담을 주는지 측정할 수 있는 방법입니다.

  • 계측
    관리되는 응용 프로그램이 런타임에 얼마만큼의 리소스와 실행 시간을 갖는지 측정할 수 있습니다. 모듈/클래스/메서드 수준에서 성능을 측정할 수 있는 방법입니다.

  • .NET 메모리 할당
    관리되는 응용 프로그램이 얼만큼의 메모리를 소비하고, 가비지 컬렉션(Garbage Collection) 되는지 등의 수준 높은 메모리 정보를 제공합니다.

  • 동시성
    운영체제 차원에서 메모리의 교착 및 컨텍스트 스위칭(Context Switching)을 관찰하고 다른 프로세스에 어떤 영향을 받는지 Low Level의 정보를 제공합니다.


필자는 CPU 샘플링을 선택하였고, 2단계 페이지에서는 어떤 응용 프로그램을 프로파일링 할 지 선택합니다. 만약 솔루션 탐색기에 로드 되지 않은 프로젝트는 실행 파일(.EXE) 형태의 파일을 선택하면 소스 코드 없이 다음 단계로 이동할 수 있습니다.

3단계 마법사 페이지는 즉시 프로파일링을 시작할지 여부를 선택합니다. 기본 설정으로 마침을 선택하면 선택한 프로젝트 또는 실행 파일을 실행하고 프로파일링을 시작하게 됩니다.

응용 프로그램이 실행되면 다양한 테스트 시나리오로 테스트를 진행하고, 응용 프로그램을 마치면 수집된 프로파일링 정보로 프로파일링 결과 페이지를 볼 수 있습니다.

화면의 좌측 상단의 뷰를 변경하면서 성능 구간을 다양한 측면에서 분석을 할 수 있습니다.


Visual Studio 2010에서 단위 테스트 프로젝트를 생성하면 .NET Framework 4.0 의 단위 테스트 프로젝트를 지원했습니다. 단위 테스트 프로젝트를 .NET Framework 3.5 로 변경을 하게 되면 올바로 단위 테스트가 수행되지 않았던 문제가 있었습니다. 바로 아래와 같이 .NET Framework 버전을 변경하게 되면 발생하는 오류 메시지입니다.

그림 1 Visual Studio 2010에서 .NET Framework 3.5 로 변경할 경우

때문에 MSBuild 4.0으로 .NET Framework 3.5 빌드 및 테스트를 하게 되면 올바르게 빌드가 되지 않는 문제가 있었습니다.

필자 또한 이러한 문제로 인하여 다음과 같은 불편한 과정을 겪어야 했습니다.

참고

VS2008 을 VS2010 에서 동시에 개발하기

http://blog.powerumc.kr/314

VS2008 과 VS2010 동시에 개발하기 : 테스트 프로젝트가 포함 될 경우

http://blog.powerumc.kr/315

Visual Studio 2010 SP1은 이제 .NET Framework 3.5 버전의 단위 테스트도 지원이 가능하게 되었습니다.

그림 2 Visual Studio 2010에서 .NET Framework 3.5, 4.0 모두 단위 테스트 지원

다만, Visual Studio 2010 SP1은 .NET Framework 3.5까지 단위 테스트 프로젝트를 지원하며, 그 이하(.NET Framework 2.0, 3.0) 단위 테스트는 지원하지 않습니다.


Visual Studio 2010 SP1 의 실버라이트 4 개발 환경

Visual Studio 2010 SP1은 실버라이트 4 개발자 툴 킷이 포함이 되어 바로 실버라이트 4 개발을 할 수 있습니다.

그림 4 실버라이트 프로젝트 템플릿 선택

기존의 실버라이트 프로젝트 템플릿을 선택하여 프로젝트를 생성하면, 실버라이트 버전을 선택하여 원하는 실버라이트 버전으로 개발을 할 수 있습니다.

그림 5 실버라이트 버전 선택

실버라이트 4는 많은 사용자의 요구 사항과 코어의 변화가 있습니다. 자세한 내용은 아래의 링크를 ㅋ통해 MSDN 을 참고하십시오

참고

Silverlight 4의 새로운 기능 http://msdn.microsoft.com/ko-kr/library/dd772166(v=vs.95).aspx

실버라이트 4 의 새로운 기능

  • 컨트롤
  • 브라우저 외부에서 실행
  • 미디어
  • 네트워킹
  • 인쇄
  • 사용자 인터페이스
  • XAML
  • 데이터
  • 응용 프로그램 모델
  • 코어
  • Silverlight 디자이너
  • Windows Forms 플랫폼 지원
  • 관련 항목

[Visual Studio 2010 SP1] Help Viewer 1.1

Visual Studio 2010 2011. 6. 8. 08:30 Posted by POWERUMC

웹 브라우저 도움말이 데스크탑 응용 프로그램으로 변경

Visual Studio 2010 이전의 도움말 설명서(Help Documentation) 은 별도의 클라이언트 응용 프로그램으로 구동되었습니다. 하지만 Visual Studio 2010버전에서는 웹 브라우저를 통해 MSDN Online과 같은 화면으로 도움말 설명서가 로컬 웹 서버를 통해 구동이 되었습니다.

그림 1 Visual Studio 2008 도움말 설명서

그림 2 Visual Studio 2010 로컬 웹 도움말 설명서

두 가지 방식의 장단점은 다르겠지만, Visual Studio 2010 로컬 웹 도움말 설명서는 입력한 내용의 인덱스를 보여주지 않아 매우 불편했었습니다. 클래스 이름이나 네임스페이스 이름으로 검색할 때 AJAX 기술로 키워드의 인덱스를 보여주었더라면 그나마 좋았을 텐데 하고 불편함을 감수하기도 하였습니다.

Visual Studio 2010 SP1 에서는 로컬 웹이 구동되고 키워드가 인덱스 되지 않는 부분을 개선하여 기존의 로컬 도움말 설명서로 개선이 되었습니다.

그림 3 Visual Studio 2010 SP1 의 로컬 도움말 설명서

기존의 Visual Studio 2008 과 유사한 로컬 도움말 설명서 응용 프로그램으로 구동이 됩니다. 다만, 필자는 색인 창을 오른쪽에 도킹하여 쓰는데, 현재 Visual Studio 2010 SP1 에서는 도킹 기능은 제공하지 않습니다.

개선해야 할 점

기존의 웹 브라우저 방식보다 Help Viewer 1.1 이 낫긴 하지만, 여전히 사용자의 측면에서 불편하기는 마찬가지 입니다.

첫 번째, 여전히 로컬 웹 서버가 동작하여 도움말이 구동됩니다. 닫아버리고 싶은 왠지 모를 강박감…!

두 번째, 도움말의 폰트 크기가 제각각 입니다. 폰트도 작은데, 크게 키우면 너무 크고...
좌측은 Help Viewer 1.1, 우측은 MSDN 온라인 도움말.


세 번째, 샘플 코드 구조가 사정없이 깨집니다.
좌측, Help Viewer 1.1, 우측은 MSDN 온라인 도움말

네 번째, 개인적으로 인덱스 창을 오른쪽에 도킹하는데, 도킹 기능이 없네요^^;

다섯 번째, MSDN Documentation 2008 에서는 고유 URL 이 있는데, 지금은 도움말 에이전트의 URL 도 보여주지 않네요.
좌측은 MSDN Documentation 2008, 우측은 Help Viewer 1.1

그 밖에, 사용자 경험은 여러분께 맡기겠습니다.

그간 저희 Visual Studio Korea 팀에서 2010년 6월 1일 REMIX10 무료 온라인 백서를 참석 전원에게 드린 적이 있었습니다.

http://vsts2010.net/338
Visual Studio 2010 최신 PDF 자료를 MSDN 에서 다운로드 받으세요

그리고 지난 2011년 4월 18일, 그 두 번째 온라인 무료 백서를 공개하게 되었습니다.

VISUAL STUDIO KOREA 팀의 온라인 백서 다운로드 사이트

http://msdn.microsoft.com/ko-kr/gg620748

Visual Studio 응용 프로그램 모델링 완전 정복 백서

엄준일 MVP (엔씨소프트) – 다운받기

"Visual Studio 응용 프로그램 모델링 완전 정복 백서" 개발자에서 뛰어난 개발자로 안내하는 효과적인 백서입니다. 최종 산출물인 동작하는 소스 코드를 위해, 모델링에 대한 배경과 방법을 개발자의 관점에서 설명합니다. 그리고 Visual Studio 2010 이용하여 개발자가 효과적으로 모델링을 있는 환경을 제시합니다.

개발자들이여, 이제는 "개발자는 코드로 말한다" 관념을 버리십시오.현대의 소프트웨어 개발에서는 언제까지 당신의 코드가 나오기까지 기다려주지 않습니다.선택과 집중의 개발 생태계에서 당신이 올바른 방향을 바라보고 발을 내딛는다는 것을 아무도 믿어주지 않습니다.

코드로 말하기 이전에 자신의 목적과 목표를 명확하게 시각화하여 말하는 것이야 말로 우리 시대가 원하는 뛰어난 개발자임이 확신합니다.

ASP.NET MVC - M, V 그리고 C 각방생활

박세식 (유니위스) - 다운받기

ASP.NET 가려운 곳을 긁어줄 대안의 프레임워크가 나왔으니 바로 ASP.NET MVC 프레임워크입니다. MVC 각각 담당하고 있는 일이 있습니다. 컨트롤러는 사용자 요청의 흐름을 제어하고 그에 따른 모델과 뷰를 선택하는 , 모델은 데이터와 유효성 검사, 비즈니스 로직을 담당하는 , 뷰는 컨트롤러에서 전달받은 데이터를 UI에서 처리하는 일을 합니다. 이렇게 모델, , 컨트롤러로 명확하게 분리된 구조가 여느 복잡한 어플리케이션도 구조적으로 쉽게 개발할 있도록 도와줍니다. 여기 백서를 통해 개발의 도움을 주는 M, V 그리고 C 각방생활을 소개합니다.

남자의 Visual Studio 2010 TDD(Test Driven Development)이야기

강보람 MVP (IT Flow 선임 컨설턴트), 박세식 (유니위스) - 다운받기

TDD(Test Driven Development), 테스트 주도 개발은 애자일한 개발을 지원하기 위한 하나의 실천적 도구입니다. 하지만, 단순히 세부적으로 어떻게 해야 되는 것인지를 묻는 'How'만으로는 TDD 제대로 이해할 수가 없습니다. 어째서 TDD 소개되었으며, TDD 통해서 어떤 장점을 얻을 있는지를 이야기 하는 'Why' 'What' 동반되어야 TDD 이해할 있는 기반을 마련하는 것이시죠. 여기 개발자가 TDD 대해 나눈 대화를 흥미롭게 재구성해 기록한 백서가 있습니다. 백서를 통해서 TDD 대한 'Why', 'What' 그리고 Visual Studio 2010 개발에 TDD 적용한 'How' 같이 얻으시기 바랍니다.


VSS 마이그레이션 전략

Team Foundation Server 2011. 1. 18. 08:30 Posted by POWERUMC

Visual Source Safe 마이그레이션 이전에

많은 분들이 예전에 Visual Source Safe(이하 VSS) 를 사용하시면서, 현재는 이 VSS가 많은 골치거리라고 느끼시는 분들이 많이 계실 겁니다. 사실 소스 제어를 떠나서 VSS는 안정성 면에서 굉장히 불리하죠. 가장 흔하게 겪는 안전성의 문제는 파일 시스템 기반의 소스 제어 데이터베이스가 꼬이는 겁니다. 왜 꼬이는지는 알고 싶지 않지만, 오래 쓰면 쓸수록 꼬입니다.

제가 겪었던 꼬이는 대표적인 문제가 체크인 상태가 다른 사람에겐 체크인 상태가 아니라는 것이죠. 아무리 다른 사람이 최신 버전을 가져와도 그 소스 코드는 예전에 체크인 되었던 소스 코드이고, 불가피하게 강제로 다시 체크인해야 하기도 합니다. 뭐, 여기까지는 정말 가벼운 일상적인 문제이죠? 더 심한 경우는 복구 불능..!

최근 들어서, VSS의 이런 문제 때문에 많이 고생하시는 분들이 다른 소스 제어 제품으로 갈아타려는 준비를 많이 하십니다.

   

왜 VSS에서 이런 문제가 발생하나…?

사실 어쩔 수 없습니다. 지금에야 VSS가 실컷 얻어터질 수 밖에 없지만, 사실 예전에도 뚜렷한 대안이 있었던 것도 아닙니다.

VSS아니면 CVS(Concurrent Versions System) 인데, 이 CVS도 그 기능 자체의 구현이 충실하지 않아 문제점을 얘기하자면 VSS나 크게 별반 다를 것이 없었습니다. 참고로 Wikipedia 의 과거 소스 제어 제품을 보면 다음과 같지요. 즉, 당시에 VSS 보다 더 뛰어난 제품도 찾기 힘들었고, 현대의 이슈인 안정성과 성능, 보안의 요소는 어디를 뒤져봐도 없었습니다. 즉, 당시에는 어떤 제품을 선택하든 똑같은 문제를 겪었을 테니까요.

   

다만, VSS 제품은 VSS 2005 버전까지 오면서 많은 부분에서 보완이 되었지만, 사용자의 요구사항에 매우 소극적으로 대응했던 점에서 아쉬움이 남습니다.

아래는 조만간 나오게 될 백서의 내용 중의 일부이니 참고하세요.

   

 

일반적으로 '형상관리'라는 의미의 소스 제어는 소스 제어(Source Control), 버전 컨트롤(Version Control), 소프트웨어 환경 관리(Software Configuration Management)라고 불립니다. 향후 소스제어는 서버/클라이언트 아키텍처로 변경되면서 개발 조직에서 소스를 공동으로 개발하고 공유할 수 있게 되었습니다.

초기 Microsoft 에서는 소스 제어를 위한 소프트웨어로 Visual SourceSafe(비주얼 소스세이프) 를 내놓게 되었습니다. Visual SourceSafe는 처음 One Tree Software 라고 불리는 회사에서 여러 운영체제를 지원하는 소스 제어 솔루션을 만들었는데, Microsoft 는 이를 1994년에 인수하여 즉시 Visual SourceSafe 3.1 버전을 내놓았습니다. 그 이후로, Visual SourceSafe 4.0, 5.0, 6.0, 2005 버전까지 지속적으로 지원을 하다가, Visual SourceSafe 2005버전을 마지막으로 이 제품의 업데이트는 이루어 지지 않고 있습니다.

Microsoft는 그 이후에 내부적으로 소스 제어 뿐만 아니라 버그 추적/품질 관리/제품 계획에 사용되는 솔루션을 만들었고, 그 이름은 "Product Studio" 라는 제품입니다. 이 제품은 Microsoft 내부적으로 사용하기 위한 제품이었고, 이 제품을 통해 노하우를 발전시켜 비즈니스 프로세스, 개발 등 전반적인 모든 개발 활동을 아우를 수 있는 "Visual Studio Team System, Team Foundation Server" 를 시장에 내놓게 되었습니다.

   

VSS to TFS2010 마이그레이션 전략

일단 아쉽지만 VSS와 같은 제품 군은 TFS(Team Foundation Server)에 100% 마이그레이션이 힘들 수 있습니다. 왜냐하면 VSS는 파일 시스템의 파일 단위 체크인 방식인데, TFS제품은 변경 집합(ChangeSet) 기반의 소스 제어 구조를 가집니다. 변경 집합은 변경이 일어난 묶음의 세트를 얘기하며, 이 변경 집합 덕분에 분기(Branch)/병합(Merge)/이력/관리가 매우 용이합니다. 덕분이 3-ways 방식의 병합이 매우 안정적으로 동작할 수 있고요.

VSS to TFS로 마이그레이션이 100% 보장할 수 없는 예를 들자면, 고객의 데이터베이스 스키마에 "주소"가 없는데, "주소" 컬럼이 생겼다고 주소를 가짜 데이터로 입력할 수 는 없는 노릇입니다. 게임을 예로 들면, 게임 시스템에 새로운 스킬이 생겼다고 종족/레벨/서버를 막론하고 모두가 이 스킬을 습득할 수 없는 것과 마찬가지입니다.

기존의 VSS는 레이블(Labeling) 방식의 이력 관리를 하였기 때문에, 이것을 변경 집합(ChangeSet) 기반으로 바꿀 수는 없습니다. 그래서 100% 마이그레이션이 힘든 한 가지 원인이기도 합니다. 그렇게 때문에 VSS to TFS로 마이그레이션을 결심하였다면, "퀑 대신 닭", "짜장면 대신 짬뽕","아이폰 대신 블랙베리" 라는 심정으로 100%를 기대하시면 오히려 독이 될 수 있답니다.^^

아래는 VSS to TFS 마이그레이션 전략을 메트릭스로 표현해 보았습니다. 물론, 이것 보다 더 많은 고려 사항이 있습니다만, 대략 아래의 정보에 답할 수 있다면 마이그레이션은 가능하다고 말씀 드리고 싶네요.

   

   

Team Foundation Server 및 .NET 플랫폼 기술 문의

언제든지 저희 Visual Studio Korea 공식 팀 블로그에 문의를 주시기 바랍니다. 저희가 모든 것을 가이드해 드릴 수는 없지만, 저희 팀의 다양한 분야의 기술 전문가들이 성의껏 여러분들을 도와드리고 있습니다. 저희 팀은 언제나 새로운 기술에 목말라있고, 먼저 고민하고 뼈저리고 값진 노하우를 경험한 컨설팅/개발/교육 및 강사 출신의 분들과 Microsoft MVP 활동을 하고 계신 많은 분들이 계십니다.

더불어, Microsoft 의 Social Forums 인 http://social.msdn.microsoft.com/Forums/ko-kr/categories/ 에 오시면 많은 전문가들의 생생한 고급 답변을 들을 수 있습니다.


개발을 진행하다보면, 아무리 훌륭한 툴이라고 하더라도 기능이 부족해서 확장 컴포넌트를 구매해서 쓰는 경우가 있습니다. 저도 예전에 Visual Studio 2008로 개발할 때, DB의 변경사항을 LINQ to SQL의 OR디자이너에 바로 반영하는 기능이 없어서, 검색하다 찾은 확장 컴포넌트를 체험기간만큼 사용했던 기억이 있습니다. 비주얼 스튜디오 2010의 IDE가 매우 훌륭해지기는 했지만, 그래도 좀 더 손맛이 느껴지는 기능을 찾으시는 분들이 있으실 텐데요, 아주 훌륭하고도 공짜인 확장 툴이 가까이 있습니다. 오늘 소개해드릴 Productivity Power Tools가 바로 그것입니다!

설치부터 아주 간단합니다. '도구' 메뉴의 '확장 관리자'를 이용하셔서 '온라인 갤러리'에서 'power tool'이라고 검색만 하시면 찾을 수 있고, 더블클릭만 해주시면 그냥 쉽게 깔립니다. 하지만 기능은 매우 다양합니다. 이제 부터 하나하나 소개 해드리겠습니다.


- 솔루션의 대양을 항해하라, Solution Navigator

좀 복잡한 프로젝트를 하다보면 솔루션에 프로젝트가 아주 많아집니다. 저는 16개정도까지 포함되는 걸 해본적이 있는데요, 이런 솔루션의 대양을 항해할 때는 역시, 나침반이 제맛이죠 :)


어떤가요? 솔루션 탐색기랑 비교해서 좀 이쁘게 생겼나요? 우선 뭔가 틀린 점들이 보이는데요, 하나씩 알아보죠.

1. 클래스의 멤버레벨까지 탐색.


기존의 솔루션 탐색기는 파일레벨까지 탐색이 가능했지만, Solution Navigator(이하 네비로 줄여씁니다)에서는 클래스의 멤버까지 탐색이 가능합니다.

2. 빠른 검색.

네비를 보면, 검색어를 입력할 수 있는 텍스트박스가 하나 있습니다. 여기에 Cl이라고 입력하면(씨엘...?), 다음과 같이 Cl이 포함되는 항목을 모두 찾아줍니다.


3. 호출 계층구조 바로 보기

Visual Studio 2010에 추가된 호출 계층구조 보기가 네비안에 통합되어 있습니다. 네비안에서 항목을 하나 선택하면, 오른쪽 끝에 조그만 아이콘이 하나 생깁니다. 이 아이콘을 누르면, 네비의 항목이 그 항목을 원점으로 해서 다시 표시됩니다. 예를 들어서 Class1의 PrintCount()메서드를 원점으로 해서 보면 아래와 같습니다.


이 메서드가 포함하는 것과, 참조하는 것들, 누가 이 메서드를 호출하는지, 이 메서드가 어떤 것들을 호출하는지 등을 한번에 파악할 수 있죠.

4. 네비가 표시할 항목 필터링

네비에서 솔루션항목 바로 아래에 보면 4가지 커맨드가 있습니다. All은 말 그대로 모든 항목을 표시하는 거구요, Open은 아래처럼, 지금 코드 편집기에서 열려있는 항목만 표시합니다.


그리고 Unsaved는 아래처럼 변경사항을 저장하지 않은 항목만 보여줍니다.


저장하지 않은 항목의 탭을 붉은색 점으로 강조하는 것도 새로 추가된 기능입니다. 그리고 Edit는 한번이라도 수정되었던 파일을 표시합니다.

5. 이미지 썸네일 제공

네비에 에서 솔루션에 포함된 이미지 파일에 마우스를 올리면, 아래와 같이 이미지의 썸네일을 표시해줍니다.


6. 코드 편집기에서 즉석 호출

코드 편집기에서 네비의 기능을 즉석 호출할 수도 있는데요, 예를 들어서 PrintCount메서드내에 커서를 두고 'Ctrl + 1'키를 누르면, PrintCount메서드와 관련된 항목들이 바로 나타납니다.


그리고 'Ctrl+2'를 누르면, 현재 코드 편집기에서 열려있는 파일의 모든 클래스에 대한 정보가 바로 나타납니다.




- Visual Studio를 Tab!

비주얼 스튜디오의 코드편집기에서 여러파일을 작업하려면 여러파일을 열어놓고 탭으로 파일간의 이동을 하면서 작업을 해야 합니다. 그만큼 많이 사용해야 하는 탭인데요. 이 탭이 어딘가 모르게 좀 불편한 면이 있었습니다. 그래서 Power Tools에서는 이 탭에 대한 지원이 막강해졌습니다.

1. 다양해진 옵션


옵션에 들어가면 Power Tools탭안에 Document Tab이라는 항목이 따로 있습니다. 그리고 미리 정의된 프리셋을 제공하는데요, Visual Studio 2008부터 아주 다양한 프리셋을 지원합니다.

2. Option 1 : Web Browser: Scrollable tab well


이 탭은 브라우저 처럼, 탭에 해당항목의 아이콘이 붙습니다. 그리고 고정시킬 수도 있는데요, 고정시킨 탭은 움직일 수 없습니다. 그리고 'Close All But Pinned'와 같이 고정된 탭을 제외하고 모두 닫기 같은 옵션도 제공합니다. 그리고 옵션에서 'Show pinned tabs in a separate row'를 체크하면 아래와 같이 고정된 탭만 구분해서 볼 수도 있습니다.


3. Option 2 : Scrollable Tab Well: Sorted by project


이 옵션을 사용하면, 위 사진과 같이 프로젝트 별로 탭의 색깔을 구분하고 정렬해서 보여줍니다. 15개까지 다른 프로젝트를 지원합니다.

4. Option 3 : Vertical Tab Well: Color coded and sorted by project


이 옵션을 사용하면, 기존의 수평이 아닌, 수직으로 탭을 나열해서 보여줍니다. 이렇게 하면 훨씬 많은 탭을 한번에 볼 수 있다는 장점이 있습니다 :)

5. Option 4 : Dynamic Tab Well: Removes tabs based on usage

이 옵션은 좀 똑똑한 옵션인데요. 탭이 많아서 한번에 표시하지 못할 경우, 가장 적게 사용한 탭 순으로 먼저 사라지게 하는 것입니다. 쫌 괜찮죠 :)


- 마치면서

오늘은 Power Tools의 Solution Navigator와 Tab에 대해서 알아봤습니다. 이 것만 해도 상당히 유용한 기능인데요, 소개해드릴 기능이 조금 더 남았습니다. 그럼, 다음에 또 뵙죠 :)

Visual Studio 31 (3) - Temp Project

Visual Studio 2010 2010. 11. 18. 09:00 Posted by 알 수 없는 사용자

개발하다 보면, 지금 작성하고 있는 알고리즘이 내가 원하는 대로 작동하는지 헷갈리기 시작합니다. 하지만, 프로젝트의 일부로 속하는 이 알고리즘이 제대로 작동하는지 알 수 있는 방법은 유닛테스트 외에는 직접 실행하는 방법외에는 없습니다. 알고리즘이 UI나 데이터베이스 같은 다른 부분과 긴밀하게 연계되어 있기 때문에 알고리즘만 따로 테스트할 방법이 마땅히 없으며, UI정도라도 배제하고 테스트하는 방법이 바로 유닛테스트를 활용하는 방법인거죠.

그래서 간단한 예제 데이터를 가지고 확인하고 싶을 때는 콘솔 어플리케이션 프로젝트를 활용하기도 합니다. 알고리즘을 제외한 모든 걸 최고로 단순화 시켜놓고 알고리즘 자체만 가지고 테스트를 진행할 수 있기 때문이죠. 그런데, 이 콘솔 어플리케이션을 애용하다보면, 다음과 같은 상황이 발생합니다.


'ConsoleApplication'뒤에 붙는 숫자가 계속해서 늘어만 가고, 프로젝트 폴더는 점점 더 지저분 해지는 것이죠. 이런 상황을 미연에 방지할 수 있는 기능이 Visual Studio에 있습니다. 어떤 기능인지 한번 알아보시죠.


- 왔다 가는 인생 흔적을 남기지 않도록.

'도구'메뉴에서 '옵션'을 선택하면, 다음과 같은 '옵션'창이 나타납니다.


그리고 '환경'탭을 시작으로 아래쪽으로 많은 옵션이 있죠. 평생 저런 옵션 다 만지는 일이 있을까 싶을 정도로 말이죠. 하지만... '환경'에서 한 칸만 위로 올라가보면...?



'프로젝트 및 솔루션'이라는 탭이 숨어있습니다!! 바로 이 탭이 오늘 소개하려는 기능과 관련이 있습니다. 항목을 찬찬히 살펴보다 보면, '만들어질 때 새 프로젝트 저장'이라는 항목이 있습니다. 이 항목이 기본으로 체크되어 있는데요, 이 항목의 체크를 해제하고 확인을 누릅니다.

그리고 새프로젝트 대화상자를 열어보면,


음... 뭐가 바뀐 걸까요? 한번 이 그림을 가지고 묵상을 해보시기 바랍니다...

답을 알아내셨나요? 힌트를 드리자면, 아까 분명히 탐색기를 보여드렸을 때, 'ConsoleApplication9'까지 있었는데, 새프로젝트 대화상자에 나타난 것은 'ConsoleApplication10'이 아니라 'ConsoleApplication1'입니다.

네, 바로 임시 프로젝트 공간에 프로젝트를 생성하기 때문입니다. 그래서 대화상자를 보시면, 경로를 명시하는 부분이 사라진 것을 확인하실 수 있습니다. 그럼 프로젝트를 생성하겠습니다.

그럼 이제 제가 거짓말 하는 것이 아님을 보여드릴 차례네요. 다음과 같이 프로젝트에 오른쪽 버튼을 클릭하고 '윈도우 탐색기에서 폴더 열기'를 선택합니다.


그러면, 프로젝트 폴더가 탐색기에서 열립니다. 탐색기의 경로를 유심히 보시죠.


Local밑의 Temporary Projects라는 경로가 보이실 겁니다. 바로 여기에 생성되었다가, 솔루션을 닫을 때 저장하지 않으면 사라지는 것이죠. 그럼 솔루션을 닫아볼까요?


저장할 것인지, 버릴 것인지 물어봅니다. 버리면 그냥 사라지는 거죠. 모든 기능이 그렇 듯이 임시 프로젝트에도 몇가지 제약 사항이 있는데요. 첫 번째는, 단일 프로젝트만 가능하다는 것입니다. 임시 프로젝트에 새 프로젝트를 추가하려고 하면 다음과 같은 메세지를 볼 수 있습니다.


그리고 두 번째로, 경로가 필요한 웹 어플리케이션 같은 프로젝트 타입에는 사용할 수 없다는 것입니다.


- 마무리

임시 프로젝트 기능을 통해서 프로젝트 폴더를 깔끔하게 유지하시기 바랍니다. 그럼 다음에 또 뵙죠~ :)

Visual Studio 31 (2) - Startpage

Visual Studio 2010 2010. 11. 15. 09:00 Posted by 알 수 없는 사용자

Visual Studio 31~! 오늘은 그 두번째 시간으로 비주얼 스튜디오를 켜면 항상 보게 되는 시작 페이지에 대해서 이야기 해보겠습니다.


- 기존 작업목록을 관리하기 시작~!

우선 '최근에 사용한 프로젝트' 목록부터 살펴보죠.


비주얼 스튜디오 2008까지는 '최근에 사용한 프로젝트'목록을 편집할수가 없었습니다. 그래서 아무리 자주 작업하는 프로젝트라고 하더라도 잠깐 다른 작업하면서 프로젝트 열고, 생성하다보면 목록에서 사라지는 때가 있습니다. 그럴때는 다시 경로 찾아가서 열어야 했죠. 이제 비주얼 스튜디오 2010에서는 자주 작업하는 프로젝트나 중요한 프로젝트는 목록에 고정시켜놓을 수 있습니다. 항목의 왼쪽에 핀이 있는데 그걸 꾹~ 눌러주면, 프로젝트가 아무리 많이 생성되고 열리더라도 항상 그자리를 지키게 됩니다. :)


그리고 조금 더 편리한 기능도 추가되었는데요, 항목에 마우스 오른쪽 버튼을 눌러보면, 프로젝트의 폴더를 열거나, 목록에서 제거하는 것도 가능합니다. 기존 버전에서는 지원되지 않았었죠.


그리고 시작 페이지에 추가된 또 하나의 작은 기능. 프로젝트를 로드한 뒤에 페이지를 닫을 것인지, 시작할 때 페이지를 표시할 것인지를 선택할 수 있게 되었습니다.


- 시작 페이지를 내 맘대로 설정하기 시작~!


'도구'메뉴에서 '옵션'항목을 선택해서 '옵션'창을 띄우면, '환경'탭 안에, '시작'항목이 있습니다. 여기에 보면, 비주얼 스튜디오를 시작할 때, 시작 페이지를 어떻게 할 것인지에 대한 옵션이 있습니다. 마지막으로 작업했던 솔루션을 로드하게 할 것인지, '새 프로젝트'대화 상자를 띄울 것인지, 등등등. 이 옵션은 기존에도 있었습니다. :) 위 그림에서 비주얼 스튜디오 2010부분을 유심히 보시면 '시작 페이지 사용자 지정'이라는 항목이 있습니다. 시작 페이지도 마음대로 바꿀 수 된거죠! 그럼 다른 사람들이 만든 시작 페이지를 받아서 세팅해보겠습니다.

'도구'메뉴를 통해서 '확장관리자'를 띄우면, 온라인에 다른 사람들이 만들어서 공개해놓은 확장을 검색하고 설치할 수 있습니다. 검색란에 'startpage'라고 입력해보면,


위와 같이 몇가지 시작페이지가 검색됩니다. 여기서 'ItaStartPage'를 한번 설치해보겠습니다. '다운로드'버튼을 누르고,


이어서 나오는 창에서 '설치'를 눌러서 확장을 설치합니다. 그리고 비주얼 스튜디오를 재시작해서 확장이 검색되도록 합니다.


그리고 다시 시작페이지 설정으로 들어와서 '시작 페이지 사용자 지정'항목을 보면, 아까 설치했던 확장이 검색되는 것을 볼 수 있습니다. 확장을 선택하고 '확인'을 눌러서 설정을 적용하면,


아하~! 이 확장 시작페이지는 시작 페이지에 배경 이미지를 설정할 수 있군요 :) 참고로 'ItaStartPage'를 만든 분이 'ItaBackgroundImage'라는 것도 만드셨는데, 설치해보니...


이렇게 코드 편집기 창에도 배경이미지를 설정할 수 있더군요! :)


- 다음 시간에~

그동안 아무 생각없이 매일 대면하던 시작 페이지도 이런저런 기능 변화를 통해서 편리하게, 그리고 내 입맛에 맞게 변경할 수 있게 변했네요. 그럼 다음 시간에 또 뵙죠 :)

Visual Studio 31 (1) - 시작, 그리고 Intellisense

Visual Studio 2010 2010. 11. 11. 09:00 Posted by 알 수 없는 사용자


안녕하세요~ 워너비입니다. 이번에 새로운 시리즈를 하나 시작하게 되었습니다. 이 시리즈는 이름하여 'Visual Studio 31'! 골라먹는 재미가 있는 아이스크림처럼, 비주얼 스튜디오 2010도 엄청나게 다양한 기능 속에서 필요한 기능을 골라쓰는 재미가 있습니다. 몰라서, 어려워서 못 썼던 기능이 있으시다면, 이 시리즈를 통해서 좀 더 친숙해지셨으면 하는게 이 시리즈의 목표입니다. 목표가 달성될지는 살짝 의문이네요 :)


- 오늘은 그 첫 시간.

자, 오늘은 Visual Studio 31의 첫 번째 시간으로 인텔리센스에 대해서 알아보겠습니다. 인텔리센스는 비주얼 스튜디오의 얼굴이라고도 할 수 있죠. 모든 개발자가 가장 많이 활용하며, 코딩에서 가장 편리함을 제공하는 기능이기 때문이죠. 이 인텔리 센스가 비주얼 스튜디오 2010에서 어떻게 달라졌을까요? 비주얼 스튜디오 2008의 인텔리센스와 Before/After를 비교해보도록 하죠 :)


- 관련있는 것들만 보여주는 쎈쓰!



차이점을 발견하셨나요? VS2008에서는 'Console'을 입력하면, 전체목록에서 'Console'과 정확히 일치하는 곳에 포커스를 둡니다. 그런데 포커스를 두기만 할 뿐, 아무런 것도 도와주지 않았습니다. 그런데 VS2010에서는 'Console'을 입력하면, 'Console'이 포함되는 것들만 추려서 인텔리센스에 보여줍니다. 인텔리센스가 많이 똑똑해졌죠? 이제 사용자에게 필요한 정보만 최대한 추려서 보여주는 거죠. 자, 그럼 인텔리센스의 쎈쓰! 가 여기까지 일까요?


- 이름의 일부로도 찾아주는 쎈쓰!


이번에는 어떤 차이점이 있을까요? 기존에는 정확하게 찾으려는 항목과 입력하는 항목의 시작이 같아야만 인텔리센스에서 해당항목을 찾아줬습니다. 그런데 저 처럼 기억력이 저주받은 사람들은 참 슬픈 코딩을 해야했죠. 다른 방법이 있을지도 모르겠지만, 초짜인 제가 했던 방법은 MSDN에 들어가서 얼추비슷한 키워드로 검색을 해서 찾는 방법이었습니다. 그런데 이제 VS2010은 저 같은 초짜&저주받은 기억력 세트를 가진 사람들을 위해서 사용자가 입력하는 문자를 포함하는 항목을 모두 보여주도록 향상되었습니다. 'Color'만 입력하더라도 VS2010은 'Color'가 포함되어있는 'ConsoleColor'를 찾아서 보여주는 거죠 :) 점점 마음에 듭니다.


- 파스칼 케이스로도 찾아주는 쎈쓰!

파스칼 케이스는 뭘까요? 일종의 네이밍 규칙인데요, 서로 다른 단어를 조합해서 메서드 이름을 만들거나 할때, 각 단어의 맨앞글자를 대문자로 표기하는 방법입니다. Console과 Color를 조합해서 'ConsoleColor'를 만드는 것 처럼 말이죠.


기존에는 위에서 설명드렸듯이 시작부터 정확하게 같아야지만 인텔리센스에서 항목을 찾을 수 있었습니다. 하지만 똑똑해진 VS2010에서는 파스칼 케이스의 각 대문자만 입력해도 찾아준다는 거죠. 'CC'를 입력했다면, 'CC'가 직접 포함되는 항목부터, 'C'가 파스칼 케이스로 연속 두번 포함되는 항목도 모두 찾아서 보여줍니다. 이름이 긴 항목을 자주 찾는다면 매우 편리하겠죠 :)


- 없는 클래스도 보여주는 쎈쓰!

TDD를 하려고 할때나, 먼저 코드의 윤곽을 짜놓고 필요한 클래스를 생성하는 식의 프로그래밍을 할때는 존재하지 않는 타입의 객체를 생성해서 사용하게 됩니다. 이런 방식은 어느정도 장점도 가지고 있는데요, 우선 생성하고 하는 클래스의 구체적인 부분에 대해서 생각하는 대신에, 지금 짜려고 하는 코드의 흐름에 우선적으로 집중할 수 있기 때문입니다. 코드의 흐름에 집중하다가, 클래스를 정의하려고 하면 집중의 전환이 일어나기 때문에 그만큼 비효율적인 작업이 될 수도 있습니다.


존재하지 않는 App라는 클래스의 객체를 생성하려고 하면, 기존 버전에서는 전혀 인텔리센스의 지원을 받을 수 없었습니다. 그래서 일일이 쌩코딩을 해야 했었죠. 하지만, VS2010이 출동한다면? 존재하지 않는 타입이라고 하더라도 일단 new를 만나면 존재하는 타입인 것 처럼 인텔리센스에서 보여줍니다. 많이 편리해졌죠~? :)


- 개발자의 취향에 따라 맞춰가는 쎈쓰!



위 Before/After는 모두 VS2010의 캡쳐입니다. 무슨 차이점이 있을까요? Before에서는 입력하는 것과 일치하는 항목에 강조가 되어있고, After에서는 맨위에 별도의 칸이 한칸 추가되어 있으며, 인텔리센스에 강조가 약하게 되어있다는 점이 차이점입니다. After에서 볼 수 있는 것이 VS2010의 인텔리센스에서 제공하는 '서제스천 모드'를 사용한 것입니다. 바로 검색 사이트의 검색창을 떠올리시면 됩니다. 거기서 검색어를 입력하면, 입력하는 검색어와 가장 비슷한 항목을 보여주지만 그 항목이 검색어를 입력하는데 아무런 영향을 주지는 않습니다. 선택하지 않으면 그만이라는 거죠. 그러면, 둘은 어떤 차이가 있을 까요? 기본적인 인텔리센스와 서체스천 모드를 사용한 인텔리센스에서 'App'를 입력하고 Space키를 눌러보면 그 결과를 확인할 수 있습니다.

App라는 클래스는 존재하지 않기 때문에, 기본 모드에서는 가장 비슷한 AppDomain을 선택해버립니다. 하지만, 서제스천 모드에서는 추천항목을 보여줄 뿐, 사용자의 입력에 관여하지 않기 때문에 그냥 App그대로 남은 걸 보실 수 있습니다. 서제스천 모드를 사용하려면, 코드 편집창에서 'Ctrl + Alt + Space'를 누르면 됩니다. 그리고 서제스천 모드에서 기본 모드처럼 추천 항목을 입력하고 싶으면 'Tab'키를 누르면 됩니다 :)


- See you next time :)

오늘은 첫 시작으로 인텔리센스에 대해서 알아봤습니다. 앞으로도 계속해서 골라먹을 수 있는 비주얼 스튜디오 2010의 기능에 대해서 소개해 드릴예정이오니~, 기대해주시기 바랍니다. :)
정말이지, 테스팅 그거 아무나 하는거 아니죠. 특히 저처럼 게으른 놈은 발을 들여놓기가 무서울때도 있습니다.
고객분들은 빠른 결과물을 얻길 원하시고, 그 고객이 여럿이면 모두가 자기의 일이 우선이니 빨리 좀 해달라고 아우성 거릴때가 많습니다. 가뜩이나 개발로도 벅찬 시간인데, 테스트라뇨.. 에잇!
하지만, 그렇게 작업을 한 후 스테이징(Staging Server - 라이브 서버에 반영하기 전 배포하여 테스트하는 서버입니다^^) 에 적용해놓으면 테스트팀에서는 온갖 방법으로(정말 어처구니 없는 입력값으로 마구 공격(?)해 들어오시죠) 테스트를 한 후 결과물들을 전달해주시죠. 그것 예외처리하는 것으로 인해 또한번의 시간이 소비되고 다시 테스트하고 다시 결과물 받고, 계속 반복되는거죠. 그렇게되면, 처음에 빨리 개발했던 시간이 무용지물이 되어버리는 것이죠.

신입시절에(지금도 신입 짬밥이죠;;) 과장님 한 분이, '야, 어떻게 너는 일을 주면 생각없이 컴퓨터로 바로 달려들어 개발하냐?' 라고 한 말씀 해주셨습니다. 먼저 그림을 그려보라고, 이면지 많잖아. 없어? 내가 줄까? 그러시며,  흐름을 생각하며, 어떤식으로 해야할지 먼저 그림을 그리라고요.
테스팅하는 것도 먼저 그림을 그려보는 작업 같습니다. 이렇게 개발을 하면 원하는 결과값이 나오겠지하며, 테스트와 병행하며 원하는 결과값이 맞게 나오는지 확인해가며 개발을 해나가는 거죠.



단위 테스트 프레임워크를 사용해보자


닷넷 프레임워크를 위한 테스트 프레임워크가 많습니다. 다들 아시는 NUnit, xUnit, MbUnit 등이 있죠. 하지만, 저 게으른 것 다들 아실겁니다. 그래서! 비주얼 스튜디오 단위 테스트를 이용하겠습니다. 위 단위 테스트 사이트들 들어가서 다운받고 설치하고, 에휴~^^;

ASP.NET MVC 프로젝트를 생성하게 되면 아래의 화면과 같이 단위 테스트를 할지 여부를 묻는 대화상자가 나옵니다. 예(Yes)를 선택하면, 프로젝트가 생성될때 테스트 프로젝트도 같이 생성하게 됩니다.


테스트 프로젝트에는 Controllers라는 폴더가 있고, 그 안에는 샘플프로젝트의 Home컨트롤러와 Account컨트롤러를 테스트하기 위한 HomeControllerTest.cs와 AccountControllerTest.cs 가 있습니다. HomeControllerTest를 열어보면 다음과 같습니다.


Microsoft.VisualStudio.TestTools.UnitTesting 네임스페이스가 임포트 되어 있는 것이 보이고, [TestClass], [TestMethod] 가 눈에 띄네요. 주석을 보니,

TestClass : 테스트 메서드가 포함된 클래스를 식별하는데 사용됩니다.
TestMethod : 테스트 메서드를 식별하는데 사용됩니다.

이렇다네요.^^



테스트와 함께 하시겠습니까?


다음은 TelDirController 소스입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace UsingTest.Controllers
{
    public class TelDirController : Controller
    {
        //
        // GET: /TelDir/

        public ActionResult Index()
        {
            return View();
        }

        //
        // GET: /TelDir/Details/5

        public ActionResult Details(int id)
        {
            return View();
        }       
    }
}

아무것도 처리하지 않은 깨끗한(?) 소스입니다. Index(), Details() 라는 두 액션메쏘드가 있고, 두 메쏘드 모두 View를 리턴하고 있습니다.

그럼, TelDirController를 위한 테스트를 생성해보겠습니다.



테스트 만들기


테스트 프로젝트의 Controllers를 오른쪽 버튼으로 클릭한 후 추가 -> 새 테스트를 선택합니다.


테스트하려는 컨트롤러 이름 뒤에 Test 만 붙여서 이름을 만들겠습니다. TelDirControllerTest 처럼요.^^;


확인 버튼을 클릭하면 다음의 소스가 보이실겁니다^^


지금으로선 불필요한 것들을 모두 닫아놓긴 했는데요, 물론 삭제하셔도 됩니다. 이런 것도 싫다 하시면, Controllers 폴더에서 클래스를 생성한 후 TestClass와 TestMethod 속성, 그리고 UnitTesting 네임스페이스를 임포트시키시면 됩니다.



맛보기 테스트


정말 맛만 보여드리겠습니다.^^;

TelDirController.Details 메쏘드가 정말 "Details" 뷰를 리턴하는지 테스트 해보도록 하겠습니다.
먼저 테스트 메쏘드를 만들어보겠습니다.

[TestMethod]
public void DetailsTest()
{
    var controller = new TelDirController();
    var result = controller.Details(1) as ViewResult;
    Assert.AreEqual("Details", result.ViewName);
}

Assert.AreEqual 은 비교대상의 두 값이 같은지 여부를 나타냅니다. 같으면 성공, 다르면 실패.
ViewResult.ViewName은 컨트롤러에서 리턴받은 뷰명을 나타냅니다.
자~ 테스트를 진행해볼까요?


'솔루션의 모든 테스트 실행' 버튼을 클릭합니다. 단축키는 Ctrl+R,A 라고 친절히 알려주네요^^ 물론 지금은 테스트 케이스가 하나라 이렇게 하지만 모든 테스트 실행 좌측에 있는 버튼인 '현재 컨텍스트의 테스트 실행'은 현재 선택받은 곳, 즉 커서가 위치한 곳의 테스트를 진행합니다.


엥?! 실패하였습니다. 예상 값이 Details 인데 실제값은.. 실제값은.. 없네요;;

TelDirController의 Details 메쏘드를 살펴보죠.

public ActionResult Details(int id)
{
    return View();
}

이렇게 되어 있네요. 잘못된 것은 없어보이는데요. 

Details 뷰를 리턴하려면 두 가지 방법이 있습니다. 위처럼 Details 액션 메쏘드에서 return View() 를 하는 방법(이것은 액션 메쏘드의 이름에서 유추가 됩니다), 다른 하나는 명시적으로 return View("Details") 와 같은 방법입니다.

그럼, 또다른 방법을 택해서 테스트를 돌려보죠.

public ActionResult Details(int id)
{
    return View("Details");
}

결과는


통과~.
이래서, 아~ 테스트시에는 뭐든지 확실하게 명시적으로 표현해줘야하는구나~ 라는 것을 알 수 있습니다.^^



마무리요



이번 포스팅은 간단하게 테스트하는 방법에 대해서 알아봤는데요, 다음은 이 테스팅에 대해서 좀더 자세하게 알아보는 시간을 가져보겠습니다.

맛이 어떠셨나요? 다음에는 더 화끈한 맛을 보여드리도록 하겠습니다^^



참고자료 : http://www.asp.net/mvc/tutorials/creating-unit-tests-for-asp-net-mvc-applications-cs
잊고 계셨을지도 모를 jqGrid 마지막편입니다.
이번 시간은 jqGrid를 이용하여 데이터를 추가, 편집, 삭제해보는 시간을 가져보도록 하겠습니다.


뷰페이지부터 보죠


지난 포스팅에 이어나갑니다. 먼저 가장 중요한 스크립트 부분을 보시면,

var updateDialog = {
                url: '<%= Url.Action("Update", "Home") %>'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};
                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    rowData = list.getRowData(selectedRow);
                    ajaxData = { dirId: rowData.dirId };
                    return ajaxData;
                }
                , width: "400"
            };
            $.jgrid.nav.addtext = "추가";
            $.jgrid.nav.edittext = "편집";
            $.jgrid.nav.deltext = "삭제";
            $.jgrid.edit.addCaption = "전화번호부 추가";
            $.jgrid.edit.editCaption = "전화번호부 편집";
            $.jgrid.del.caption = "전화번호부 삭제";
            $.jgrid.del.msg = "정말 삭제하실거에요?";
            $("#list").jqGrid({
                url: '<%= Url.Action("EntityGridData", "Home") %>',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'dirId', index: 'dirId', width: 40, align: 'center', editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                  { name: 'name', index: 'name', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'phone', index: 'phone', width: 200, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'email', index: 'email', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmsuffix: ' *'} },
                  { name: 'speedDial', index: 'speedDial', width: 200, align: 'center', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'}}],
                pager: $('#pager'), 
                emptyrecords: "Nothing to display",             
                rowNum: 3,
                rowList: [3, 10, 20, 50],
                sortname: 'dirId',
                sortorder: "desc",
                viewrecords: true,
                caption: '전화번호부',
                ondblClickRow: function (rowid, iRow, iCol, e) {
                    $("#list").editGridRow(rowid, updateDialog);
                }
            }).navGrid('#pager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true
                },
                updateDialog,
                updateDialog,
                updateDialog

            );

너무 많이 바뀌었나요? 그래도 알아보시죠? :) 굵은거~굵은거~

먼저 보이는것은 updateDialog가 보이네요. url도 보이고 submit 하고 ajax도 보이고.
데이터의 추가,편집,삭제시에 뜨는 팝업창에서 할일들이죠. Home 컨트롤러의 Update라는 액션메쏘드를 호출할거고요.
추가, 편집 후에는 창을 닫을 것이고(closeAfterAdd: true, closeAfterEdit: true), 모달창이고(modal: true), submit시 ajax를 사용하는 것 같아보이네요^^

다음으로 보이는게 $.jgrid.nav... 입니다. 이것은 지난 시간에도 말씀드렸던  grid.locale-en.js 을 수정하는 부분입니다. 이런 언어파일에는 디폴트값이 들어가 있다고 말씀드렸었죠? 기억하시죠? ;;

$.jgrid.edit = {
    addCaption: "Add Record",
    editCaption: "Edit Record",
    bSubmit: "Submit",
    bCancel: "Cancel",
    bClose: "Close",
    processData: "Processing...",
    msg: {
        required:"Field is required",
        number:"Please, enter valid number",
        minValue:"value must be greater than or equal to ",
        maxValue:"value must be less than or equal to",
        email: "is not a valid e-mail",
        integer: "Please, enter valid integer value",
        date: "Please, enter valid date value"
    }
};
$.jgrid.del = {
    caption: "Delete",
    msg: "Delete selected record(s)?",
    bSubmit: "Delete",
    bCancel: "Cancel",
    processData: "Processing..."
};
$.jgrid.nav = {
    edittext: " ",
    edittitle: "Edit selected row",
    addtext:" ",
    addtitle: "Add new row",
    deltext: " ",
    deltitle: "Delete selected row",
    searchtext: " ",
    searchtitle: "Find records",
    refreshtext: "",
    refreshtitle: "Reload Grid",
    alertcap: "Warning",
    alerttext: "Please, select row"
};

뷰페이지에서 수정한 부분은 두껍게 표시하였습니다.

$.jgrid.edit 의 msg중 required:"Field is required", email: "is not a valid e-mail" 이 부분이 뷰페이지의 colModel의 editrules: { required: true, email: true } 값과 매치가 되는 거죠.
또, grid의 네비게이션바에서 추가, 편집, 삭제 표시가 이미지로만 되어있었던 것을( $.jgrid.nav 의 add,edit,del 텍스트값이 빈값으로 되어있죠?) 뷰페이지에서 타이틀을 달아본겁니다.

나머지 부분도 재미있게 수정해서 테스트해보세요^^ 버튼 이름 변경, 필수값 에러 메시지, 경고메시지 등이 수정가능하네요. 



데이터를 처리하자


컨트롤러의 액션메쏘드가 추가되었겠죠? 다음은 HomeController의 추가된 Update 액션메쏘드입니다.

public ActionResult Update(TelDir telInfo, FormCollection formCollection)
{
    var operation = formCollection["oper"];
    if (operation.Equals("add"))
    {
       TelDir telData = new TelDir();
       telData.name = telInfo.name;
       telData.phone = telInfo.phone;
       telData.speedDial = telInfo.speedDial;
       telData.email = telInfo.email;
       _db.AddToTelDirSet(telData);
       _db.SaveChanges();
    }
    else if (operation.Equals("edit"))
    {
       var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
       telData.name = telInfo.name;
       telData.phone = telInfo.phone;
       telData.speedDial = telInfo.speedDial;
       telData.email = telInfo.email;
       _db.SaveChanges();
    }
    else if (operation.Equals("del"))
    {
       var telData = _db.TelDirSet.First(m => m.dirId == telInfo.dirId);
       _db.DeleteObject(telData);
       _db.SaveChanges();
    }
    return Content("ok");
}

각 요청(add,edit,del) 대로 분기하여 처리하도록 하였습니다.



이제야 보는구나


실행을 해서 결과화면을 보면


멋드러지게 지난시간과는 다른 모습의 grid 가 있는 것을 확인할 수 있습니다. 추가,편집,삭제 버튼이 들어가 있고 옆에 리프레쉬 버튼도 있네요.

추가 버튼을 누르면


깔끔한 박스가 뜨네요. 전 슈퍼맨을 등록해보도록 하겠습니다. 값을 입력하지 않고 그냥 Submit 버튼을 살짝 눌러보시면 이름 입력하라고, 전화번호 입력하라고 아우성일겁니다. editrules: { required: true } 이것때문이죠. 매치된 메시지는 언어 스크립트에 있는 required:"Field is required" 이고요. 값을 정상적으로 입력후에 Submit을 하면...
바로바로 처리가 가능하네요^^ 모달창이 닫히는 부분은 위에서 설명드렸던 closeAfterAdd: true 때문인거죠. 편집하는 부분도 해볼까요? closeAfterEdit: truefalse로 하여 테스트해보세요. 모달창이 닫히지 않고 수정한 값들이 화면의 울렁거림 없이 처리가 되는 것을 확인하실 수 있습니다.

편집하는 부분을 테스트 하시려면 먼저 수정하려는 해당 로우(row)를 선택하신 후 편집 버튼을 클릭하시거나, 해당 로우를 더블클릭하시면 됩니다. 해보시죠?^^;


마지막으로 정말 삭제하실거에요? 를 본후 노는 시간을 마치도록 하겠습니다.




마무리요


정말 jquery 관련 플러그인들은 참 편리하네요. 이렇게 손쉽게 처리가 가능하니 말이죠.
암튼, 이번시간으로 jqGrid는 마치겠습니다. 뭐 한것도 없이 마친다고 하니 웃기네~ 라고 말씀을 해주셔도 마칠겁니다.^^;

아직은 무덥고, 다양한 날씨속에서 지내는 지금, 건강 꼭 챙기세요. 감사합니다^^

참고자료 : http://elijahmanor.com/webdevdotnet/post/jQuery-jqGrid-Plugin-Add-Edit-Delete-with-ASPNET-MVC.aspx

ASP.NET MVC 3 Preview 1 이 릴리즈 되었습니다.

ASP.NET MVC 2010. 7. 28. 15:00 Posted by 네버덜레스
아직 ASP.NET MVC 2 의 관련 글도 모두 정리하지 못하고 있는 저에게 ( 게을러서 죄송합니다 :-) )
ASP.NET MVC 3 프리뷰 1 이 릴리즈 되었다는 소식이 들어왔네요^^;
아흑 너무 빠르게 변화되는 참 좋은 세상~ ㅡ,.ㅡ;



ASP.NET MVC 3 소식 전파

ASP.NET MVC 3 프리뷰 1이 릴리즈 되었습니다. 여기서 다운 받으시면 됩니다.

일단 다운받아서 보니 MVC 3 관련된 것이 떡하니 템플릿으로 끄집어내져 있습니다.


정말이지.. 뭔가 많은 것들을 해봐야 할듯한 포스가 느껴집니다. 암튼.


뭐가 어떻게 된 것이냐?( 릴리즈에 추가된 사항들.. )



- 레이저 뷰엔진 :

ASP.NET MVC의 새로운 뷰엔진입니다. 코드를 최소하하도록 도와주죠^^ 자세한 것은 저희 팀블로그의 Razor in WebMatrix를 참고해주세요^^


- 다이나믹 뷰와 뷰모델 속성 :

딕셔너리를 다이나믹을 사용(기존 ViewData 객체를 더 간단한 문법으로 접근하게 해주죠^^)하여 컨트롤러와 뷰사이에 데이터를 전달합니다. 예를 들어, 기존의 경우,

ViewData["Title"] = "ASP.NET MVC 3가 웬말이냐?!";
ViewData["Message"] = "ASP.NET MVC 3 Preview 1이 릴리즈가 되었습니다.";

이렇게 ViewData 딕셔너리를 통해 뷰페이지에 전달하였습니다. 하지만 다이나믹 뷰모델 속성을 이용하여 다음과 같이 위의 두 값들을 ViewData 딕셔너리에 추가할 수 있습니다.

ViewData.Title = "ASP.NET MVC 3가 웬말이냐?!";
ViewData.Message = "ASP.NET MVC 3 Preview 1이 릴리즈가 되었습니다.";

뷰페이지에서도 다음과 같이 받습니다.

<h2>View.Title</h2>
<h2>View.Message</h2>


- 뷰 추가 다이얼로그 박스에서 뷰엔진을 선택할 수 있게 해줍니다. :


커스텀 뷰엔진을 포함한 이번에 추가된 Razor(CSHTML) 을 선택할 수도 있고~
ASPX(C#) 을 선택할 수도 있고~


- 글로벌 필터 :

모든 컨트롤들의 액션 메쏘드에 전역적으로 적용할 필터를 등록할 수 있다네요.
Global.asax의 Application_Start 메쏘드에서

GlobalFilters.Filters.Add(new MyActionFilter());

와 같이 등록할 수 있습니다.

이미, 웹 어플리케이션 프로젝트를 생성하시면,

public static void RegisterGlobalFilters(GlobalFilterCollection filters){}

이 메쏘드가 생성되어있습니다.

filters.Add(new MyActionFilter()); 로 추가하시면 되겠네요^^


- JsonValueProviderFactory 클래스 :

모델을 바로 JSON 데이터로 바인드해준다네요. 액션 메쏘드에서 파라미터로 JSON 데이터를 주고 받을 수 있는 거죠^^;
자세한 것은 Sending JSON to an ASP.NET MVC Action Method Argument 을 참고해서 보시면 됩니다.


- .NET Framework 4의 메타데이터 속성 지원 :

.NET 4의 DisplayAttribute와 같은 속성들을 지원해준다네요.

등등등 이 있지만, 해봐야 알겠죠^^

- 서비스 로케이션과 DI(Dependency Injection) 지원
- .NET Framework 4 유효성검사 속성과 IValidatableObject를 지원
- New IClientValidatable Interface
- 새로운 액션 타입이 추가되었죠 : HttpNotFoundResult(404 에러), HttpStatusCodeResult


계속 살펴보겠습니다.^^ 관련 글 팍팍 진행하도록 하겠습니다. 물론 mvc 2 얘기가 끝난 것이 아니라 병행하면서요 ㅡ,.ㅡ;;
 
참고자료 : http://www.hanselman.com/blog/ASPNETMVC3Preview1ReleasedChannel9VideoAndHanselminutesPodcast224OhMy.aspx
http://haacked.com/archive/2010/07/27/aspnetmvc3-preview1-released.aspx

안녕하세요. 지난 시간에는 jqGrid를 이용해서 리스트를 구현해봤습니다. 정말 맛보기였죠? :)
이번 시간은 실제 데이터베이스에서 데이터 조회, 페이징과 정렬부분을 다루도록 하겠습니다.

먼저 데이터베이스 생성

테이블 구조는 다음과 같습니다.

 컬럼명  데이터 타입
 dirId  int
 name  nvarchar(50)
 phone  nvarchar(50)
 email  nvarchar(50)
 speedDial  decimal(2,0)

그냥 기본세팅이죠^^;

엔터티 모델 클래스를 생성할 건데요, 자세히(?)를 원하신다면 이전 포스팅을 참고해주세요^^;
완료가 되면,


여기까지 잘 오셨죠? 저는 Entity Set Name을 TelDir에서 TelDirSet으로 변경하였습니다. 헷갈려서요^^;;

자. 이제는 본격적(?)으로 살펴볼까요? (어째.. 오늘도 맛보기일것 같은 분위기가 물~씬 풍기시죠? ㅡ,.ㅡ;)

페이징 기능을 달자

지난 뷰페이지에 pager란 id로 div 태그를 추가하겠습니다.

<div id="pager" class="scroll" style="text-align:center;"></div>

테이블 뒤에 추가하시면 됩니다.
그리고, 스크립트 부분도 수정해야겠죠?

    <script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("EntityGridData", "Home") %>',
                datatype: 'json',
                mtype: 'POST',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'dirId', index: 'dirId', width: 40, align: 'center' },
                  { name: 'name', index: 'name', width: 100, align: 'left' },
                  { name: 'phone', index: 'phone', width: 150, align: 'left' },
                  { name: 'email', index: 'email', width: 250, align: 'left' },
                  { name: 'speedDial', index: 'speedDial', width: 100, align: 'center'}],
                    pager: $('#pager'),
                emptyrecords: "Nothing to display",            
                rowNum: 3,
                rowList: [3, 10, 20, 50],
                sortname: 'dirId',
                sortorder: "desc",
                viewrecords: true,

                caption: '전화번호부'
            });
        });
    </script>

추가된 부분은 굵은글씨로 표시하였습니다. 일단, grid.locale-en.js를 추가해야되더라고요^^; 디폴트로 그냥 jqGrid 스크립트를 넣을때 추가하라고 하였는데, 제가 지난 포스팅때는 빠뜨렸죠.
이런 언어 스크립트 파일에는 페이징 관련한 디폴트 값들이 들어가 있습니다.

defaults:{
   recordtext:"View {0} - {1} of {2}",
   emptyrecords:"No records to view",
   loadtext:"Loading...",
   pgtext:"Page {0} of {1}"
  }


나머지 프로퍼티에 대한 설명을 드리자면,
pager는 위 이미지 보이시죠? ^^; 저렇게 레코드들을 이동할수 있게 해주는 페이징 바를 정의합니다.
저같은 경우는 $('#pager')로 jQuery 표현을 썼는데요, jqGrid의 wiki를 보니 '#pager', 'pager', jQuery('#pager') 세가지 경우가 모두 가능한데요. 앞에 두가지 방법을 추천한다네요. 흠. jQuery 변수가 내보내기, 가져오기 모듈을 이용할때 문제를 발생시킬수 있다고 합니다. 이 부분은 차츰(?) 찾아보도록 하죠;;

The definition of the pager in the grid can be done this way:pager : '#gridpager', pager : 'gridpager' or pager : jQuery('#gridpager'). All the three methods are valid, but I recommend to use the first or second one, since the jQuery variant causes problems when we try to use Exporting and Importing modules.

emptyrecords는 말 그대로 데이터가 없을 때 표현할 문구를 나타내고요,
rowNum은 페이지에서 보여줄 레코드 갯수,
rowList는 페이지 갯수를 선택할 수 있도록 하는 셀렉트박스의 옵션들,
sortname, sortorder는 각각 정렬할 컬럼과 정렬방식(오름차순, 내림차순),
viewrecords는 토탈 레코드의 수(위 이미지에서 View 1 -3 of 5)를 표현하는 것을 허용할 것인지 여부를 나타냅니다.

이제 뷰페이지는 완성이 되었고요, 컨트롤러 손봐야겠죠?
EntityGridData() 라는 이름의 액션메쏘드를 추가하겠습니다.

[HttpPost]
        public ActionResult EntityGridData(string sidx, string sord, int page, int rows)
        {
            // 데이터베이스 연결
            MvcDbEntities _db = new MvcDbEntities();

            // 페이징 변수 세팅
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;    // 3
            int totalRecords = _db.TelDirSet.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

            // 데이터 조회(페이징&정렬)
            // sidx : dirId
            // sord : desc
            var dirs = _db.TelDirSet
                .OrderBy("it." + sidx + " " + sord)
                .Skip(pageIndex * pageSize)
                .Take(pageSize)
                .ToList();

            var jsonData = new
            {
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = (
                  from dir in dirs
                  select new
                  {
                      i = dir.dirId,
                      cell = new string[] {
                          dir.dirId.ToString(), dir.name.ToString(), dir.phone.ToString(), dir.email.ToString(), dir.speedDial.ToString()                         
                      }
                  }).ToArray()
            };
            return Json(jsonData);
        }

궁금해 보이는 것이 없죠? ㅎㅎ
jqGrid가 EntityGridData를 호출할때 파라미터(sidx : dirId, sord : desc, page : 1, rows : 3)를 날립니다~~~
실행을 해보면,


너무 간단하게 페이징 기능이 완성되었습니다^^
네이게이션 기능 되고요~ 셀렉트박스로 로우 갯수 선택 기능 되고요~ No탭 클릭하시면 정렬 기능 됩니다요~

마무리요

실행화면 출력하고 보니 아직도 맛!보!기! 인것을 보면 아직 한참 멀은 듯 합니다.
더 알찬 정보로 준비하도록 하겠습니다^^
감사합니다. 


참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager&s[]=paging&s[]=properties

M, V 그리고 C의 각방생활(9) - jqGrid 사용해보자

ASP.NET MVC 2010. 7. 14. 09:00 Posted by 네버덜레스
이번 시간은 jQuery 플러그인인 jqGrid를 잠깐(?) 사용해보는 시간을 갖도록 하겠습니다. 

jqGrid 플러그인 다운

먼저, jqGrid 사이트에서 jqGrid 플러그인을 다운받습니다.
다운받은 압축파일을 푸신 후, ASP.NET MVC 프로젝트에 3개의 파일을 추가하겠습니다. jquery.jqGrid.min.js 파일과 jquery-ui-1.7.1.custom.css, ui.jqgrid.css 파일입니다.


자, 이제 시작해볼까요?

jqGrid 맛보기

한꺼번에 다 보여드리기 보다는 조금조금씩~ 맛을 보여드리도록 하겠습니다^^

좀전에 프로젝트에 추가한 파일을 뷰페이지에 쭈~욱 끌어다 놓습니다.

<link href="/Content/jqGrid/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>

그 다음으로, 이 jqGrid 관련 자바스크립트 소스를 추가하겠습니다. 한눈에 봐도 너무 간단한 스크립트 부분이라 jQuery를 모르셔도 딱!! 파악하실수 있을 겁니다.

<script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("GridData", "Home") %>',
                datatype: 'json',
                mtype: 'get',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'DirId', index: 'DirId', width: 40, align: 'center' },
                  { name: 'Name', index: 'Name', width: 100, align: 'left' },
                  { name: 'Phone', index: 'Phone', width: 100, align: 'left' },
                  { name: 'Email', index: 'Email', width: 200, align: 'left' },
                  { name: 'SpeedDial', index: 'SpeedDial', width: 100, align: 'center'}],
                caption: '전화번호부'
            });
        });
    </script> 

위 소스를 잠깐 살펴보면, url은 Home 컨트롤러에서 GridData라는 액션메쏘드를 호출하고 있습니다. 잠시 후에 이를 구현해야겠죠?^^; datatype은 json이네요. 음.. GridData라는 놈이 json객체를 넘겨주겠군?! 하고 생각하시면 되죠. colNames는 리스트를 보여줄때 각각의 컬럼을 구분짓는 이름입니다. colModel을 통해 grid에서 받을 리스트에 width라던지 align을 주고 있는 것을 보실수 있습니다.

그래서 완성된 Index.aspx 뷰페이지를 보게되면,

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    홈 페이지
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <link href="/Content/jqGrid/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
    <link href="/Content/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function () {
            $("#list").jqGrid({
                url: '<%= Url.Action("GridData", "Home") %>',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['No', '이름', '전화번호', '이메일', '단축다이얼'],
                colModel: [
                  { name: 'DirId', index: 'DirId', width: 40, align: 'center' },
                  { name: 'Name', index: 'Name', width: 100, align: 'left' },
                  { name: 'Phone', index: 'Phone', width: 100, align: 'left' },
                  { name: 'Email', index: 'Email', width: 200, align: 'left' },
                  { name: 'SpeedDial', index: 'SpeedDial', width: 100, align: 'center'}],
                caption: '전화번호부'
            });
        });
    </script> 
<h2><%: ViewData["Message"] %></h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
</asp:Content>

table에 리스트를 쫙~ 뿌려주도록 하겠습니다.

이제, Home 컨트롤러를 잠깐 손보도록 하겠습니다. jqGrid에서 받을 json객체를 리턴하는 GridData라는 액션메쏘드를 만들도록 하겠습니다. 이번 포스팅은 정말 맛보기이기 때문에 간단하게 바로 객체를 만들어서 리턴하겠습니다.


와우~ 정말 간단하게 모든 구현이 완료되었습니다! 이제 실행을 해볼까요?


엥? 이건 또 뭔가요? 역시 한번에 되는 것은 없나봐요;;
내용을 보니 GET 요청이 차단되었고, JsonRequestBehavior를 AllowGet으로 설정하라고?! 호출 스택을 보니 JsonResult를 실행하다가 에러가 발생하였네요. 음.. JsonResult 부분이 잘못되었군. 한번 수정해보죠^^;

return Json(dirs, JsonRequestBehavior.AllowGet);

수정후 실행해보면~


네. 멋지게 성공하였습니다.

ASP.NET MVC 2 에서는 기본적으로 이러한 GET방식의 호출을 보안상의 문제로 막아놨습니다. 그래서 JSON 객체를 리턴할때는 JsonRequestBehavior.AllowGet을 추가하여 클라이언트의 GET요청을 허용하도록 한 것이죠.

하지만, 막아놓은 것을 굳이 풀 필요는 없겠죠?^^; POST 방식으로 호출하는 것이 좀더 좋을 듯 합니다.
이 부분은 따로 설명드릴 필요없겠죠? 약간(^^;;) 설명드리면~
일단 GridData액션 메쏘드 위에 GET으로 요청한 놈은 접급하지마! 라는 표지판([HttpPost])을 세워두는거죠. 실행시켜보면 역시 에러가 발생할겁니다. 리소스를 찾을수 없다는... 그래서! 뷰페이지 스크립트 부분의 mtype을 POST로 수정하는거죠^^ 실행해보세요~ 잘되시나요?

이거슨 번외요~

웹 개발자를 위한 Web Development Helper 유틸이 있습니다. 익스플로러에 확장할 수 있죠. 저같은 경우는 Fiddler를 많이(?) 사용하는데요. Web Development Helper는 특히 Ajax와 ASP.NET 개발자를 위한 것이라고 하네요. 사이트에서 다운 받고 인스톨하시고, 익스플로러의 도구 메뉴의 탐색창->Web Development Helper를 클릭하시면 됩니다.
이번 jqGrid 맛보기에서의 request&response정보도 확인할 수 있네요.


마무리요

이번시간은 정말 jqGrid 플러그인의 맛보기였고요, 다음 포스팅에서 뵙도록 하겠습니다. (다음 포스팅도 맛보기처럼 보이면 어떡하죠?^^;;)

참고자료 :
http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx
http://www.trirand.net/
http://projects.nikhilk.net/WebDevHelper/
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx
안녕하세요. 늦바람이 무섭다고 하는데요. jQuery를 향한 늦바람이 불어주길 바라는 1인입니다. ㅎㅎ

이렇게 간단해도 되는겨?

이번 포스팅을 준비하면서 정말 jQuery의 놀라운 힘에 다시 한번 놀랐습니다. 이렇게 간단히 탭메뉴를 넣는게 가능했던건가요?

준비물 준비

먼저, jQueryUI 사이트에서  jquery-ui-1.8.2.custom.zip 파일을 다운받습니다. 압축을 푸시면 jquery-ui-1.8.2.custom.min.js 와 jquery-ui-1.8.2.custom.css 파일이 있습니다.(각각 js폴더와 css폴더에 있습니다.) 이 두 파일을 프로젝트의 Content와 Scripts 폴더에 추가시킵니다. 이제 준비는 됐고요.

준비끝! 예제로!

Index.aspx 페이지 소스입니다.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    홈 페이지
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs();
        });
    </script>
    <div>
        <div id="tabs">
        <ul>
            <li><%: Html.ActionLink("홈", "Index", "Product")%></li>
            <li><%: Html.ActionLink("제품", "List", "Product")%></li>
            <li><%: Html.ActionLink("연락", "Contact", "Product")%></li>
        </ul>
        </div>
    </div>
</asp:Content>

$("#tabs").tabs() 이게 바로 그 놀라운 능력을 가진 탭메뉴를 가능케하는 힘입니다. (자세한 것은 다음으로 미루고~ 언제가 될지는 몰라요. 그냥 잘 쓰면 되는거죠^^;;)
아. 추가시켰던 두 파일은 마스터페이지에 끌어다놨습니다.


이제 Html.ActionLink() 에 걸린 액션들만 만들어 주면 됩니다.


요청 컨트롤러입니다. 첫 Index() 액션 메쏘드를 보시면 dynamic 이라는 타입이 보이는데요. 처음에는 Contact()와 마찬가지로 PartialView()만 리턴을 하였는데, 파샬뷰를 생성해 놓고 보니.


저렇게 dynamic 이 눈에 딱 띄는바람에 어쩔수(?) 없이 dynamic데이터를 전달하게 되었습니다. 간단히 설명드리면 dynamic은 대인배의 마음 씀씀이를 갖고 있어서 어떤 타입이던지 모두 수용합니다.(컴파일타임에는 터치를 안합니다. 귀찮아서 런타임한테 넘기는거죠;;) dynamic으로 선언된 변수에 멤버, 메쏘드, string, int 가리지 말고 막 넣어주세요. 다 받아줍니다. 하.. 저도 대인배로 살아가야 할텐데 참.. 아쉽습니다 :)
다음 기회에 dynamic에 대해 좀더 자세히 알아보면 좋겠네요.

다시 본론으로 넘어와서, /Product/Index.ascx 를 보시면

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<h3><%: Model.Message %></h3>
<p>
    ASP.NET MVC에 대한 자세한 내용을 보려면 <a href="http://asp.net/mvc" title="ASP.NET MVC 웹 사이트">http://asp.net/mvc</a>를 방문하십시오.
</p>

Model객체의 Message의 접근하면(Model.Message) Index 메쏘드에서 넘겨준 다이나믹한 메시지를 받을 수 있습니다.

두번째, /Product/List.ascx는

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcWithjQuery.Models.Product>>" %>
<table width="400px">
<tr>
    <th>제품명</th>
    <th>가격</th>
</tr>
<% foreach (var product in Model) { %>
<tr>
    <td><%: product.Name %></td>
    <td><%: product.Price %></td>         
</tr>
<% } %>
</table>

너무 간단해서 할말을 잃게 만들죠. foreach문을 통해 루프를 돌면서 데이터를 출력합니다.
나머지 Contact.ascx는 안보셔도 됩니다.^^;

자, 완료가 되었으니 확인을 해보죠.


페이지 로드 없이 깔끔하게 탭기능이 완성되었습니다.

마무리요

일반적인 페이지(aspx)도 탭메뉴로 가능합니다. 파샬뷰를 사용한 것은 한 페이지 전체보다 불필요한 부분을 제거한(head, html, body가 보시다시피 파샬뷰에는 존재하지 않습니다.) 간결함때문이랄까요? ㅎㅎ
다음은 더 재미있는 것으로 찾아뵙겠습니다. (지금은 재밌다는겨? 뭐여? ㅡ.ㅡ 이렇게 생각하시는 분은 제발 없으시길 바래요^^)

참고자료 :  http://www.kevgriffin.com/blog/index.php/2010/02/23/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/