지난 7월 2일경 스캇구스리 옹의 블로그에서는 Razor 라는 새로운 view 엔진이 소개되었습니다. Razor 는 기존에 <%%> 으로 통칭되던 코드 블록을 좀더 간소화 시키기 위해 고안되었으며 , 스파케티 코드의 늪에서 허덕이는 개발자를 위해서 새로 고안되었습니다. 특히 이 코드블록은 기존에 미칠듯이 복잡하고 어려웠던 asp.net 인라인 코드를 좀더 html스럽게 보여줄수 있게되었다는 것에서 차별화 됩니다.
[기존 <%%> 코드블록으로 구성된 코드]
[Razor 스타일로 재구성된 코드]
현재 우리가 이 Razor를 테스트 해볼수 있는 환경은 크게 두가지로 나뉠수 있습니다.
두번째는 ASP.NET 프로젝트에서 Microsoft.WebPages.dll 을 참조하는 것 입니다.
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를 사용
하는
부분은 효용성이 떨어지므로 , 데모 이외의 용도로 사용시 문제가 될수 있을것으로 보입니다.
이 페이지에서는 Twitter 의 검색어를 조회해서 보여주는 위젯을 선보여주고 있습니다만, 저는 이것보다는 제 트윗을 노출시키고자 합니다. 이를 위해 기존 코드를 간단하게 주석처리하고 제 트윗을 노출시켜보도록 하겠습니다.
<div class="twitterfeed">
@//Twitter.Search("@vsts2010", caption: "#helloworld", width: 740, height: 150)
@Twitter.Profile("@vsts2010")
</div>
이제 어플리케이션을 다시 구동시키면!
의도했던 트윗이 노출되는 것을 확인할수 있습니다. ^^
Summary
이번 글에서는 WebMatrix 에 포함된 기본 프로젝트에서 Razor 를 사용하는 부분과 함께 , 외부 함수를 끌어오고 기존의 프로그래밍 경험을 접목시켜보는 것을 보여드렸습니다. 다음 글에서는 외부 함수를 직접 구현하고 그 함수를 사용하는 방법에 대해 알아보도록 하겠습니다.
