Korea Evangelist

Developer & Platform Evangelism, Microsoft Korea

July, 2010

  • Korea Evangelist

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

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    이전 동영상 강좌에서 소개 드린 것처럼, 이어지는 세번째 강좌는 (3) Razor 강좌 - 기본 구문 및 주석 처리 입니다.

    이번 동영상 강좌 역시 포스트와 연계 되는데요.

     

    (3) Razor 강좌 - 기본 구문 및 주석 처리
    위의 포스트를 꼭 참고 하시면서 영상을 함께 보시면 많은 도움 되실 겁니다.

     

    Get Microsoft Silverlight

     

     

    이번 동영상 강좌를 통해 Razor가 제공하는
    - 인라인 표현식
    - 주석처리
    - 함수(메서드) 호출
    - ServerInfo 표시
    - 코드블록 처리
    - 반복문 처리
    - Server Variable 정보

    내용을 살펴 보았습니다. 다음 동영상 강좌 역시 Razor의 개발 기능에 대해서 알아 보도록 하겠습니다.

    감사합니다.

     

    지난 동영상 참고 자료 :

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

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

     

    참고자료 :

    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까지
    (3) 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 강좌 - 캐시 처리

  • Korea Evangelist

    (3) Razor 강좌 - 기본 구문 및 주석 처리

    • 0 Comments

    예제로 따라하는 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파일을 생성하고 코드를 수행합니다.

    clip_image001

    WebMatrix에서 기본 설치되어 있는 Website1를 선택 하시고, 왼쪽 아래 섹션에서 Files를 선택합니다. 위의 화면처럼 New 버튼을 클릭 하시고 CSHTML – 바로 Razor 파일이지요! – 를 선택하고 파일 이름을 적어 주세요.

     

    clip_image002

    자. 기본 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까지 달려요~

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

  • Korea Evangelist

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

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    이어지는 두 번째 동영상 강좌 입니다.

     

    Razor & WebMatrix 개발 5분 강좌 시리즈 - (2) WebMatrix 5분 리뷰~

    - WebMatrix가 제공하는 Razor 개발 관련 기능들을 살펴봅니다.

     

    개발 도구만 제공되는게 아니라, 웹 개발에 필요한 웹 서버, 데이터베이스, 개발언어까지 WebMatrix 안에서 모두 제공합니다. 저와 함께 직접 WebMatrix를 살펴 보시지요.

     

    Get Microsoft Silverlight

     

    WebMatrix는 웹 개발자의 다양한 요구를 수렴해 개발되었습니다.
    WebMatrix는 “개발 도구”이지만, 가장 최신의 웹 개발 도구이기에 기존 웹 개발자들의 요구를 수렴해 쉽고 빠른 웹사이트 제작에 특화되도록 개발 되었습니다. 특히, WebMatrix는 아래의 플랫폼 기술들을 포함하고 있습니다.

     

    1) 웹 서버

    IIS Developer Express 입니다. 개발자가 웹사이트를 실행해 개발과 테스트를 진행하도록 돕는 가벼운 웹 서버를 자체 내장하고 있습니다. Visual Studio 2010과 Visual Web Developer 2010 Express 버전과 연계해 동작 가능합니다.

     

    2) 데이터베이스

    SQL Server Compact Edition 4가 WebMatrix에 포함되어 있습니다. 무료 데이터베이스 엔진으로 .NET 기반의 API를 제공해 WebMatrix를 통한 손쉬운 웹 개발이 가능하며, SQL Server로 쉬운 데이터 마이그레이션이 가능합니다.(WebMatrix에서 자체 마이그레이션 도구를 제공합니다.)

     

    3) 개발 프레임워크 - "Razor"

    WebMatrix는 “Razor”라는 ASP.NET 기반의 엔진을 지원합니다. 기존 웹 개발의 복잡성을 획기적으로 개선하고, ASP.NET MVC의 성능과 안정성을 그대로 유지하면서 빠른 웹 개발에 최적화된 구문과 모듈화된 개발이 가능하도록 돕는 Helper를 지원합니다.

     

    다음 포스트와 동영상 강좌부터는 바로 이 Razor라는 녀석을 집중적으로~ 풀어 보도록 하겠습니다.

     

    지난 동영상 강좌 참조 :

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

    참고 자료 :

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

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

    감사합니다.

  • Korea Evangelist

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

    • 0 Comments

    안녕하세요. 김대우 입니다.

     

    이번에 소개해 드릴 내용은, 처음으로 시도되는 동영상 강좌인데요.

    시리즈 기획!!! 아마존의 눈물, 차마고도 이후 최고의 고화질 영상!!! 을 제공해 드리기위해 노력하고 있습니다. 쿨럭...

     

    그 첫번째 기획!!!

     

    Razor & WebMatrix 개발 5분 강좌 시리즈 - (1) 첫 실행 & Hello World까지 달려요~

    - WebMatrix를 처음 실행하고 Hello World까지 실행해봅니다.

     

    자~ 그럼 저와 함께 달려 보시지요~

    아 잊지 마시고 꼭 아래 포스트 먼저 참고 부탁 드립니다.

     

    참고 자료 :

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

    (2)WebMatrix 설치부터 Hello World까지 - (요녀석은 꼬옥~ 미리 참고 부탁 드립니다.)



    Get Microsoft Silverlight

     

    감사합니다.

  • Korea Evangelist

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

    • 1 Comments

    안녕하세요. 김대우 입니다.

     

    어제의 강좌에 이어서, 이번에는 “(2) WebMatrix 설치부터 Hello World까지”라는 내용으로 진행해 보도록 하겠습니다.

    사실 “설치”라고 말씀 드리기 어색할 정도로 그 과정이 쉬워서 쬐끔~ 민망하기도 하네요(그만큼, 설치 자체는 쉽다는 이야기에요~)

    그럼 시작해 보겠습니다.

    진행할 강좌는 아래와 같은 시리즈로 풀어볼 생각이에요~

     

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

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

    (3) WebMatrix 다양한 기능 활용

     

    WebMatrix설치하기 전에 알아두시면 좋습니다.

    최근 마이크로소프트가 웹에서 작지만 여러 개발자와 관리자에게 도움이 되는 일들을 많이 진행하고 있었는데요. 그 중 하나가 바로 Web Platform 입니다. 제가 예전에 작성해둔 강좌도 옆에 있는데요.

    마이크로소프트 웹 플랫폼 - (1) 다시 쓰는 웹 플랫폼

    마이크로소프트 웹 플랫폼 - (2) 마이크로소프트 웹 플랫폼은 무엇인가?

     

    마이크로소프트 웹 플랫폼에서 제공하는 다양한 개발환경, 데이터베이스, 프레임워크, 심지어는 오픈 소스 소프트웨어들을 하나의 어플리케이션으로 모두 설치/업데이트 하실 수 있습니다. 그게 바로 플랫폼 설치 관리자 – Web Platform Installer(이하 WPI)” 입니다.

    이 “웹 플랫폼 설치 관리자”(이하 WPI)를 이용하시면 여러 장점들이 있는데요.

    - 복잡한 웹서버 설치, 유지 보수 환경 구성을 클릭 딱 “한번”에 끝낼 수 있도록 쉬운 설치를 제공합니다.

    - 개발환경과 배포환경, 웹서버 에서 일관적으로 어플리케이션에 필요한 구성요소들과 프레임워크, 데이터베이스, 관리 도구 둥을 유지 가능합니다.

    - 웹사이트 및 웹 어플리케이션 제작에 필요한 웹서버 기능, 프레임워크, 데이터베이스, 개발환경을 이 WPI안에서 모두 제어가 가능합니다.

    - 국내외 최고 수준의 오픈 소스 소프트웨어(OSS)를 클릭 한번으로 바로 설치 – 사용이 가능하며, 국내에서 가장 많이 사용되는 XpressEngine(구, 제로보드), Textyle, KimsQ와 같은 토종 오픈 소스 소프트웨어도 이 WPI에서 한번 클릭으로 설치가 가능합니다. (아~ ���금 보고 계신 이 www.sqler.com 웹사이트도 이 WPI의 XpressEngine클릭 한번으로 제작된 커뮤니티입니다.)

     

    오늘 우리의 목표인 WebMatrix설치 도 마찬가지 입니다. 이 WPI를 통해서만 설치 가능합니다. – WPI에 대한 이야기는 나중에 천천히 더 풀어 보도록 하겠습니다.

    WPI 관련 참고 링크 : http://www.microsoft.com/web/downloads/platform.aspx

     

    설치 패키지 크기

    IIS Developer Express 웹서버, WebMatrix 개발도구, SQL CE 데이터베이스, Razor 개발 엔진이 포함된 WebMatrix의 설치 패키지 크기는 단 15M입니다. 현재 Beta1이지만, 공식 버전도 이 크기를 유지할 예정이라고 하며, 설치 과정은 1분 이내 다운로드 및 설치가 가능하도록 목표로 하고 있습니다. 만약, .NET Framework4가 설치되어 있지 않다면 설치가 필요하며 포함한 전체 패키지는 50M 입니다.

     

    설치 가능한 시스템 환경

    현재 WebMatrix는 2010년 7월 8일 현재 Beta1 환경입니다. 지원하는 시스템 환경은 아래와 같으니 참고 하시길 바랍니다.(공식 버전에서는 지원하는 개발 환경이 추가될 수도 있다고 하네요.)

    Windows XP Pro SP3이상, Windows Vista SP1이상, Windows 7, Windows Server 2003 SP2이상, Windows Server 2008, Windows 2008 R2 에서 설치가 가능합니다. 사실상 XP부터 모든 환경을 지원한다고 보시면 좋을 것 같아요.

    아, 저 코난이는 당연히 새술은 새 부대에! 제가 진행하게될 WebMatrix와 Razor 강좌는 모두 Windows7 환경으로 진행하게 될 겁니다.

     

    설치 진행!!! – 살짝 민망하지만, 클릭질 한번에 끝납니다. 저와 설치를 진행해 보시죠~

    우선WebMatrix 공식 사이트에 접속합니다.(WebMatrix 공식 버전 발표 전후로 한글 지원 예정이 있다고 합니다.)

    clip_image002

    공식 사이트 링크 : http://www.microsoft.com/web/webmatrix/

    clip_image004

     

    이어서 우측 맨 위에 초록색 Download 클릭하시면 앞에서 소개해 드린 “웹 플랫폼 설치 관리자 – Web Platform Installer - WPI” 설치 화면이 보입니다. 오른쪽의 초록색 다운로드를 클릭해 주세요.

    바로 다운로드 : http://www.microsoft.com/web/webmatrix/download/

     

    clip_image006

    자~ 설치가 끝나시면 앞에서 소개해 드린 “웹 플랫폼 설치 관리자-WPI”가 실행됩니다.

    참고로, 이 WPI는 3.0 Beta버전이에요. 여기 에서 “Microsoft WebMatrix Beta”를 선택하고 install을 클릭!

    (현재 WPI는 2.0 정식 버전이 한글로 모두 서비스 되고 있습니다. WPI 3.0 역시 정식 버전 발표시 한글을 지원할 예정이라고 합니다.)

     

    clip_image008

    영문 환경이실 경우 요렇게 나올 수 도 있으니 참고 하시길 바랍니다. 마찬가지로, "Install WebMatrix"를 클릭하시면 됩니다.

     

    clip_image010

     

    WebMatrix를 선택하시면 WebMatrix 실행에 필요한 종속된 프로그램들이 주르륵 자동으로 올라옵니다.(WPI 쌩유!!!)

    찬찬히 어떤 녀석들이 설치되는지 살펴 보세요. (WPI의 장점!!! 기존에는 개발자와 관리자가 개별적으로 구성 했을 겁니다. 개별 구성했다가는 설치만 3박 4일 걸릴지도. 쿨럭… 보시는 것처럼,WPI가 이런 복잡한 설치/개발환경 구성을 깔끔하게 자동화/단순화/유지보수 해 줍니다.) 이제 설치가 자동으로 진행 되실 거에요~

     

    clip_image012

    이렇게 설치가 끝나면 Launch를 누르셔서 바로 WebMatrix를 실행하시거나, Finish를 눌러 종료 하시고, Windows7의 시작을 눌러 WebMatrix를 실행 하셔도 됩니다.

     

    clip_image014

    바로 클릭해서 실행하시면 이렇게~ WebMatrix 시작 화면을 보실 수 있습니다!!!

    WebMatrix 설치 과정 요약!

    (1) “웹 플랫폼 설치 관리자”를 실행하고 - http://www.microsoft.com/web/webmatrix/download/

    (2) WebMatrix를 클릭한다.

    (3) 끝~ 참 쉽죠잉~

    참고로, Simple, Small, Seamless가 WebMatrix의 설계 철학이라고 하네요. 설치 과정에서 보신 것처럼, Small과 Simple은 확실히 철학 맞는 것 같습니다.(Razor를 이제 저랑 공부하시면 더욱 더 확실히 Simple의 철학을 느끼실 것 같아요!!!)

    이제 Hello World찍어 볼까요~

    자 이제 WebMatrix 처음 시작 화면에서 My Sites를 선택하고, 기본으로 되어있는 WebSite1을 선택합니다.

     

    clip_image016

    드디어 잘 모르겠지만, WebMatrix가 시작된 것 같습니다.

    넵~ 바로 첫 번째 WebMatrix를 이용한 Razor 개발!!! 시작합니다.

     

    clip_image018

    왼쪽 하단의 “Files”를 클릭하고, 파일을 사이트에 추가 합니다. - ”Add a file to your site” 클릭합니다.

     

    clip_image020

    “Razor”를 실행하기 위해~ CSHTML을 선택하고, 이름을 HelloWorld.cshtml로 지정한 다음 OK를 클릭!

     

    clip_image021

    기본 HTML 코드가 완성되었을 겁니다. 중간 <Body> 영역에 아래 한 줄을 추가합니다.

    Hello, 월드 : @DateTime.Now

    한 줄을 추가하고, F12번 키를 누르거나 위의 “Run” 버튼을 누르시면 끝! (@ 선언자를 이용하지요.)

     

    clip_image023

    출력 완료~ (한글처리, 결과의 한글 날짜 출력 문제 없음을 확인해 보세요.)

    자. 이렇게 WebMatrix 설치부터 Hello World까지 하나의 포스트로 진행해 보았습니다. 대충 WebMatrix 설치에 대해서 감이 잡히시나요?

     

    오늘 진행한 내용을 요약해 보면

    - 플랫폼 설치 관리자-WPI”웹사이트 제작에 필요한 다양한 프레임워크, 개발환경, 데이터베이스 등을 관리하는 최고의 설치 관리자 입니다. 이 녀석 하나만 있으면 개발, 테스트, 실제 프러덕션 환경 모두에 꼭 맞는 웹서버 운영 환경 구축이 가능해요. 나름 깔끔한 녀석인 것 같네요. ^_^

    - WebMatrix이 WPI클릭질 한번이면 설치가 완료됩니다. 설치 크기는 15M 내외(.NET Framework 제외). 설치 시간 1분.

    - 그리고, HelloWorld까지 진행해 보았습니다.

     

    자~ 그럼 다음 시간에는”(3) WebMatrix 다양한 기능 활용”이라는 내용으로 WebMatrix에 대한 기본적인 내용을 마치고, 다음 챕터 부터는 “Razor”를 이용한 개발 과정을 상세히 짚어 보도록 할께요~ 감사합니다.

     

    참고링크 :

    Introducing WebMatrix

    Introducing “Razor” – a new view engine for ASP.NET

    New Embedded Database Support with ASP.NET

    Introducing IIS Express

Page 2 of 3 (11 items) 123