ASP.NET MVC에서 메뉴나 사이드바를 'Manifest.xml' 파일에서 정의한 plugin 모듈을 통해 웹페이로 나타낼 수 있도록 도와주는 프레임워크다.  아래 '그림1'은 "https://osgi.codeplex.com"에서 보여주고 있는 예시 화면중 하나다. 

[그림1] Manifest.xml 파일로 컨트롤 예시 화면

 위와 같이 XML을 통해 화면 및 레이아웃을 컨트롤 할 수 있다.

Zen Coding Visual Studio Plugin

Zen Coding으로 아래와 같이 입력을 하면

div#page>div.logo+ul#navigation>li*5>a

아래와 같은 HTML이 자동으로 나오게 하는 코딩 기법이다.

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

또 다른 예제

div#header>img.logo[alt=image]+ul#nav>li*2>a:link

HTML 결과 물

<div id="header">
    <img src="" alt="image" class="logo"/>
    <ul id="nav">
        <li>
            <a href="http://"></a>
        </li>
	<li>
            <a href="http://"></a>
        </li>
    </ul>
</div>

위와 같은 결과를 Visual studio에서도 사용할 수 있도록 도와주는 툴이 나왔다. 

Web Essential 2012 Home page 에서 다운바다서 설치하거나 Visual Studio에서 Tool > Extensions and Updates 에서 Online 에서 Web Essentials를 추가할 수 있다. 그런다음 웹 페이지( ASP.NET MVC에서는 cshtml또는 aspx 페이지)에서 잰코딩을 하고 탭을 누르면 위 예제와 같이 젠코딩이 자동으로 HTML을 생성해 준다.

div#page>div.logo+ul#navigation>li*5>a   (tap 키를 누른다)

[코드1] Zen Coding

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

[코드2] Zen Coding이 HTML로 변환된 코드

Web Matrix 3에서도 Zen Coding을 지원하니 보다 쉽고 빠르게 HTML을 만들어 낼 수 있을 것이다.

Web Essentials 다운로드 페이지

http://vswebessentials.com/download

-----------------------------------------------------------------------------------------------------------------

Just Decompile

 이번에는 Telerik에서 만든 Just Decompiler에 대해서 소개 하고자 한다. Just Decompiler는 다른 유틸리티 보다 향상된 기능을 제공하고 있는데 가장 눈에 띄는 기능이 'Create Project' 기능이다. 이 기능을 통해 프로젝트로 바로 만들어서 Visual Studio로 바로 확인할 수 있다. 이제 설치 및 사용에 대해서 간략하게 설명하도록 하겠다. 

http://www.telerik.com/download-trial-file.aspx?pid=845

위 주소로 들어가면 '그림1'에 해당하는 화면이 나오고 다운로드 받으면 된다.

[그림1] Just Decompiler 다운로드 페이지

[그림2] Installer 설치 초기 화면

[그림3] JustCompiler 설치 화면

 Just Compile만 선택 되도록 옵션을 조정한다.

[그림4] 설치 진행 화면

[그림5] 설치 후 실행 화면

 설치 후 첫 실행 화면이 '그림5'번과 같이 나온다. 

[그림6] .Net Framework 4.5 로딩 화면

 '그림6'과 같이 "Open > Load Framework > Load .Net 4.5 Assemblies > x64"와 같이 .Net Framework를 불러 올 수도 있다.

 이제 DLL이나 EXE파일에서 직접 프로젝트로 만들어 보자. 우선 .Net 으로 만든 DLL이나 EXE 파일을 선정해 두고 Just Complier 메뉴에서 "Open > File ( Ctrl + O )" 선택하여 파일을 불러 온다.

[그림7] 개발된 DLL 또는 Exe 로드된 화면

 '그림7'은 특정 파일을 로딩한 화면이며 트리를 클릭해서 들어가보면 소스 코드를 확인 할 수 있다.

[그림8] 루트 노드에서 'Create Project'를 누르는 화면

 '그림8'과 같이 트리의 루트 노드에서 "Create Project" 메뉴를 클릭하면 '그림9'와 같은 화면이 나온다.

[그림9] 프로젝트 생성 진행 화면

[그림10] 생성된 프로젝트를 Visual Studio에서 확인하는 화면

 완벽하게 프로젝트로 변환되어 Visual Studio에서 확인할 수 있다. 이 유틸리티로 인해 오류나 디버그를 좀더 쉽게 개선하고 개발할 수 있는 길이 생겼다.

[그림11] Telerik에서 제시하는 Features들이다.

Knockout-Kendo.js

 Knockout.js 2.2 + Kendo UI v2012.3.1114 + jQuery 1.8.2 를 같이 사용하여 개발할 수 있는 javascript가 있다. Knockout-Kendo.js를 통해 콜라보레이션이 가능해 진다. 간단한 예제로 확인해 보자.

아래는 Kendo UI를 사용하는 HTML 테그다.

아래는 Knockout.js에서 요구하는 ViewModel을 이용해서 Html tag에 데이터 바인딩을 하는 자바스크립트다.

[그림2] 결과 화면

 '그림2'처럼 Knockout이용해 데이터 바인딩을 한 KendoUI의 결과 화면이다. 이 밖에도 여러가지 예제가 있으니 Knockout과 KendoUI에 관심이 있으신 분들은 도입을 검토해 보기 바란다. 

[표1] Kendo UI Web Widgets

Virtual scrolling - Infinite Scrolling

 Virtual scrolling이란 사용자의 페이지 이동의 행위 없이 스크롤 만으로 사용자가 인식하지 못하는 상태에서 페이징처리가 되도록 지원하는 기능이라고 할 수 있겠다. 아래 '그림1' 보면 쉽게 이해가 갈 것이다.

[그림1] jQery EasyUI Virtual Scrolling

( http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= )

( http://www.datatables.net/release-datatables/extras/Scroller/server-side_processing.html )

( http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling 에서도 확인 가능 - jqgrid )

 이번에는 Infinite scroll에 대해서 알아 보자. Infinite scroll은 일반 페이징 처럼 처음 1페이지에 해당하는 데이타와 그에 해당하는 스크롤 사이즈만 보여준다. 그렇지만 스크롤을 내리면 데이터가 추가되어 스크롤과 그리드가 동적으로 추가가 된다. 아래 '그림2'와 '그림3'을 비교해 보면 알 수 있을 것이다. 

[그림2] Infinite Scroll 초기 화면 - Scroll 사이즈 비교

[그림2] Infinite Scroll이 진행된 화면 - Scroll 사이즈 비교

( http://www.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html )

 Virtual scroll vs Infinite scroll은 비슷한 기능이지만 다른 사용자 경험을 제공해 주고 있는 것이다. 개발자 입장에서는 Virtual Scroll을 구현하기가 더 어려울 것이다. Infinite는 스크롤된 값을 가지고 추가된 데이터만 관리하면 되지만 Virtual은 스크롤된 값으로 현재 화면에 가져와야할 데이터의 범위에 대해서 계산해야 하는 작업이 필요 하게 된다. 그렇지만 사용자의 입장에서는 Virtual이 전체 데이터의 사이즈를 인지하고 있기 때문에 더 낳은 경험을 제공해준다. 어떤 경험을 제공해 주는지는 개발 프로젝트의 성격과 선택에 달려 있을 것이다. 그리고 계산 문제에 대해서 우리가 고민할 필요 없이 이미 개발되어 있는 라이브러리 들이 있으니 적극 활용하여 사용해 보도록 하자.

- jqGrid

- DataTable

- jQuery EasyUI

 이 밖에도 Telerik이나 별도의 컴포넌트 회사에서 개발된 툴에서도 지원하고 있으니 원하는 입맛에 맞게 도입하면 될 것이다.

VIM on Windows

 리눅스에서 유명한 VI 계열 에디터를 Windows에서 설치하여 사용할 수 있다. Vim 에디터는 마우스가 없어도 충분히 사용할 수 있는 방법을 제공하며 있다. 명령 모드 + Ex모드 + 입력모드를 합쳐서 Vim을 사용할 수 있다. 이미 Vim에 대해서 알고 있는 사용자라면 이런 모드 전환으로 인한 이점을 충분히 알고 있으며 일부 매니아에서는 맹신에까지 이르고 있다. 그 만큼 Linux에서는 대표적인 에디터라 할 수 있다. 이제 기존 Linux에서 Vim을 사용하던 개발자들이 사용하던 툴을 Windows에 설치 하여 사용해 보자.

Syncfusion에서 배포한 Succinctly series ebook

Syncfusion에서 배포한 Succinctly series ebook입니다.

• ASP.NET MVC 4 Succinctly
• HTTP Succinctly
• jQuery Succinctly
• javascript Succinctly
• knockout Succinctly
• LightSwitch Succinctly
• F#
• Data Structure

등등이 있습니다. 위 참조 사이트에는 더 많은 무료 eBook가 있습니다.

혹시 필요 하신 분은 참조 사이트에 가셔서 다운 받아 보시기를 바라며 필요한 정보가 되었으면 합니다.

WebMatrix 3 Release

이전에도 소개를 했었지만 이번에 새로운 기능을 추가해 릴리즈가 되었습니다.

기능 요약 정리

- Windows Azure ( Cloud) 통함

- Remoting editing - 내 파일에서 편집 하는 것 같이 원격으로 편집을 지원

- Source control with Git - Git 소스 제어 지원

- Source control with TFS - TFS(Team foundation Sserver) 소스 제어 지원

테스트 모드를 64비트에서 테스트

( 64bit COM+ 테스트시 주의 )

 유닛 테스트를 진행하는데 있어서 COM+ 관련 테스트도 진행을 할 것이다. 그렇지만 유닛 테스트에서 COM+ 인식 부분에서 아래와 같이 '표1'에 해당하는 에러가 발생하고 있다면 구성문제를 짚어봐야 할 것이다.

[표1] COMException 메세지

 '구성 요소 서비스'에서 정상적으로 COM+를 등록을 시켰는데도 위와 같은 에러가 발생한다면 유닛 테스트를 해 주는 프로세스도 64비트에서 실행해야 한다. 유닛 테스트 모드를 64비트로 수정하면 에러 없이 64비트 COM+을 테스트 할 수 있었다.

 COM+ 64 bit + Test Dll ( Any CPU / x64 ) + Unit Test Dll ( Any CPU + x64 ) + Unit Test Machine ( 64 bit mode ) 와 같이 구성이 되어야 정상적으로 테스트가 가능하다. 이제 테스트 모드를 64 bit로 바꾸는 방법을 '그림1'을 통해 알아 보자.

[그림1] Test mode 바꾸기

 '그림1'과 같이 Test > Test Settings > Default Processor Architecture > x64를 선택하고 유닛테스트를 진행하면 될 것이다.