(3) Razor 강좌 - 기본 구문 및 주석 처리
예제로 따라하는 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파일을 생성하고 코드를 수행합니다.
WebMatrix에서 기본 설치되어 있는 Website1를 선택 하시고, 왼쪽 아래 섹션에서 Files를 선택합니다. 위의 화면처럼 New 버튼을 클릭 하시고 CSHTML – 바로 Razor 파일이지요! – 를 선택하고 파일 이름을 적어 주세요.
자. 기본 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
(1) WebMatrix와 Razor! 이제 시작합니다.
(2) WebMatrix 설치부터 Hello World까지
[동영상 강좌] (1) WebMatrix 첫 실행 & Hello World까지 달려요~