안녕하세요. 코난 김대우 입니다. 이번에 소개해 드릴 내용은 Razor 개발, 즉 ASP.NET Web Pages Razor개발을 WebMatrix가 아닌 Visual Studio에서 진행하는 방법을 소개해 드리려고 합니다.

오잉? WebMatrix가 아니라, Visual Studio에서도 개발이 가능 하다고요?

넵! – 코난이가 꾸준히 말씀 드린 것처럼, WebMatrix는 그 자체만으로도 충분히 웹사이트 개발을 위한 기술들을 제공하고 있습니다. 아울러, 개발자와 함께 자연스럽게 상위 기술로 이어질 수 있는 단계를 제공하지요.

 

- IIS의 경우는 윈도우 서버의 IIS 웹서버로
- SQLCE는 SQL서버로 완전한 마이그레이션을
- WebMatrix의 ASP.NET Web Pages의 Razor Syntax는 Visual Studio의 ASP.NET MVC와 Razor로

아래 내용들을 참고하시면 더 많은 도움이 되실 거에요.

참고자료
ASP.NET Web Pages에서 MVC로의 자연스러운 연결 - Helper를 MVC에서 사용해 보자
Razor와 WebMatrix에 대해 후닥닥 적어본 FAQ와 Razor 벗겨먹기~
WebMatrix는 단순 개발 도구가 아니라 스택(Stack)이다?

자~ 그렇다면, WebMatrix에서도 다 되는데~ 왜 Visual Studio를 이용하나요?
- 통합 개발 환경
- 인텔리 센스 기능
- Visual Studio를 이용한 디버깅

좀더 상세히 알아 보도록 하겠습니다.


통합 개발 환경(IDE)
아마, 코난이의 포스트를 보시는 분들은 비주얼 스튜디오가 어떤건지 잘 알고 계실거에요. 단순한 웹사이트 개발과 달리 엔터프라이즈 환경의 웹 개발은 다양한 기술요소나 다양한 서비스와의 연계, 비즈니스 레이어 구축, SQL서버는 물론 다양한 이기종 DBMS와의 연계를 필요로 합니다. 통합 개발 환경의 필요성에 대해서는 이미 잘 알고 계시리라 생각합니다.

인텔리 센스(IntelliSense)
WebMatrix는 코드 하일라이팅(Code Highlighting)을 제공하지만, 아쉽게도 인텔리센스 기능은 제공하지 않죠. Visual Studio를 이용하실 경우 인텔리 센스 기능을 이용 가능한 장점이 있습니다.

image 

요렇게 쩜과 함께 우리를 도와주는 인텔리 센스가 cshtml에서 동작합니다.

디버깅 기능 사용
WebMatrix에서 Visual Studio를 이용하시게 되는, 가장 중요한 이슈가 아닐까 예상합니다. 네… 기존 ASP.NET 디버깅 경험을 그대로 이용 가능합니다. 말이 필요 없네요.

image

중단점(Break Point)를 찍고 단계별로 추적이 가능합니다. 아래 샘플을 만들어 두었으니 도움 되시길 바랍니다.

그럼~ 저와 함께 설치하고 직접 이용해 보시죠~


Visual Studio를 이용한 ASP.NET Web Pages Razor 프로그래밍 - 설치

image

http://go.microsoft.com/fwlink/?LinkID=205867 경로에서  웹 플랫폼 설치 관리자(WPI-Web Platform Installer)를 설치합니다. 우측 “Add” 누르고 아래의 “Install”하시면 잠시 후 완료됩니다.(MVC와 함께 정확히, 설치되는 Visual Studio Tool 이름은 “Microsoft ASP.NET Web Pages – Visual Studio 2010 Tools” 입니다.

 

image

Visual Studio에서 File – New – Web Site 를 실행합니다.(제가 영문판 이용 중이라… 쿨럭)


 

image

기본 프로젝트와 cshtml이 나오죠. 그냥 F5 눌러서 실행하시면 cshtml – ASP.NET Web Pages Razor가 잘 실행되는게 보이실 겁니다.

 

 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        @ServerInfo.GetHtml()
    </body>
</html>

 


 

조금 더 코드를 파 볼까요? 내용을 지우고, 이렇게 ServerInfo를 찍어 보시죠. 참고로, 여기에서 인텔리센스 기능을 맛보셔도 좋을 듯 합니다.

 

image

인텔리 센스 기능 확인 가능

 

이제 기다려 보셨던 바로 그 기능! 디버깅을 진행해 보시죠.

 

 

 

@{
    var showToday = true;
    if(showToday)
    {
        @DateTime.UtcNow;
    }
    else
    {
        @DateTime.Now;
    }     
}

<h2>HTML 조합 반복문</h2>
@{
    <ul>
    @foreach (string item in Request.ServerVariables)
    {
        <li>@item</li>   
    }
    </ul>
}

 


이런 코드를 실행하겠습니다. 대충~ 맨위 if 구문에 중단점(Break Point)를 찍으시고 F5를 눌러 실행해 보시면?


 

image

 걸렸죠? F11눌러서 Step Into 하시면 감동의 Razor 디버깅!!!

 

어떠세요? WebMatrix를 이용한 Razor 개발 경험을 그대로 Visual Studio로 가져간다!!! – 조금 감이 오시나요?

조금 더 앞으로 나가시면, ASP.NET MVC에서 이 Razor 구문을 그대로 이용해 개발도 가능해 진다는거!!!

 

한번 더 말씀 드리지만…

WebMatrix를 통해 개발하는 ASP.NET Web Pages는 몇번 소개해 드린 것처럼, 자연스러운 상위 기술과의 연계와 웹 개발에 대한 커리어 확장을 기본적인 Seamless 컨셉으로 녹이고 있습니다. 

- IIS의 경우는 윈도우 서버의 IIS 웹서버로

- SQLCE는 SQL서버로 완전한 마이그레이션을

- WebMatrix의 ASP.NET Web Pages의 Razor Syntax는 Visual Studio의 ASP.NET MVC와 Razor로

 

저와 함께 WebMatrix & Razor 개발이 어디까지 가게 될지 한번 같이 지켜 보시는건 어떨까요? ^_^
좋은 하루 되세요~


 

참고자료
ASP.NET Web Pages에서 MVC로의 자연스러운 연결 - Helper를 MVC에서 사용해 보자
Razor와 WebMatrix에 대해 후닥닥 적어본 FAQ와 Razor 벗겨먹기~
WebMatrix는 단순 개발 도구가 아니라 스택(Stack)이다?




profile

부족하지만, SQLER의 누군가와 함께한 나눔을 통해 제가 더 많이 즐거웠습니다.
SQLER와 함께 즐거워 할수록, 그 나눔을 통해 더 많은 기회와 가치를 발견하게 되었습니다.
나눔의 생각이 앞으로도 계속, SQLER를 움직일 것입니다.

코난, 김대우 / SQLER 운영자 / 골라먹는 SQLER RSS 정보 구독 / 실시간 SQLER 소식 uxkorea 트위터