안녕하세요. 코난 김대우 입니다.
지난 2011년 1월 14일에 WebMatrix 정식버전(RTW)이 발표되었으며, 이 문서의 내용은 최신의 WebMatrix 정식버전에 맞춰 수정 되었습니다. 감사합니다.
- 최종 수정일 : 2011년 1월 19일

================================================================================



예제로 따라하는 Razor! 이제 시작합니다~

 

코난이와 함께하는 Razor & WebMatrix 시리즈 강좌~

(1) WebMatrix와 Razor! 이제 시작합니다.

(2) WebMatrix 설치부터 Hello World까지

(3) Razor 강좌 - 기본 구문 및 주석 처리 (지금 보고 계신 강좌)

(4) Razor 강좌 - 코드 블록과 POST 처리

(5) Razor 강좌 - 재사용 가능한 코드 생성

(6) Razor 강좌 - 레이아웃 페이지 구조 처리

(7) Razor 강좌 - 파일처리

(8) Razor 강좌 - 데이터베이스 처리

(9) Razor 강좌 - Helper 소개(이미지, 비디오)

(10) Razor 강좌 - 디버깅

(11) Razor 강좌 - 캐시 처리

안녕하세요. 코난 김대우 입니다. 지난 시간에는 WebMatrix로 Hello World를 찍어 보셨고, WebMatrix여러 편리한 기능들에 대해서도 소개를 해 드리는 시간을 가졌습니다. 이번 시간에는 따라 하다 보면 끝나는 Razor 이야기를 진행해 보려고 합니다.(꼬옥 따라해 보세욥~)

 

단순히, 박스 안에 들어가 있는 코드를 복사해 WebMatrix에서 실행하시면 Razor 를 공부할 준비는 끝날 것 같습니다.

그럼 시작해 보도록 할게요.

 

WebMatrix에서 Razor 실행을 위해 CSHTML파일을 생성하고 코드를 수행합니다.


www_sqler_com_0032.png

WebMatrix에서 기본 설치되어 있는 Website1를 선택 하시고, 왼쪽 아래 섹션에서 "파일"을 선택합니다. 위의 화면처럼 새로만들기 버튼을 클릭 하시고 CSHTML – 바로 Razor 파일이지요! – 를 선택하고 파일 이름을 적어 주세요. - 저는 그냥 기본 Page.cshtml 파일로 만들었습니다.

 

www_sqler_com_0033.jpg

자. 기본 HTML 구문이 들어가 있을 텐데요. 과감히 모두 삭제 하시고 바로 이어서 Razor 코딩을 시작합니다!

 

심플한 Razor기본적인 구문(Syntax)알아 봅니다.

 

1) “@” 문자를 이용해 코드를 시작합니다. – 인라인 표현식이에요.

 

<h2>인라인 표현식</h2>

@* 인라인 표현식(Inline Expression) 사용 - 한줄 코멘트  *@

<p> 오늘은 @DateTime.Now 입니다.</p>

 


- “@” 문자로 Razor 코드 블록을 선언할 수 있습니다.
- 코드 블록 안에서 한 줄 주석 처리는 @*로 열고 *@닫는 구문으로 가능합니다.

(알고 있으시죠? 위 박스 안의 코드를 복사해 WebMatrix에 넣고 F12번 키를 눌러 바로 실행 해 보실 수 있습니다.)

 

2) 함수 호출과 코드 블록

 

<h2>함수 호출</h2>
오늘은 @DateTime.DaysInMonth(2010, 5) 일 입니다.

<h2>Razor가 실행되는 웹서버의 정보 표시</h2>
@ServerInfo.GetHtml()

<h2>C# 스타일의 전체 괄호 처리 - ";"으로 종료</h2>
@*    
    이렇게 여러줄 주석 가능
    여러 라인이 주석 처리됨
*@   

@{
// 코드 블록 안에서 이렇게 한줄 주석도 가능합니다.
/*
    코드 블록 안에서 여러줄의 주석은
    이렇게 처리합니다.
*/
    var showToday = true;
    if(showToday)
    {
        @DateTime.UtcNow;
    }
    else
    {
        @DateTime.Now;
    }      
}

 

- 함수 처리 방식입니다. (기존에 아무 언어나 개별 경험이 있는 분들은 익숙하실 거에요.)
- 여러 줄의 코드 블록을 이용하실 경우에는 이렇게 괄호 - {} - 을 이용합니다. 코드 블록 안에서 구문 완료 후에는 “;”으로 코드의 끝을 지정합니다. (C# 하신 분들은 익숙하실 거에요.)
- ServerInfo.GetHtml() 함수로 Razor가 실행되는웹 서버의 설정 정보 등을 보실 수 있습니다.(디버깅에도 유용합니다.)

 

3) 반복문 사용

 

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

 

- 코드 블록 안에서 HTML 구문을 조합 가능합니다.
-어떤 Server Variable들이 있는지 결과를 참조하세요.

 

전체 코드 입니다.

 

<h2>인라인 표현식</h2>

@* 인라인 표현식(Inline Expression) 사용 - 한줄 코멘트  *@

<p> 오늘은 @DateTime.Now 입니다.</p>

<h2>함수 호출</h2>
오늘은 @DateTime.DaysInMonth(2010, 5) 일 입니다.

<h2>Razor가 실행되는 웹서버의 정보 표시</h2>
@ServerInfo.GetHtml()

<h2>C# 스타일의 전체 괄호 처리 - ";"으로 종료</h2>
@*    
    이렇게 여러줄 주석 가능
    여러 라인이 주석 처리됨
*@   

@{
// 코드 블록 안에서 이렇게 한줄 주석도 가능합니다.
/*
    코드 블록 안에서 여러줄의 주석은
    이렇게 처리합니다.
*/
    var showToday = true;
    if(showToday)
    {
        @DateTime.UtcNow;
    }
    else
    {
        @DateTime.Now;
    }      
}

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

 

      

너무 간단한가요? 이렇게 간단히 Razor의 기본 구문을 알아 보았습니다. - 간단한거 몇줄 안한거 같은데 해본거 참 많죠?

 
- 인라인 표현식
- 주석처리
- 함수(메서드) 호출
- ServerInfo 표시
- 코드블록 처리
- 반복문 처리
- Server Variable 정보
등을 살펴 보셨습니다.

 

아마, 기존에 웹개발 경험이 있으시다면, 이번에 처음 손맛을 보신 Razor 구문이 새롭게 디자인된 웹 개발 구문인 만큼, 직관적이고 깔끔한 코드를 제공한다고 느껴지실 거에요.

 

뿐만 아니라 WebMatrix를 통해 직접 코딩을 하시면서 깔끔한 코딩 화면이나 코드 블록 자동 하일라이팅 처리 등을 보시면 심플한 개발을 손으로 조금은 느껴 보실 듯 합니다.

 

Razor가 제공하는 좀더 상세한 개발 관련 구문 등을 보기 원하시면 아래 링크를 참고 하시길 바랍니다.

2 - Introduction to ASP.NET Web Programming Using the Razor Syntax


이렇게 해서 (3) Razor 강좌 - 기본 구문 주석 처리 강좌를 마무리 했습니다. 다음 시간에는 (4) Razor 강좌 - 코드 블록과 POST 처리 내용을 살펴 보도록 하겠습니다. 감사합니다.

 

참고자료 :

1 - Getting Started with WebMatrix Beta and ASP.NET Web Pages

2 - Introduction to ASP.NET Web Programming Using the Razor Syntax



Razor & WebMatrix 시리즈 강좌

(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
(3) Razor 강좌 - 기본 구문 및 주석 처리
(4) Razor 강좌 - 코드 블록과 POST 처리
(5) Razor 강좌 - 재사용 가능한 코드 생성
(6) Razor 강좌 - 레이아웃 페이지 구조 처리
(7) Razor 강좌 - 파일처리, 파일 업로드
(8) Razor 강좌 - 데이터베이스 처리
(9) Razor 강좌 - Helper 소개(이미지, 비디오)
(10) Razor 강좌 – 디버깅
(11) Razor 강좌 - 캐시 처리
(12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)
(13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

(14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현



지난 동영상 참고 자료 :

[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~

[동영상 강좌] (2) WebMatrix 5분 리뷰~

[동영상 강좌] (3) Razor 강좌 - 기본 구문 및 주석 처리

[동영상 강좌] (4) Razor 강좌 - 코드 블록과 POST 처리

[동영상 강좌] (5) Razor 강좌 - 재사용 가능한 코드 생성
[동영상 강좌] (6) Razor 강좌 - 레이아웃 페이지 구조 처리

[동영상 강좌] (7) Razor 강좌 - 파일처리, 파일 업로드

[동영상 강좌] (8) Razor 강좌 - 데이터베이스 처리
[동영상 강좌] (9) Razor 강좌 - Helper 소개(이미지, 비디오)

[동영상 강좌] (10) Razor 강좌 – 디버깅

[동영상 강좌] (11) Razor 강좌 - 캐시 처리

[동영상 강좌] (12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)

[동영상 강좌] (13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

[동영상 강좌] (14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현



 





profile

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

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