Razor in WebMatrix

ASP.NET 4.0 2010.07.15 22:28 Posted by 비회원

지난 7월 2일경 스캇구스리 옹의 블로그에서는 Razor 라는 새로운 view 엔진이 소개되었습니다. Razor 는 기존에 <%%> 으로 통칭되던 코드 블록을 좀더 간소화 시키기 위해 고안되었으며 , 스파케티 코드의 늪에서 허덕이는 개발자를 위해서 새로 고안되었습니다. 특히 이 코드블록은 기존에 미칠듯이 복잡하고 어려웠던 asp.net 인라인 코드를 좀더 html스럽게 보여줄수 있게되었다는 것에서 차별화 됩니다


스캇옹의 블로그 에서 Razor를 감상해BoA요



 


[기존 <%%> 코드블록으로 구성된 코드]

 


[Razor 스타일로 재구성된 코드]

 

현재 우리가 이 Razor를 테스트 해볼수 있는 환경은 크게 두가지로 나뉠수 있습니다.


첫번째는 WebMatrix 를 설치하고 , 그 안에서 CSHtml 파일을 직접 작성해보는것이고 ,

두번째는 ASP.NET 프로젝트에서 Microsoft.WebPages.dll 을 참조하는 것 입니다.

 

애석하게도 아직 Visual studio 에서는 Razor 관련 인텔리센스를 지원하고 있지 않으나 , 스캇 블로그에서 이미 인텔리센스 데모를 선보이고 있기 때문에 빠른 시일내에 , 관련 자료가 배포될것으로 보입니다. 이와 관련된 내용은 발표되는대로바로 알려드리도록 하겠습니다.

 



Razor in WebMatrix



현재 가장 빠르게 Razor 를 접해보는 방법은 WebMatrix 를 설치하는 것 입니다. 설치에 대한 부분은 준서아빠님이 소개해주셨으니 간략하게 넘어가도록 하겠습니다. 설치에 대해서는 WebMatrix 설치부터 HelloWorld까지 를 참조해 주시기 바랍니다.


WebMatrix 를 설치하게 되면 처음에 Website1 이라는 페이지가 생성되어 있는 것을 알수 있습니다. Razor 를 간단하게 살펴볼수 있는 데모프로젝트라고 이해하시면 될거 같습니다. ^^



WebSite1을 더블클릭하거나 선택하고 Ok 버튼을 클릭합니다.




프로젝트를 로드하고 나면 한눈에 웹 페이지의 상태를 볼수 있는 화면이 나옵니다. Url 과 소스코드가 있는 폴더가 나오고 있네요. 일단은 Run 버튼을 눌러 사이트를 구동시켜보도록 하겠습니다





깔끔한 웹 페이지가 나오네요
. 이 페이지는 Razor 과 간단한 html 로 구성되어 있습니다. 그럼 한번 코드를 보도록 하겠습니다.




 

Files를 클릭하면 현재 구동중인 웹 사이트 프로젝트를 수정할수 있습니다. 이곳에서 우리는 default.cshtml 을 살펴보도록 하겠습니다.

 

<div class="twitter">

<div class="twitterfeed">

@Twitter.Search("@vsts2010", caption: "#helloworld", width: 740, height: 150)

       </div>

</div>

 

해당 파일에서는 Twitter 위젯을 Razor 코드로 처리하고 있는 것을 확인할수 있습니다. Twitter 객체는 WebMatrix엔진에서 제공되는것으로 보입니다만 , 특별히 선언된 부분이나 참조되는 dll 찾는 것은 조금 힘들어보였습니다. 또한 특정 벤더의 API 사용 하는 부분은 효용성이 떨어지므로 , 데모 이외의 용도로 사용시 문제가 될수 있을것으로 보입니다.

해당 객체는 WebMatrix 에서 제공되는것이 맞네요. 많은 흥미로운 WebMatrix Helper 들을 확인해보세요 이부분에 대해서도 따로 한번 다루도록 하겠습니다 ^^



페이지에서는 Twitter 검색어를 조회해서 보여주는 위젯을 선보여주고 있습니다만, 저는 이것보다는 트윗을 노출시키고자 합니다. 이를 위해 기존 코드를 간단하게 주석처리하고 트윗을 노출시켜보도록 하겠습니다.

 


<div class="twitterfeed">              

@//Twitter.Search("@vsts2010", caption: "#helloworld", width: 740, height: 150)

@Twitter.Profile("@vsts2010")

</div>


이제 어플리케이션을 다시 구동시키면!




의도했던 트윗이 노출되는 것을 확인할수 있습니다. ^^

 

Summary


이번 글에서는 WebMatrix 에 포함된 기본 프로젝트에서 Razor 를 사용하는 부분과 함께 , 외부 함수를 끌어오고 기존의 프로그래밍 경험을 접목시켜보는 것을 보여드렸습니다. 다음 글에서는 외부 함수를 직접 구현하고 그 함수를 사용하는 방법에 대해 알아보도록 하겠습니다.

신고
TAG ,