빠르고쉽게휘딱휘딱만드는웹! Razor 와 WebMatrix 강좌 ebook (WebMatrix Beta 기준이며정식버전발표시업데이트예정입니다. 이 ebook 의전체 내용은 에서무료로, 제한없이보실수있습니다.)

Transcription

1 빠르고쉽게휘딱휘딱만드는웹! Razor 와 WebMatrix 강좌 ebook (WebMatrix Beta 기준이며정식버전발표시업데이트예정입니다. 이 ebook 의전체 내용은 에서무료로, 제한없이보실수있습니다.) SQLER 의 Konan 김대우 ( 김태형엮음 (

2 코난이와함께하는 Razor & WebMatrix Contents (1) WebMatrix 와 Razor! 이제시작합니다... 3 (2) WebMatrix 설치부터 Hello World 까지... 7 (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 최적화구현

3 카테고리가새로생겨약간당황스러우시죠? 10 년넘게운영 & 놀이터였던저는더욱더당황스럽습니다. ^_^;;; 어쩌면웹과 DB 는튀김과떡볶이같을지도모르겠습니다. 둘을따로따로즐겨도되지만, 둘이합쳐시너지 (?) 를내면엄청난결과 ( 뭐지?) 가이루어지니까요. 이런시너지나저의생각은나중에조금씩더풀어보도록하고, 오늘은 WebMatrix 가뭐길래? 이런큰결정 새로운카테고리와섹션제작 을하게되었는지알아보도록하겠습니다. (1) WebMatrix 와 Razor! 이제시작합니다. WebMatrix 가뭡니까? WebMatrix 는웹개발자가웹사이트를쉽고빠르게제작, 커스터마이징이가능하도록돕는새로운개발도구 & 플랫폼 입니다. 특히, 기존의복잡한웹개발방식을심플하고, 직관적으로개발할수있도록돕는, 개발도구입니다. 참고 : WebMatrix 공식웹사이트 ( 개발도구만제공되나요? 웹개발에필요한웹서버, 데이터베이스, 개발언어는요? WebMatrix 는 개발도구 이지만, 가장최신의웹개발도구이기에기존웹개발자들의요구를수렴해쉽고빠른웹사이트 제작에특화되도록개발되었습니다. 특히, WebMatrix 는아래의플랫폼기술들을포함하고있습니다. 1) 웹서버 IIS Developer Express 입니다. 개발자가웹사이트를실행해개발과테스트를진행하도록돕는가벼운웹서버를자체 내장하고있습니다. Visual Studio 2010 과 Visual Web Developer 2010 Express 버전과연계해동작가능합니다. 2) 데이터베이스

4 SQL Server Compact Edition 4 가 WebMatrix 에포함되어있습니다. 무료데이터베이스엔진으로.NET 기반의 API 를 제공해 WebMatrix 를통한손쉬운웹개발이가능하며, SQL Server 로쉬운데이터마이그레이션이 가능합니다.(WebMatrix 에서자체마이그레이션도구를제공합니다.) 3) 개발프레임워크 - "Razor" WebMatrix 는 Razor 라는 ASP.NET 기반의엔진을지원합니다. 기존웹개발의복잡성을획기적으로개선하고, ASP.NET MVC 의성능과안정성을그대로유지하면서빠른웹개발에최적화된구문과모듈화된개발이가능하도록돕는 Helper 를 지원합니다.(Help 는곧...) 코난이의개인적인느낌으로, 특히더쾌적한데이터베이스개발관련기능들을제공하는게좋더라구요 ~ DB 와 Razor 의 궁합도대단히좋습니다. ASP.NET 개발자를위한 Razor 추가정보 "Razor" 는정확히 ASP.NET MVC 의새로운 View 엔진입니다. ( 와 ~~ MVC 만쉐이 ~) ASP.NET 에서사용하던언어인 C# 이나 VB.NET 을그대로이용가능하며 ( 와 ~ 만만쉐이 ~), 현재국대기업, 오픈마켓, 웹사이트등에도많이적용된 ASP.NET 의안정성과확장성을그대로사용가능하지요. 하나, 코난이와주변분들의피드백으로, Razor 는기존의웹폼이나 MVC 개발방식과는달리, Razor 는 MVC 가도데체어디있다는거지? 할정도로쉽고직관적인개발이가능합니다.) MVC 에대해서는나중에한번더풀어보도록할께요. ^_^ 아, WebMatrix 에서개발과커리어가끝나는게아닙니다. WebMatrix 의웹서버와데이터베이스, 개발프레임워크는모두 자연스럽게 IIS 웹서버, SQL 서버데이터베이스, ASP.NET 개발프레임워크, Visual Studio 개발도구로통합가능합니다.

5 새로운웹사이트를개발할경우에도, 템플릿기반으로어플리케이션을개발하거나, 웹플랫폼설치관리자-Web Platform Installer 를이용해국내외오픈소스어플리케이션을설치한후우리에게맞게커스터마이징하는형태로이용도가능합니다. - 맨땅에헤딩하면서웹사이트개발할필요없어욧 ( 템플릿을기반으로한개발도우리에게너무너무잘맞아요 ~ 쿨 ~)!!! 또한, 개발과정과테스트과정을진행한후스테이징이나프러덕션을진행하실경우에도출판 (Publishing) 과정을모두 자체적으로지원하기때문에쉽고빠른웹사이트제작이가능해요.

6 특히, 앞에서도언급드린것처럼데이터베이스테이블, 관계, 제약, 인덱스등의구조를 WebMatrix 자체에서개발하고, SQL 서버로쉽게마이그레이션가능하기때문에마이그레이션이나배포관련고민이줄어듭니다. - SSMS(SQL Server Management Studio) 를열필요가없습니다. IIS Developer Express 도자체내장이라, 개발과정에서웹서버관련작업을진행하고시작과중지를 WebMatrix 자체에서 진행이가능해요. 저기위에 Start, Stop, Restart 아이콘보이시죠? 개발하면서브라우저에서테스트를해보고싶으실경우에도버튼하나로, 또는 F12 번키만띡눌러주면바로결과를 웹에서확인가능합니다. 보이시죠? 크로스브라우저기반테스트는기본이에요. 브라우저열고 URL 넣어서테스트하고, 이런과정이필요가없습니다. 요약해드리자면!!! 쉽고빠른웹사이트개발에최적화된개발도구 & 플랫폼! 바로 WebMatrix 입니다. 다음강좌에서는실제로이용하는 과정을보여드리도록할게요. 참고링크 : Introducing WebMatrix ( Introducing Razor a new view engine for ASP.NET( New Embedded Database Support with ASP.NET ( Introducing IIS Express(

7 (2) WebMatrix 설치부터 Hello World 까지 어제의강좌에이어서, 이번에는 (2) WebMatrix 설치부터 Hello World 까지 라는내용으로진행해보도록하겠습니다. 사실 설치 라고말씀드리기어색할정도로그과정이쉬워서쬐끔 ~ 민망하기도하네요 ( 그만큼, 설치자체는쉽다는 이야기에요 ~) 그럼시작해보겠습니다. WebMatrix 를설치하기전에꼭알아두시면좋습니다. 최근마이크로소프트가웹에서작지만여러개발자와관리자에게도움이되는일들을많이진행하고있었는데요. 그중 하나가바로 Web Platform 입니다. 제가예전에작성해둔강좌도옆에있는데요. 마이크로소프트웹플랫폼 - (1) 다시쓰는웹플랫폼 ( 마이크로소프트웹플랫폼 - (2) 마이크로소프트웹플랫폼은무엇인가? ( 마이크로소프트웹플랫폼에서제공하는다양한개발환경, 데이터베이스, 프레임워크, 심지어는오픈소스소프트웨어들을 하나의어플리케이션으로모두설치 / 업데이트하실수있습니다. 그게바로 웹플랫폼설치관리자 Web Platform Installer( 이하 WPI) 입니다. 이 웹플랫폼설치관리자 ( 이하 WPI) 를이용하시면여러장점들이있는데요. - 복잡한웹서버설치, 유지보수환경구성을클릭딱 한번 에끝낼수있도록쉬운설치를제공합니다. - 개발환경과배포환경, 웹서버에서일관적으로어플리케이션에필요한구성요소들과프레임워크, 데이터베이스, 관리 도구둥을유지가능합니다. - 웹사이트및웹어플리케이션제작에필요한웹서버기능, 프레임워크, 데이터베이스, 개발환경을이 WPI 안에서모두 제어가가능합니다. - 국내외최고수준의오픈소스소프트웨어 (OSS) 를클릭한번으로바로설치 사용이가능하며, 국내에서가장많이사용되는 XpressEngine( 구, 제로보드 ), Textyle, KimsQ 와같은토종오픈소스소프트웨어도이 WPI 에서한번클릭으로설치가가능합니다. ( 아 ~ 지금보고계신이 웹사이트도이 WPI 의 XpressEngine 클릭한번으로제작된커뮤니티입니다.) 오늘우리의목표인 WebMatrix 설치도마찬가지입니다. 이 WPI 를통해서만설치가능합니다. WPI 에대한이야기는 나중에천천히더풀어보도록하겠습니다. - 현재 Beta 버전이지만, 이런설치에대한큰그림은바뀌지않을겁니다. ^_^ WPI 관련참고링크 :

8 설치패키지크기 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 공식버전발표전후로한글지원예정이있다고합니다.) 공식사이트링크 :

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

10 참고로, 이 WPI 는 3.0 Beta 버전이에요. 여기에서 Microsoft WebMatrix Beta 를선택하고 install 을클릭! ( 현재 WPI 는 2.0 정식버전이한글로모두서비스되고있습니다. WPI 3.0 역시정식버전발표시한글을지원할 예정이라고합니다.) 영문환경이실경우요렇게나올수도있으니참고하시길바랍니다. 마찬가지로, "Install WebMatrix" 를클릭하시면됩니다. WebMatrix 를선택하시면 WebMatrix 실행에필요한종속된프로그램들이주르륵자동으로올라옵니다.(WPI 쌩유!!!)

11 찬찬히어떤녀석들이설치되는지살펴보세요. (WPI 의장점!!! 기존에는개발자와관리자가개별적으로구성했을겁니다. 개별구성했다가는설치만 3 박 4 일걸릴지도. 쿨럭 보시는것처럼,WPI 가이런복잡한설치 / 개발환경구성을깔끔하게 자동화 / 단순화 / 유지보수해줍니다.) 이제설치가자동으로진행되실거에요 ~ 이렇게설치가끝나면 Launch 를누르셔서바로 WebMatrix 를실행하시거나, Finish 를눌러종료하시고, Windows7 의 시작을눌러 WebMatrix 를실행하셔도됩니다. 참고 : 처음실행하실때 WebMatrix 가실행되지않고, 아래화면처럼비정상종료하실경우가있습니다. "Microsoft WebMatrix 의작동이중지되었습니다." - 후덜덜 ~ 이문제는 Beta 버전에서만발생하는 " 한글입력기 " 와관련된문제임을확인했으며, 아래와같은방법으로조치가능합니다.

12 WebMatrix 가실행되지않고비정상종료되실경우에만, 위에서보시는것처럼제어판 국가및언어 키보드변경 버튼 클릭 기본입력언어 를 한국어 ( 대한민국 ) Microsoft 입력기 로변경 확인하시면됩니다. 이이슈는오직현재 " 베타 " 버전의 WebMatrix 에서만발생하며, 이후버전에서는이프로세스비정상종료문제는해결될예정입니다. 바로클릭해서실행하시면이렇게 ~ WebMatrix 시작화면을보실수있습니다!!! WebMatrix 설치과정요약! (1) 웹플랫폼설치관리자 를실행하고 - (2) WebMatrix 를클릭한다. (3) 끝 ~ 참쉽죠잉 ~

13 참고로, Simple, Small, Seamless 가 WebMatrix 의설계철학이라고하네요. 설치과정에서보신것처럼, Small 과 Simple 은확실히철학맞는것같습니다.(Razor 를이제저랑공부하시면더욱더확실히 Simple 의철학을느끼실것 같아요!!!) 자이제 Hello World 를찍어볼까요 ~ 자이제 WebMatrix 처음시작화면에서 My Sites 를선택하고, 기본으로되어있는 WebSite1 을선택합니다. 드디어잘모르겠지만, WebMatrix 가시작된것같습니다. 넵 ~ 바로첫번째 WebMatrix 를이용한 Razor 개발!!! 시작합니다.

14 왼쪽하단의 Files 를클릭하고, 파일을사이트에추가합니다. - Add a file to your site 클릭합니다. Razor 를실행하기위해 ~ CSHTML 을선택하고, 이름을 HelloWorld.cshtml 로지정한다음 OK 를클릭! 기본 HTML 코드가완성되었을겁니다. 중간 <Body> 영역에아래한줄을추가합니다. Hello, 월드 한줄을추가하고, F12 번키를누르거나위의 Run 버튼을누르시면끝! (@ 선언자를이용하지요.)

15 출력완료 ~ ( 한글처리, 결과의한글날짜출력문제없음을확인해보세요.) 자. 이렇게 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

16 (3) Razor 강좌 - 기본구문및주석처리 안녕하세요. 코난김대우입니다. 지난시간에는 WebMatrix 로 Hello World 를찍어보셨고, WebMatrix 여러편리한 기능들에대해서도소개를해드리는시간을가졌습니다. 이번시간에는따라하다보면끝나는 Razor 이야기를진행해 보려고합니다.( 꼬옥따라해보세욥 ~) 단순히, 박스안에들어가있는코드를복사해 WebMatrix 에서실행하시면 Razor 를공부할준비는끝날것같습니다. 그럼시작해보도록할게요. WebMatrix 에서 Razor 실행을위해 CSHTML 파일을생성하고코드를수행합니다. WebMatrix 에서기본설치되어있는 Website1 를선택하시고, 왼쪽아래섹션에서 Files 를선택합니다. 위의화면처럼 New 버튼을클릭하시고 CSHTML 바로 Razor 파일이지요! 를선택하고파일이름을적어주세요.

17 자. 기본 HTML 구문이들어가있을텐데요. 과감히모두삭제하시고바로이어서 Razor 코딩을시작합니다! 심플한 Razor 의기본적인구문 (Syntax) 를알아봅니다. 문자를이용해코드를시작합니다. 인라인표현식이에요. <h2> 인라인표현식 (Inline Expression) 사용 <p> 입니다.</p> 문자로 Razor 코드블록을선언할수있습니다. - 코드블록안에서한줄주석처리는 // 구문으로가능합니다. ( 알고있으시죠? 위박스안의코드를복사해 WebMatrix 에넣고 F12 번키를눌러바로실행해보실수있습니다.) 2) 함수호출과코드블록 <h2> 함수호출 </h2> 5) 일입니다. <h2>razor 가실행되는웹서버의정보표시 <h2>c# 스타일의전체괄호처리 - ";" 으로종료 /* */ 코드블록안에서여러줄의주석은이렇게처리합니다. var showtoday = true; if(showtoday)

18 else - 함수처리방식입니다. ( 기존에아무언어나개별경험이있는분들은익숙하실거에요.) - 여러줄의코드블록을이용하실경우에는이렇게괄호 - { - 을이용합니다. 코드블록안에서구문완료후에는 ; 으로코드의끝을지정합니다. (C# 하신분들은익숙하실거에요.) - ServerInfo.GetHtml() 함수로 Razor 가실행되는웹서버의설정정보등을보실수있습니다.( 디버깅에도유용합니다.) 3) 반복문사용 <h2>html 조합반복문 (string item in Request.ServerVariables) { <li>@item</li> </ul> - 코드블록안에서 HTML 구문을조합가능합니다. - 어떤 Server Variable 들이있는지결과를참조하세요. 전체코드입니다. <h2> 인라인표현식 (Inline Expression) 사용 <p> 입니다.</p> <h2> 함수호출 </h2>

19 5) 일입니다. <h2>razor 가실행되는웹서버의정보표시 <h2>c# 스타일의전체괄호처리 - ";" 으로종료 /* 코드블록안에서여러줄의주석은이렇게처리합니다. */ var showtoday = true; if(showtoday) else <h2>html 조합반복문 (string item in Request.ServerVariables) { <li>@item</li> </ul>

20 너무간단한가요? 이렇게간단히 Razor 의기본구문을알아보았습니다. - 간단한거몇줄안한거같은데해본거참많죠? - 인라인표현식 - 주석처리 - 함수 ( 메서드 ) 호출 - ServerInfo 표시 - 코드블록처리 - 반복문처리 - Server Variable 정보등을살펴보셨습니다. 아마, 기존에웹개발경험이있으시다면, 이번에처음손맛을보신 Razor 구문이새롭게디자인된웹개발구문인만큼, 직관적이고깔끔한코드를제공한다고느껴지실거에요. 뿐만아니라 WebMatrix 를통해직접코딩을하시면서깔끔한코딩화면이나코드블록자동하일라이팅처리등을보시면 심플한개발을손으로조금은느껴보실듯합니다. Razor 가제공하는좀더상세한개발관련구문등을보기원하시면아래링크를참고하시길바랍니다. 2 - Introduction to ASP.NET Web Programming Using the Razor Syntax( 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

21 (4) Razor 강좌 - 코드블록과 POST 처리 지난시간에는 (3) Razor 강좌 - 기본구문및주석처리 강좌를진행했습니다. 이번시간에는바로이어서네번째강좌, (4) Razor 강좌 - 코드블록과 POST 처리 강좌를진행하도록하겠습니다. 코드블록정리 지난시간에간단히, 코드블록에대해서설명해드렸습니다. 넵, 간단히 Razor 구문을사용해프로그램로직을만드는영역정도로봐주시면될것같아요. 혹시웹프로그래밍을개발하신경험이있으시다면, 다시한번코드블록을봐보주세요. 기존의웹개발언어, ASP.NET 이나 PHP 와는조금다르지않으신지요? 예를들어, Razor 구문코드블록안에자유롭게 HTML 을끼워넣을수있는부분이에요. <h2>html 조합반복문 (string item in Request.ServerVariables) { <li>@item</li> </ul> 두번째줄의 <ul> HTML 태그앞이나뒤에 Razor 구문끝과시작을알리는식별문자 (@) 가포함되지않고도, 코드블록으로 처리됩니다. ASP 나 PHP 개발자라면, 이런인라인코딩방식이조금은 땡큐하게 다가오실지모르겠습니다. ^_^ Razor 는웹개발자의요구로개발된가장최신의웹개발구문입니다. 작고심플한웹개발을그목표로개발되었다고 하네요 ( 안그런게녀석이있겠습니까마는... ^_^;;;) Razor 는웹개발을단순하고빠르게수행하기위한수많은개발자들의요구를수렴해개발되어서이런부분도신경쓴게조금보이는거같아요. 아직감이잘안잡히신다고요? 조금있으면 Razor 로데이터베이스를처리하는챕터가진행되는데요. ASP 나 PHP 개발을해오신분이라면, 눈물나게땡큐한 (?) Razor 의이심플코드블록을느끼실수있을겁니다. 그복잡한데이터베이스결과를디자이너가건네준퍼즐같은복잡한 UI 에맞춰서 HTML 사이사이에곡예하듯끼워맞추던 ( 그냥들어내고그리드컨트롤박아넣었던... -_-;;; ) 그복잡함을많이덜어버리실수있을거에요. 현재 Razor beta 버전인데요. Razor 의강력한기능을살린다양한중고급개발자를위한고급개발패턴도함께준비되고 있는것같아요. 또한, 마이크로소프트의클라우드컴퓨팅기술인 Azure 에 Razor 로개발한웹어플리케이션이올라가면 어떻게될까요? 더빠르고쉽게웹애플리케이션개발이가능해질겁니다.

22 넵 ~ 기회있을때마다이런소식들도모아모아서 ~ 강좌게시판을통해소개해드리도록하겠습니다. 그럼바로이어서, POST 처리 -HTML Form 값처리에대한내용을진행해보도록하겠습니다. POST 처리 - HTML Form 값처리 먼저간단한값을텍스트박스로입력받아값을더하는 HTML 페이지예제를생각해보도록하시지요. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> <head> <title>razor 로 HTML Form 값을처리 </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body { background-color: beige; font-family: Verdana, Ariel; margin: 50px; form { padding: 10px; border-style: solid; width: 250px; </style> </head> <body> <p> 두개의숫자를넣고 " 더하기 " 버튼을클릭하세요 ~</p> <p></p> <form action="" method="post"> <p> <label for="text1"> 숫자 (1):</label> <input type="text" name="text1" /> </p> <p> <label for="text2"> 숫자 (2):</label> <input type="text" name="text2" /> </p> <p> <input type="submit" value=" 더하기 " /> </p> </form>

23 </html> <h2> 두숫자의합은 : 입니다.</h2> </body> 이런 HTML 페이지를생각해보시면될것같습니다. WebMatrix 에서 Razor 를실행하기위해 CSHTML 파일을하나 생성하고, 위의 HTML 코드를마찬가지로붙여넣으신후실행해보세요. 대충 ~ 이런화면이나오실겁니다. 여기 Form 의입력값을 Post 로받아처리한다는거감이오시죠? 그럼실제로코드를 var total = 0; //HTML 의 Form 에서 POST 될경우에만실행 if(ispost) { // 사용자의입력값을받아서저장 var num1 = Request["text1"]; var num2 = Request["text2"]; // 넘겨받은값을 Integer 형으로변환후더하기수행 total = num1.asint() + num2.asint();

24 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> <head> <title>razor 로 HTML Form 값을처리 </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body { background-color: beige; font-family: Verdana, Ariel; margin: 50px; form { padding: 10px; border-style: solid; width: 250px; </style> </head> <body> <p> 두개의숫자를넣고 " 더하기 " 버튼을클릭하세요 ~</p> <p></p> <form action="" method="post"> <p> <label for="text1"> 숫자 (1):</label> <input type="text" name="text1" /> </p> <p> <label for="text2"> 숫자 (2):</label> <input type="text" name="text2" /> </p> <p> <input type="submit" value=" 더하기 " /> </p> </form> 더한값이아래표시됩니다. <h2> 두숫자의합은 입니다.</h2>

25 </html> 먼저, HTML 구문을보시면, Input 값을 Form 에서 Post 메서드로처리하게됩니다. Action 은비어있으니, 이페이지로 Post 되겠지요. 코드블록을보시면사용자의입력값을 Request 로받은후에값을더하는처리가이루어지고, 에서값을 처리하게되는구조입니다. 이렇게 HTML 의 Form 으로넘어온 POST 된값을 Request 처리를이용해받아처리할수 있습니다. 아울러, 넘어온값을숫자형으로변환하는처리도봐두시면좋을듯하네요. Form 으로넘어온 Post 값도처리가가능하며, URL 에붙어넘어오는쿼리스트링 (URL query-string) 을받아처리역시 가능합니다. 이때도마찬가지로, Request 로값을받아처리가능합니다. 예를들어, 요청한 URL 이이런형식이라면 ( 테스트 URL 예제로클릭해도동작안합니다 ) var RequestQueryString = Request["param"]; 그리고, 아래에서넘겨받은값을받아처리가능합니다. <h2>request 로넘어온문자열은 입니다.</h2> var total = 0; var RequestQueryString = Request["param"]; //HTML 의 Form 에서 POST 될경우에만실행 if(ispost) { // 사용자의입력값을받아서저장 var num1 = Request["text1"]; var num2 = Request["text2"]; // 넘겨받은값을 Integer 형으로변환후더하기수행 total = num1.asint() + num2.asint(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

26 transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> <head> <title>razor 로 HTML Form 값을처리 </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> body { background-color: beige; font-family: Verdana, Ariel; margin: 50px; form { padding: 10px; border-style: solid; width: 250px; </style> </head> <body> <p> 두개의숫자를넣고 " 더하기 " 버튼을클릭하세요 ~</p> <p></p> <form action="" method="post"> <p> <label for="text1"> 숫자 (1):</label> <input type="text" name="text1" /> </p> <p> <label for="text2"> 숫자 (2):</label> <input type="text" name="text2" /> </p> <p> <input type="submit" value=" 더하기 " /> </p> 더한값이아래표시됩니다. <h2> 두숫자의합은 입니다.</h2> <h2>request 로넘어온문자열은 입니다.</h2> </body> </html>

27 이렇게간략히 Razor 가제공하는코드블록에대한정리와함께 HTML 페이지의 Form 에서넘어온 Post 값과 URL 쿼리 문자열로넘어온값을처리하는예제에대해서살펴보았습니다. 어떠세요? Form 값에대한처리쉽지요? 그럼, 다음강좌에서는 "(5) Razor 강좌 - 재사용가능한코드생성 " 내용을진행하도록하겠습니다. 감사합니다. 참고자료 : WebMatrix Tutorial : 4 - Working with Forms

28 (5) Razor 강좌 - 재사용가능한코드생성 지난시간에는 (4) Razor 강좌 - 코드블록과 POST 처리 강좌를진행했습니다. 이번시간에는바로이어서다섯번째강좌, (4) Razor 강좌 - 재사용가능한코드생성 강좌를진행하도록하겠습니다. 재사용가능한코드는어쩌면기존웹개발자분들에겐아주짧은내용이될것같은데요. 바로, Include 구문과같다고보시면됩니다. 이런 HTML 페이지가있다고생각해보시지요. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title>html 재사용페이지 </title> </head> <body> <div class="header"> 이곳은사이트배너와메뉴에사용되는공통헤더영역입니다. <hr /> </div> <h1> 여기가메인영역입니다.</h1> <p> 메인페이지콘텐츠영역이에요.</p> <div class="footer"> <hr /> SQLER 에서제공해드립니다 ~ 공통 Footer 내용입니다. </div> </body> </html>

29 아시죠? 걍복사하시고, WebMatrix 에서실행해보세요 ~ 결과는아래처럼보이실겁니다. 넵. 우리네웹사이트에서일반적으로사용되는구조라고가정해보도록하겠습니다. 그렇다면, 저헤더영역과바닥영역이거의모든페이지에서공통으로사용되는데요. 재사용가능한저런영역을분리해 사용하면웹사이트개발이편리하지않을까요? 넵, 웹개발경험이있는분들은바로감이오실겁니다. include 처리죠. Razor 에서이런공통모듈처리 - 재사용가능한웹페이지영역제작을해보도록하겠습니다. 먼저 WebMatrix 에서간단히폴더를만들어볼께요. 간단히, 최상위의 WebSite1 폴더에서마우스우버튼 - "New Folder" 하시거나, 메뉴바의 New 버튼아래를클릭해 "New Folder" 를하셔도됩니다. - 저는 Resue 라는폴더를하나만들고 3 개의파일을만들었습니다. index.cshtml : 메인영역의콘텐츠영역으로사용 _header.cshtml : 공통헤더영역으로사용 _footer.cshtml : 공통바닥영역으로사용 할예정입니다. 그리고, index.cshtml 파일을아래처럼구성합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd">

30 <html xmlns=" <head> <title>html 재사용페이지 </title> </head> <h1> 여기가메인영역입니다.</h1> <p> </html> </body> 보시면, 를이용해파일을해당영역으로불러와합칠수있습니다. - include 구문처리라고보시면됩니다. <div class="header"> 이곳은사이트배너와메뉴에사용되는공통헤더영역입니다. <hr /> </div> _header.cshtml 페이지의내용 <div class="footer"> <hr /> SQLER 에서제공해드립니다 ~ 공통 Footer 내용입니다. </div> _footer.cshtml 페이지의내용

31 참고하세요 : 파일이름앞에 "_" 를넣는이유는다른파일과의손쉬운식별을위해개발보조차원에서구별해넣은것입니다. "_" 를 반드시사용할필요는없습니다. 자. 이렇게 3 개의파일을모두저처럼채우셨다면, 이제실행을해보도록하시지요. 아 ~ 당연하겠지만, WebMatrix 에서 index.cshtml 페이지를열고실행 (F12) 하셔야합니다. 어떠세요? 분리된파일이하나의페이지로잘보이시는지요? 넵 ~ 재사용가능한코드생성! 많은도움되시길바랍니다. 다음은조금더향상된코드재사용방안 - " 레이아웃페이지 " 처리에대해서살펴보도록하겠습니다. 참고자료 : ASP.NET 사이트의 Razor Tutorial 내용 3 - Creating a Consistent Look

32 (6) Razor 강좌 - 레이아웃페이지구조처리 지난시간에는 (5) Razor 강좌 - 재사용가능한코드생성 강좌를진행했습니다. 이번시간에는바로이어서여섯번째강좌, Razor 강좌 - 레이아웃페이지구조처리 강좌를진행하도록하겠습니다. 이녀석도실제구조만이해하시면어렵지않은내용이에요. 꼬옥아래처음으로보여드리는처리구조를잘살펴보시고 이해하시면아래의내용은모두껌처럼보이실겁니다. 왜 Layout 을이용하는가? 이전강좌에서는 RenderPage 를이용해페이지의특정위치에원하는내용을삽입하는처리를진행해보았습니다. 하지만, 개발자의입장에서볼때, 재사용성을극대화하고좀더구조적으로페이지의디자인과레이아웃을살릴수있는과정이필요하게됩니다. 이경우에이용가능한처리가바로레이아웃페이지 (Layout page) 방식입니다. 먼저아래그림을통해처리방식을반드시먼저이해하시는게아주중요합니다. 처리방식은이렇습니다. 꼭이해하셔야아래나머지강좌내용이수월하실거에요. 1) 사용자가 Content Page 를요청합니다. 2) Content Page 는레이아웃페이지의링크를담고있습니다. 3) 레이아웃페이지가호출되며레이아웃페이지내부에서 Content Page 가렌더링됩니다. 4) 레이아웃페이지에서다른페이지역시호출해 (include) 재사용가능합니다. 5) 사용자에게모든렌더링된레이아웃페이지가전달됩니다. 어떠세요? 조금감이잡히시는지요? 레이아웃페이지는마치 HTML 파일처럼콘텐트정보를제외한모든처리를넣을수있습니다.

33 HTML 페이지와다른점은오직콘텐트페이지의정보를담기위한 RenderBody 나 RenderPage 가호출된다는점뿐이지요. 몇가지더경험적인 Tip 을말씀드리자면, 앞의강좌의재사용을위한 RenderPage 방식보다이런레이아웃방식을대규모의, 디자인과협업이더많이필요할경우에주로사용하게됩니다. 정보와디자인을쉽게분리해개발자와디자이너간협업을증대시키며구조적으로정보를개발자의조건에따라레이아웃페이지에삽입여부등도제어가가능하기때문에더욱동적이고개발자와디자이너협업이가능한처리를이용가능하기때문입니다. 자, 이제처리방식이조금이해되셨다면, 저와같이코드를직접실행해보시지요. 앞의강좌에서 Reuse 라는폴더를만들어두었습니다. 아래처럼파일들을이폴더에생성해볼께요. <!DOCTYPE html> <head> <title> 레이아웃콘텐트를만들어요 </title> <link rel="stylesheet" type="text/css" /> </head> <div </div> <div id="footer"> 2010 SQLER 의 Razor 와 WebMatrix 강좌. </div> </body> </html> _layout1.cshtml LayoutPage = "_Layout1.cshtml"; <h1> 구조화된콘텐트 </h1> <p> 택시기사가나를보통녀석이아닌데? 라고생각하게만드는방법 (1/3) 1 왼쪽문을열고타자마자오른쪽문을열고내린다.

34 4 요금이오를때마다비명을지른다. 7 어느새내가운전한다. 18 U 턴해서반대차선에내려주세요. 21 택시에타자마자페브리즈를마구뿌린다. 28 재개발지구나새건물이들어선거리를지날때한숨을쉬며 하나도안변했네 여기 라고중얼거린다. 번역 : 행복한마조히스트 (sweetpjy.tistory.com) <p> Content1.cshtml 파일로저장합니다. <div id="header"> 구조화된콘텐트를만들어보세요 ~ </div> _header2.cshtml 파일로저장합니다. Reuse 폴더하위에 Styles 폴더를만들어주세요. h1 { border-bottom: 3px solid #cc9900; font: 2.75em/1.75em Georgia, serif; color: #996600; ul { list-style-type: none; body { margin: 0; padding: 1em; background-color: #ffffff; font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif; color: #006600;

35 #list { margin: 1em 0 7em -3em; padding: 1em 0 0 0; background-color: #ffffff; color: #996600; width: 25%; float: left; #header, #footer { margin: 0; padding: 0; color: #996600; 이파일은 Styles 폴더하위에 Site.css 파일로만들어주세요. 이제실행을해볼까요? WebMatrix 에서 Content1.cshtml 을선택하시고 F12 를눌러실행해주세요. 조금파일들이많으시지요? 걱정마세요. 이해만하시면아주쉽습니다. 이강좌맨위의처리흐름을생각하시면서설명드릴께요. 1) 사용자의요청으로 Content1.cshtml 파일이실행되면 Layout1.cshtml 페이지를호출합니다. 2) Layout 페이지에서 Header 영역을불러와 include 시키고바로아래에서 Content 페이지의내용을 RenderBody 로호출합니다. 3) 만들어진콘텐트가담긴레이아웃페이지가사용자에게 CSS 디자인파일과함께전달됩니다. 콘텐트페이지의특정영역을레이아웃페이지특정영역에표시 쿨럭. 쓰고나니제목이더복잡하네요. 의도한바는아닙니다만, 아래도표를보시면바로감이오실겁니다. 먼저, 아래 도표를보시지요.

36 1 ) 사용자의요청이콘텐트페이지에도착하면레이아웃페이지가호출됩니다. 2) 레이아웃페이지의 RenderSection 은콘텐트페이지의지정된 Section 을쏙쏙가져와표시합니다. 3) RenderBody 와혼용도가능합니다. 4) 사용자에게콘텐트가입혀진레이아웃페이지가전달됩니다. 자그럼마찬가지로, 예제를통해이해해보도록하겠습니다. <!DOCTYPE html> <html> <head> <title> 섹션이존재하는콘텐트파일 </title> <link href="@href("styles/site.css")" rel="stylesheet" type="text/css" /> </head> <body> <div </div> <div </div> <div </div>

37 <div id="footer"> 2010 SQLER 의 Razor 와 WebMatrix 강좌 </div> </body> </html> _Layout2.cshtml LayoutPage = list { <ul> <li> 김대우 </li> <li> 박중석 </li> <li> 황리건 </li> <li> 조성우 </li> <li> 김영욱 </li> <li> 김재우 </li> <li> 서진호 </li> header { <div id="header"> 레이아웃페이지제작 </div> <h1> 여러개의섹션이있는콘텐트 </h1> <p> 택시기사가나를보통녀석이아닌데? 라고생각하게만드는방법 (2/3) 39 내릴때레드카펫을깐다. 45 비내리는밤에택시를타고 저기, 요즘에이근처에서뭐가나온다는소문이돌잖아요 ~ 49 오늘은여기에한번둬볼까 라고말하며계기판위에물이든종이컵을내려놓는다. 59 행선지를물어보면 몰라요!! 하고운다.

38 70 들고있던비상등을차위에올리고 빨리갑시다, 신호는무시하세요! 95 차멀미가심하니까잘부탁드려요. 이러면운전을정말조심스럽게해준다. 99 타자마자 교통불편신고엽서 를집어든다. 104 땀을뻘뻘흘리면서항문을손으로틀어막고조심조심탄다. 번역 : 행복한마조히스트 (sweetpjy.tistory.com) </p> Content2.cshtml 파일로저장합니다. 보시는것처럼, 레이아웃페이지에서 RenderSection 을통해영역을구별해두게됩니다. 을이용해콘텐트를분리해처리하게되지요. 그럼, WebMatrix 에서 Content2.cshtml 파일을선택하시고 F12 를눌러실행해보세요. 레이아웃페이지는구조와영역에대한처리가사실상전부입니다. 잊지마시고, 꼭페이지가어떻게렌더링되어 사용자에게표시되는지, 그흐름을고민하면서진행해보시길바랍니다. Section 이존재하지않을경우처리 위의콘텐트페이지에각 Section 정보를담고있습니다. 레이아웃페이지에는이 Section 을표시하라고명시되어있는데, 몇몇콘텐트페이지만이런 Section 이빠져있다면어떻게될까요? Section 여부에따른분기처리가가능합니다. 아래 내용을참고하세요. Content2.cshtml header { <div id="header"> 레이아웃페이지제작 </div> 네, 바로 header 섹션을없애버리는겁니다. 저장하시고, Content2.cshtml 파일을 WebMatrix 에서실행해보시면. 뚜시꿍 ~ 에러가떨어집니다.

39 이럴경우를위해간단히 Layout 페이지를살짝손보면됩니다. _Layout2.cshtml optional: true) 또는, 아래처럼 if (IsSectionDefined("header") Section 이없더라도걱정하실필요없지요? ^_^ 끝으로, 데이터를레이아웃페이지로넘기는방법에대해서말씀드리도록하겠습니다. 콘텐트페이지의데이터를레이아웃페이지로전달 콘텐트페이지에서사용자의로그인상태를레이아웃페이지에전달해그에맞게페이지를렌더링하고자할경우에반드시 콘텐트페이지에서데이터를레이아웃페이지에전달해적절한처리가이루어지도록구성할필요가있습니다. 이럴경우를

40 생각해보시면좋을거에요. 어렵지않습니다. 이럴경우값을전달할경우에는 Request 처리와비슷하게 PageData 속성을이용하시면됩니다. 예제를돌려보도록할께요. 흐름은간단히, PageData LayoutPage = "_Layout3.cshtml"; PageData["Title"] = " 데이터전달 "; PageData["ShowList"] = true; if (IsPost) { if (Request["list"] == "off") { PageData["ShowList"] = header { <div id="header"> 레이아웃페이지만들기 </div> <h1>@pagedata["title"]</h1> <p> 택시기사가나를보통녀석이아닌데? 라고생각하게만드는방법 (3/3) 106 룸미러너머로운전기사의얼굴을심각하게응시. 135 혼자탄다음에아무도없는조수석쪽에계속말을건다. 144 조수석앞에붙은기사증을소리내서읽는다. 157 경찰차가지나가면몸을숙인다. 161 준비한애니메이션 CD 를카오디오에넣고튼다. 172 뒷자석으로타서조수석으로옮겨앉는다. 223 타자마자 트렁크가열려있는데요? 한다. 운전기사가확인하러간사이에운전석에앉는다. 그대로출발. 번역 : 행복한마조히스트 (sweetpjy.tistory.com) (PageData["ShowList"] == true) {

41 <form method="post" action=""> <input type="hidden" name="list" value="off" /> <input type="submit" value="hide List" /> </form> else { <form method="post" action=""> <input type="hidden" name="list" value="on" /> <input type="submit" value="show List" /> </form> <br /> Content3.cshtml 파일로저장합니다. <!DOCTYPE html> <html> <head> <title>@pagedata["title"]</title> <link href="@href("styles/site.css")" rel="stylesheet" type="text/css" /> </head> <body> <div (PageData["ShowList"] == true) { <div </div> <div </div> <div id="footer"> 2010 SQLER 의 Razor 와 WebMatrix 강좌

42 </html> </div> </body> _Layout3.cshtml 파일로저장합니다. <ul> <li> 김대우 </li> <li> 박중석 </li> <li> 황리건 </li> <li> 조성우 </li> <li> 김영욱 </li> <li> 김재우 </li> <li> 서진호 </li> </ul> _List.cshtml 파일로저장합니다. 흐름은간단히, PageData 조건을검사해메뉴아이템들을표시할지말지여부를결정하는예제라고보시면됩니다. 완료하셨다면, Content3.cshtml 파일을실행해보세요. 아래의 Hide List 버튼을클릭하시면 Post 여부에따라넘겨받은 PageData 로레이아웃이변화합니다. 어떠세요? 어렵지않으시지요? 자 ~ 이렇게해서지난시간의 RenderPage 에이어레이아웃을이용한처리역시알아보았습니다. 사실, 맨처음에말씀드린것처럼, 콘텐트페이지와레이아웃페이지가어떻게서로지지고볶으면서영역들을렌더링 하는지여부만이해하시면조금은쉬운내용셨을거라고생각되네요. 레이아웃처리를이용할경우는... 1) 개발자의입장에서레이아웃의재사용성을극대화하고 2) 디자이너와협업을통해구조적으로페이지의디자인과레이아웃을살릴수있는과정이며 3) 레이아웃과콘텐츠페이지간데이터전달및상호작용이가능한처리방식입니다. 자 ~ 그럼레이아웃강좌를마무리하도록하겠습니다. 다음강좌인 "(7) Razor 강좌 - 파일처리 " 에서뵙도록하겠습니다. ^_^ 감사합니다.~

43 PS. cshtml 파일앞에 _ 가붙은녀석은사용자의요청에의해실행불가한파일입니다. 다른콘텐트페이지같은 _ 가없는녀석들에의해참조되어호출만가능한녀석이지요. 레이아웃페이지나항상참조되는 header, footer 페이지에쓰면유용하겠지요? 참고하시길바랍니다. 참고자료 : ASP.NET 사이트의 Razor Tutorial 내용 3 - Creating a Consistent Look

44 (7) Razor 강좌 - 파일처리, 파일업로드 지난시간에는 (6) Razor 강좌 - 레이아웃페이지구조처리 강좌를진행했습니다. 이번시간에는바로이어서일곱번째강좌, (7) Razor 강좌 파일처리 강좌를진행하도록하겠습니다. 이번내용도쉬워요. 아마현업에서개발하시는분들은느끼시겠습니다만, 소규모의사이트를제작할경우에도파일작업보다는데이터베이스작업을선호하는분들이많으실거에요. 하지만, 파일업로드와같은처리는자주필요하고, 간단한업로드된파일들에대한처리작업은파일처리과정에서종종쓰이실경우가있으니모쪼록많은도움되시길바랍니다. 이강좌는파일처리작업인 파일쓰기, 파일읽기, 파일수정, 파일삭제, 파일업로드 ( 여러파일업로드 ) 과정으로 진행됩니다. 파일쓰기작업 Razor 에서는이러한파일처리작업이아주쉬워요. string result = ""; if (IsPost) { // 사용자입력값을변수에저장 string firstname = Server.HtmlEncode(Request["FirstName"]); string lastname = Server.HtmlEncode(Request["LastName"]); string = Server.HtmlEncode(Request[" "]); // 문자열연결 string userdata = firstname + "," + lastname + "," + + Environment.NewLine; // 경로와파일이름설정 string datafile = Request.PhysicalApplicationPath + "data.txt"; // 파일에쓰기 try { File.WriteAllText (@datafile, userdata); result = " 저장되었습니다.";

45 catch (Exception e) { result = " 쓰기도중에오류가발생했습니다."; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title> 파일에쓰기작업 </title> </head> <body> <form id="form1" method="post"> <div> <table> <tr> <td> 이름 :</td> <td><input id="firstname" name="firstname" type="text"/></td> </tr> <tr> <td> 성 :</td> <td><input id="lastname" name="lastname" type="text" /></td> </tr> <tr> <td> </td> <td><input id=" " name=" " type="text" /></td> </tr> <tr> <td></td> <td><input type="submit" value="submit"/></td> </tr> </table> </div> <div>

46 @if(result!= "") { <p> 결과 </div> </form> </body> </html> File 이라는폴더를만들고 Write.cshtml 파일로저장한후에실행합니다. 단순히, 사용자에게입력값을받고, POST 처리가발생하면값을변수에저장해파일에쓰는예제입니다. File 개체를 이용한다는것정도만참고하시면될것같습니다. 파일이만들어지는위치는 Request.PhysicalApplicationPath + "data.txt"; 처리에의해서결정되는데요, 보통문서폴더하위의 My Web Sites\WebSite1 폴더가기본경로이실거에요. 여기하위에 data.txt 파일이위치하고있을겁니다. 다음으로파일이어쓰기 - Append 작업을해보도록할께요. 파일이어쓰기 Append string result = ""; if (IsPost) { // 사용자입력값을변수에저장 string firstname = Server.HtmlEncode(Request["FirstName"]); string lastname = Server.HtmlEncode(Request["LastName"]); string = Server.HtmlEncode(Request[" "]); // 문자열연결 string userdata = firstname + "," + lastname + "," + + Environment.NewLine;

47 // 경로와파일이름설정 string datafile = Request.PhysicalApplicationPath + "data.txt"; // 파일에 Append try { File.AppendAllText (@datafile, userdata); result = " 저장되었습니다."; catch (Exception e) { result = " 오류가발생했습니다."; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title> 이어쓰기 - Append 처리 </title> </head> <body> <form id="form1" method="post"> <div> <table> <tr> <td> 이름 :</td> <td><input id="firstname" name="firstname" type="text" /></td> </tr> <tr> <td> 성 :</td> <td><input id="lastname" name="lastname" type="text" /></td> </tr> <tr>

48 <td> </td> <td><input id=" " name=" " type="text" /></td> </tr> <tr> <td></td> <td><input type="submit" value="submit"/></td> </tr> </table> </div> "") { <p> 결과 </div> </form> </body> </html> Append.cshtml 파일로저장하고실행합니다. 마찬가지로 Write 와같지요? AppendAllText 를이용해기존파일의뒤에이어쓰기를진행합니다. 다음으로파일읽기를진행해보도록할게요. string result = ""; Array userdata = null; char[] delimiterchar = {','; string datafile = Request.PhysicalApplicationPath + "data.txt"; try { if (File.Exists(dataFile)) {

49 userdata = File.ReadAllLines(dataFile); if (userdata == null) { // 빈파일오류. result = " 파일이비어있습니다."; else { // 파일존재안함 result = " 파일이존재하지않습니다."; catch (Exception e) { result = e.message.tostring(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title> 파일읽기 </title> </head> <body> <div> <h1> @if (result == "") { (string dataline in userdata) { <li> User <ul>

50 @foreach (string dataitem in dataline.split(delimiterchar)) { <li>@dataitem</li > </ul> </li> </ol> </html> </div> </body> Read.cshtml 파일로저장합니다. 조금씩난이도가올라가나요? 간단히, 저희가앞에서저장한파일을읽어옵니다. userdata 라는배열을만들고여기에 값을넣은후에 dataline 문자열에서지정한구분자 (delimiter, - 콤마 ) 로분리해값을출력하는예제입니다. 말이길었나요? ^_^;;; 주의깊게보실부분은 File.ReadAllLines 부분입니다. 다음과정으로파일삭제과정을진행해보도록하겠습니다. bool deletesuccess = false; var photoname = ""; if (IsPost) { photoname = Request["photoFileName"] + ".jpg"; var fullpath = Path.Combine(Request.PhysicalApplicationPath photoname); if (File.Exists(fullPath)) { File.Delete(fullPath); deletesuccess = true;

51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> 사진파일삭제 </title> </head> <body> <h1> 사이트에서파일을삭제합니다.</h1> <form name="deletephoto" action="" method="post"> <p> 지울사진파일의이름을.jpg 확장자를빼고적으세요. : <input name="photofilename" type="text" value="" /> </p> <p> <input type="submit" value="submit"> </p> { 파일이삭제되었습니다.! </p> </body> </html> Del.cshtml 파일로저장합니다. 웹사이트루트폴더 ( 아마도문서하위에 My Web Sites\WebSite1\ 기본폴더일겁니다.) 하위에 images 라는폴더를 만들어주세요. 아무 jpg 파일을만들거나복사합니다.( 확장자가꼭 jpg 이어야합니다.) 실행하시고이 images 폴더에확장자.jpg 를빼고이름만적으면됩니다. 마찬가지로, File.Delete 을주의해서보시길바랍니다. ^_^ 쉽지요 ~ 넵 ~ 쉽습니다. ^_^ 다음으로파일업로드과정에대해서알아보도록하겠습니다. 파일업로드 ( 여러파일업로드

52 var filename = ""; if (IsPost) { var filesavepath = ""; var uploadedfile = Request.Files[0]; filename = Path.GetFileName(uploadedFile.FileName); filesavepath = Server.MapPath("~/App_Data/UploadedFiles/" + filename); uploadedfile.saveas(filesavepath); <!DOCTYPE html> <html> <head> <title> 파일업로드예제 </title> </head> <body> <h1> initialnumberoffiles:1, allowmorefilestobeadded:false, includeformtag:true, uploadtext:" 업로드 (IsPost) { <span> 파일업로드가완료되었습니다!</span><br/> </body> </html> FileUpload.cshtml 파일로저장하고, 웹사이트루트에위치하고있는 App_Data 폴더하위에 UploadedFiles 폴더를만들어 두세요. 그리고실행해보시면파일업로드처리가되는것을확인가능합니다. 기존에웹개발을해오신분들은아마느끼실지모르겠습니다. 업로드처리가뭔가더쉽고한줄의코드로처리되지요? 바로 Upload Helper 입니다. Helper 에대한간략한소개 Helper 는 Razor 의가장큰혁신기능중의하나로복잡한코드블록이나기능을모듈화시키는기능입니다. 보시면 Upload 기능도속성값들만적는것으로우리가익히아는업로드폼이자동완성되지요.( 뒤의강좌에서아주상세히풀어

53 보겠습니다.) Helper 를통해업로드를하게되면 Request.Files 개체가이요청을받게됩니다. var uploadedfile = Request.Files[0]; 이부분이지요. 뒤의오디널 (Ordinal) 번호는첫번째업로드된파일번호이며 0 번부터시작하게됩니다. 여러개의파일을받게되면후속번호는 0 다음으로이어서 1, 2, 3 이런식으로받아서처리가능해지지요.( 여러개의파일업로드 Multiple file upload 역시쉽게가능합니다.) 이어서 GetFileName 으로파일이름만저장하고 MapPath 로서버의 /App_Data/UploadedFiles 폴더하위에파일이저장되는것이지요. 끝으로여러개의파일업로드는예제정도만소개해드리도록하겠습니다. 여러파일업로드 (Multiple file var message = ""; if (IsPost) { var filename = ""; var filesavepath = ""; int numfiles = Request.Files.Count; message = " 파일업로드완료. 전체업로드파일수 : " + numfiles.tostring(); for(int i =0; i < numfiles; i++) { var uploadedfile = Request.Files[i]; filename = Path.GetFileName(uploadedFile.FileName); filesavepath = Server.MapPath("~/App_Data/UploadedFiles/" + filename); uploadedfile.saveas(filesavepath); <!DOCTYPE html> <html> <head><title> 여러파일업로드 </title></head> <body> <form id="myform" method="post" enctype="multipart/form-data"

54 action=""> <div> <h1> 여러파일업로드예제 (!IsPost) initialnumberoffiles:2, allowmorefilestobeadded:true, includeformtag:true, addtext:" 업로드파일추가 ", uploadtext:" 업로드 ") <span>@message</span> </div> </form> </body> </html> FileUploadMultiple.cshtml 파일로저장하고실행해보세요. Helper 의설정대로 2 개의기본업로드파일이가능하며, 업로드파일추가 를클릭해업로드할파일수를동적으로늘릴수있습니다. 위의 Post 처리에서는파일의수만큼루프를돌면서처리하는것을확인가능하지요. 이렇게해서간단히파일작업에대해서알아보았습니다. 파일에대한기본작업과업로드작업모두어렵지않으셨을거에요. 특히, Helper 의경우 Razor 의장점을아주잘보여주는녀석이고, 업로드 Helper 만봐도참쉽제잘만들었다고느껴지실거에요. Razor 의특징이이런쉬운개발이아닐까생각합니다. 다음강좌는많은분들이기다리고계시지요? (8) Razor 강좌 - 데이터베이스처리강좌에서인사드리도록하겠습니다. 도움되시길바랍니다.

55 (8) Razor 강좌 - 데이터베이스처리 지난시간에는 (7) Razor 강좌 - 파일처리, 파일업로드 강좌를진행했습니다. 이번시간에는바로이어서, (8) Razor 강좌 - 데이터베이스처리 강좌를진행하도록하겠습니다. 이번시간은데이터베이스관련내용이에요. 아마이 Razor & WebMatrix 관련내용을기다리시는분들중에이 데이터베이스부분이가장궁금한부분이실것같네요. 개인적으로, 가장먼저제가테스트해보고공부한부분이바로이데이터베이스처리부분인데요. 기존웹개발언어들의스파게티코드를얼마나분리해냈고, DB 처리가간결하게구성되어있는지비교하면서보셔도좋을것 같습니다. SQL 과같은데이터베이스를처음하시는분들의참고자료 : 음... 부족한제강좌글을보시는분들중에는데이터베이스가어떤것인지잘감이안잡히는분도계실것같은데요, 제가예전에데이터베이스기본개념을설명한강좌몇개를소개해드릴예정이니처음데이터베이스를공부하시는분들도참고하시면많은도움되실거에요. 시간이조금지난강좌라도걱정마세요. 데이터베이스기본개념은여전하답니다. 한번이라도 =, MSSQL 이나 MySQL 이나오라클등을아주잠시라도접해보신분들은아마이하내용을쉽게이해하실것같아요. 하지만, 전혀 DB 에대해경험이없는분이라면아래내용을참고하셔도좋을것같습니다. 데이터베이스를처음하시는분들이참고하시면좋을내용 데이터베이스란무엇이고왜사용하는가? SQL 프런티어가전해드리는 SQL2008 기본강좌 최근에진행된 SQLER 의 SQL 프런티어강좌입니다. SQL2000 강좌게시판 앞부분의 SELECT, INSERT, UPDATE, DELETE 를보시면서감을잡으시는것도좋을것같습니다. 웹개발과데이터베이스처리는뗄래야뗄수없는그런찰떡같은관계입니다. 이번의요즘좀한다는분들이관심좀 가지시고계신 Razor 가데이터베이스관련개발을공부할좋은기회라고생각하시고꼭 DB 와 SQL 처리에대한감을 잡으시는것도좋을것같아요. PHP 나 ASP 를사용하셨고, 예전에사용해보신 DB 가 MSSQL 이나 MySQL 또는이기종의 DB 라서걱정되세요? 전혀걱정안하셔도됩니다. 소견으로감히말씀드리면, PHP 보다쉽고다양한편의성을제공하며, ASP.NET 의엔터프라이즈급성능과안정성을제공하는게 Razor 입니다. 당연히, WebMatrix 에포함된 DB 도 SQL 서버처럼 ANSI 표준을따르고, 아무 DB 나경험이있으시다면쿼리방식에는차이가없기때문에어려움없이개발을진행가능하답니다 ~ 이강좌가끝날때즈음이면저코난이처럼 후덜 ~ Razor DB 처리이거겁나쉽네 를연발하시게될거에요 ~!! Razor 와 WebMatrix 에서의데이터베이스의관계? 예전강좌에서소개해드렸는데요. WebMatrix 에서는간단히 SQL 서버보다더작고가벼운 SQL Server Compact Edition

56 4 가 WebMatrix 에포함되어있습니다. 전문웹개발자분들을위해조금더상세한설명을드리자면, 무료데이터베이스 엔진으로.NET 기반의 API 를제공해 WebMatrix 를통한손쉬운웹개발이가능하며, SQL Server 로쉬운데이터 마이그레이션이가능합니다.(WebMatrix 에서자체마이그레이션도구를제공합니다.) 처음데이터베이스관련개발을 Razor 와 WebMatrix 로진행하셔도아무걱정하지마세요. 데이터베이스쿼리나테이블생성디자인등도모두 WebMatrix 가책임집니다 ~ 개발, DB, 배포모든과정을하나의심플하고빠른개발도구, WebMatrix 에서진행하실수있어요 ~ 우워 ~ 세상점점좋아지는구나 ~ 생유생유 ~ WebMatrix 의데이터베이스기능참고자료 : [ 동영상강좌 ] (2) WebMatrix 5 분리뷰 ~ 동영상으로 Database 는물론 WebMatrix 에대한전반적인기능을보실수 있습니다. WebMatrix 에서데이터베이스작업, 테이블작업뿐만아니라쿼리도가능하다고계속말씀드렸습니다. 실제로이번 강좌를진행할때다해보도록할께요. WebMatrix 에서데이터베이스생성 (1) 왼쪽아래의 Databases 를클릭해데이터베이스영역으로넘어갑니다. (2) 중간의 Add a Database to your site 를클릭해데이터베이스를생성하세요. (3) 위의웹사이트하위에 WebSite1.sdf 라는 DB 가잘만들어진게보이시면완료되신겁니다. ^_^ 이제 Database 이름을변경해보도록할께요.( 아쉽지만, 현재버전 -Beta1 - WebMatrix 는 Databases 섹션에서 DB 이름 변경이불가해요.)

57 Database 이름변경 (1) Files 를선택하고 (2) 해당데이터베이스를선택, 마우스우버튼후 Rename 이름을변경합니다. (3) 이름을저처럼 CohoWinery.sdf 로잡아주세요.( 이후예제에서이이름으로사용합니다.) 자, 데이터베이스도만들었으니, 이제실제데이터를넣고테스트를하기위한테이블생성, 샘플데이터삽입작업을할 차례입니다. WebMatrix 에서테이블생성 WebMatrix 에서테이블을생성하기위해아래절차를진행하세요 ~

58 (1) 왼쪽하단의 Databases 를클릭하고, (2) 왼쪽상단에서조금전만든해당 DB 를선택하신후에 (3) 중간위의 New Query 를클릭해새로운 SQL 쿼리를수행합니다. 참고로, WebMatrix 는쿼리가아닌 UI 가있는화면으로테이블생성, 관계설정등도가능합니다. 위의화면 New Table 을 누르고 UI 로제작도가능하니지금은참고만해두세요 ~ 테이블생성쿼리수행 CREATE TABLE Customers ( CustomerID int NOT NULL, FirstName nvarchar(128) NOT NULL, LastName nvarchar(128) NOT NULL, Address nvarchar(256) NOT NULL, Phone nvarchar(15) NOT NULL, nvarchar(128) NOT NULL, PRIMARY KEY (CustomerID) ); 위의테이블생성구문을수행하시면테이블이생성됩니다.

59 실행을위해서는, WebMatrix 의지금열려있는쿼리창에붙여넣으시고, F5 를누르시거나, 상단중간정도에위치한 Execute 를클릭하셔도됩니다. Command(s) completed successfully 라고나오실거에요. 그럼성공 ~ 확인을위해왼쪽맨위의우리 DB 인 CohoWinery.sdf 펼치고나오는 Tables 에서마우스우측버튼 - Refresh 를 실행하면, Customers 라는테이블이보이실겁니다. 또는, 왼쪽메뉴에서 Customers 테이블을더블클릭하거나우클릭후 "Data" 를클릭하셔도데이터조회가가능합니다. - 참쉽죠? ^_^;;; 바로이어서, 샘플데이터를삽입해보도록할게요. 샘플데이터삽입 INSERT 처리 쿼리창의 CREATE TABLE 구문을지우고아래 INSERT 구문을 한줄씩 복사해실행합니다. 주의 아래쿼리들을한 Insert 구문씩복사해넣으세요. INSERT INTO Customers VALUES (1, 'Jim', 'Corbin', ' Ave SE New York 87905', ' ', 'JC@cpalnd.com'); INSERT INTO Customers VALUES (2, 'Eva', 'Coretta', ' St Portland 34567', ' ', 'EC@cpalnd.com'); INSERT INTO Customers VALUES (3, 'Sara', 'Davis', '1123 Main St Orcas 3444', ' ', 'SW@contoso.com'); 데이터조회구문 SELECT * FROM Customers; ( 한줄씩복사해개별실행하려니갑갑하시죠? 현재 WebMatrix 가 MSSQL 관리도구나개발도구와달리, 몇몇부분이조금 불편하실수있습니다. 정식버전에서는이런불편함이대부분수정될예정이라고하니참고하시길바랍니다.) 자 ~ 이렇게해서간단히데이터베이스작업을수행했습니다. 우리가해본작업은 (1) 데이터베이스생성 (2) 테이블생성 (3) 쿼리도구를이용해데이터삽입, 데이터조회 작업을진행해보았습니다. 그럼이제본편 ~ Razor 에서데이터베이스를처리하는부분을진행해보도록하지요 ~

60 Razor 에서데이터조회 SELECT var db = Database.OpenFile("CohoWinery.sdf"); //var db = Database.OpenFile("~/App_Data/CohoWinery.sdf"); //var db = Database.OpenFile(@"Data Source=C:\Users\ 사용자명 \Documents\My Web Sites\WebSite1\App_Data\CohoWinery.sdf"); var selectquerystring = "SELECT * FROM Customers ORDER BY CustomerID"; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title> 고객리스트 </title> </head> <body> <h2> Coho Winery 고객리스트 </h2> <table border="1"> <thead> <tr> <th> 이름 </th> <th> 성 </th> <th> 주소 </th> <th> 전화번호 </th> <th> </th> </tr> </thead> (var row in db.query(selectquerystring)) { <tr> <td>@row.firstname</td> <td>@row.lastname</td> <td>@row.address</td> <td>@row.phone</td> <td> <a href="mailto:@row. " style="text-decoration: underline;">@row. </a></td> </tr>

61 </tbody> </table> </body> </html> DB 폴더를웹사이트루트에만들고 01_select.cshtml 파일을만들고복사해실행합니다. Razor 는기존의많은웹개발방식과달리, 더쉽고더빠른웹개발을그목표로하고있습니다. 개인적으로저코난이가 Razor 에푸욱 ~ 빠지게된이유는바로이데이터베이스처리방식. 스파게티코드없이깔끔하고, DB 처리를우리웹개발자에게는눈물겹게감사하도록, 딱한큐로끝내고있습니다. DB 처리방식이나 Helper 를이용해그 동안있었던웹개발의어려움과복잡함을덜어내고, 개발자에게더쉽고빠른개발이가능하게돕는녀석이지요. 지 ~ 코드를봐볼까요 ~ DB 연결방식으로 Database.OpenFile 을이용합니다. ( 주석들을참고하시면여러 DB 연결방식참조가가능합니다.) var db = Database.OpenFile("CohoWinery.sdf"); 저는이렇게연결했습니다. 이어서, SQL 쿼리구문을만들고, 아래 Foreach 구문에서 db.query (var row in db.query(selectquerystring)) 사실위의두줄로 DB 연결이끝난겁니다. 잊지마시고, 이두과정을꼭잘눈에익혀두시면나중에도 DB 관련처리를하실 때많은도움되실겁니다. 개발경험이있으신분들을위해 WebMatrix 에기본포함된 SQL CE 가아니라, 타 DBMS 를이용하실경우 (MSSQL 서버와같은 ) 에는기존방식과마찬가지로, Connection String 을이용해처리가가능합니다.( 현재 WebMatrix Beta1 에서 Connection String 은 Web.config 에저장됩니다. Connection String 구성등은나중에요청이있으시거나하면상세하게풀어볼게요.) 그럼이어서 Razor 로데이터삽입처리를보도록하겠습니다.

62 Razor 에서데이터삽입 INSERT var db = Database.OpenFile("CohoWinery.sdf"); var CustomerID = Request.Form["CustomerID"]; var FirstName = Request.Form["FirstName"]; var LastName = Request.Form["LastName"]; var Address = Request.Form["Address"]; var Phone = Request.Form["Phone"]; var = Request.Form[" "]; if (IsPost) { // 사용자의입력값저장 & 입력값을검사 CustomerID = Request["CustomerID"]; if (CustomerID.IsEmpty()) { Validation.AddFieldError("CustomerID", " 고객 ID 번호를입력하세요."); // 사용자의입력값저장 & 입력값을검사 FirstName = Request["FirstName"]; if (FirstName.IsEmpty()) { Validation.AddFieldError("FirstName", " 이름을입력하세요."); // 사용자의입력값저장 & 입력값을검사 LastName = Request["LastName"]; if (LastName.IsEmpty()) { Validation.AddFieldError("LastName", " 성을입력하세요."); // 사용자의입력값저장 & 입력값을검사 Address = Request["Address"]; if (Address.IsEmpty()) { Validation.AddFieldError("Address", " 주소를입력하세요."); // 사용자의입력값저장 & 입력값을검사 Phone = Request["Phone"]; if (Phone.IsEmpty()) { Validation.AddFieldError("Phone", " 전화번호를입력하세요.");

63 // 사용자의입력값저장 & 입력값을검사 = Request[" "]; if ( .IsEmpty()) { Validation.AddFieldError(" ", " 이메일주소를입력하세요."); if(validation.success) { // 입력받은값을파라미터화후 insert 구문에전달 var insertquerystring = "INSERT INTO Customers (CustomerID, FirstName, LastName, Address, Phone, ) @5)"; // 쿼리실행 db.execute(insertquerystring, CustomerID, FirstName, LastName, Address, Phone, ); // 삽입후데이터조회페이지로이동 Response.Redirect("01_select.cshtml"); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title> 고객정보추가 </title> <style type="text/css"> label { float: left; width: 8em; text-align: right; margin-right: 0.5em; fieldset { qpadding: 1em; border: 1px solid; width: 50em; legend { padding: 0.2em 0.5em;

64 border: 1px solid; font-weight: bold; </style> </head> <body> <h2> 새로운고객정보추가 </h2> <div style="font-weight:bold; 입력값오류가있습니다.") </div> <form method="post" action=""> <fieldset> <legend> 고객추가 </legend> <div> <label> 고객 ID 번호 :</label> <input name="customerid" type="text" size="50" /> </div> <div> <label> 이름 :</label> <input name="firstname" type="text" size="50" /> </div> <div> <label> 성 :</label> <input name="lastname" type="text" size="50" /> </div> <div> <label> 주소 :</label> <input name="address" type="text" size="50" /> </div> <div> <label> 전화번호 :</label> <input name="phone" type="text" size="50" /> </div> <div> <label> </label> <input name=" " type="text" size="50" />

65 </div> <div> <label> </label> <input type="submit" value="insert" class="submit" /> </div> </fieldset> </form> </body> </html> 02_Insert.cshtml 파일로저장합니다. 참고하실내용이두개정도가있는데요. INSERT 구문을수행하실경우에는이렇게파라미터화된값을전달합니다. // 입력받은값을파라미터화후 insert 구문에전달 var insertquerystring = "INSERT INTO Customers (CustomerID, FirstName, LastName, Address, Phone, ) @5)"; 또한, 이번에새롭게등장한또하나의 Razor Helper 인 Html.ValidationSummary 녀석인데요. 이 Html.ValidationSummary 을이용하면, 입력값을손쉽게검사해입력오류여부를사용자에게쉽게알릴수있습니다. 영역에표시하게됩니다.

66 요렇게자동으로도와줍니다. 개발자의번거로운작업인입력값체크처리를간략화시킬수있는깔꼼한녀석이에요. 우리들의경우이런 validation 을쓰는개발자분들과 UI 를위해직접만들어사용하시는경우도꽤있는것같습니다. 다음은 Update 를알아보도록할게요. 이제데이터베이스처리좀감이잡히시죠? Update 도전혀 ~ 어렵지않습니다. Razor 로데이터베이스수정 Update 처리 데이터를수정하려면, 먼저조회를하고, 수정루틴을넣은후에수정화면이있어야겠지요. 조회는위의 SELECT 와 유사하고, Update 값화면은 INSERT var db = Database.OpenFile("CohoWinery.sdf"); var selectquerystring = "SELECT * FROM Customers ORDER BY CustomerID"; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title> 고객정보수정 </title> </head> <body> <h2> 고객정보수정 </h2> <form method="post" action="" name="form"> <table border="1"> <thead> <tr> <th/> <th> 이름 </th> <th> 성 </th> <th> 주소 </th> <th> 전화번호 </th> <th> </th> </tr> </thead> (var row in db.query(selectquerystring)) { <tr>

67 <td><a row.customerid)"> 수정 </a></td> <td><a style="text-decoration: </tr> </tbody> </table> </form> </body> </html> 03_update_01.cshtml 파일로저장해두겠습니다. 이어서 UPDATE 에필요한후속파일을만들어주세요. 위의 04_update_02.cshtml 페이지로 CustomerID 를넘겨주고있어요. var db = Database.OpenFile("CohoWinery.sdf"); var selectquerystring = "SELECT * FROM Customers WHERE CustomerID=@0"; // 업데이트를위해고객 ID 번호로정보를읽어옵니다. // 고객 ID 는앞의 update 페이지에서넘겨받았습니다. var CustomerID = UrlData[0]; if (CustomerID.IsEmpty()) { Response.Redirect("03_update_01.cshtml"); // 업데이트를위해고객정보를조회 var row = db.querysingle(selectquerystring, CustomerID); // Update 입력상자에넣기위해변수에값을저장 var FirstName var LastName var Address var Phone = row.firstname; = row.lastname; = row.address; = row.phone;

68 var = row. ; if (IsPost) { CustomerID = Request["CustomerID"]; if (CustomerID == null) { Validation.AddFieldError("CustomerID", " 고객 ID 번호를입력하세요."); FirstName = Request["FirstName"]; if (String.IsNullOrEmpty(FirstName)) { Validation.AddFieldError("FirstName", " 이름을입력하세요."); LastName = Request["LastName"]; if (String.IsNullOrEmpty(LastName)) { Validation.AddFieldError("LastName", " 성을입력하세요."); Address = Request["Address"]; if (String.IsNullOrEmpty(Address)) { Validation.AddFieldError("Address", " 주소를입력하세요."); Phone = Request["Phone"]; if (String.IsNullOrEmpty(Phone)) { Validation.AddFieldError("Phone", " 전화번호를입력하세요."); = Request[" "]; if (String.IsNullOrEmpty( )) { Validation.AddFieldError(" ", " 이메일주소를입력하세요."); if(validation.success) { // 업데이트처리를위해파라미터화작업 var updatequerystring = "UPDATE Customers SET FirstName=@0, LastName=@1, Address=@2, Phone=@3, =@4 WHERE CustomerID=@5" ; // UPDATE 쿼리구문실행 db.execute(updatequerystring, FirstName, LastName, Address, Phone, , CustomerID); // 업데이트를위한리스트페이지로이동 Response.Redirect("~/db/03_update_01.cshtml");

69 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title> 고객정보수정 </title> <style type="text/css"> label { float: left; width: 8em; text-align: right; margin-right: 0.5em; fieldset { padding: 1em; border: 1px solid; width: 50em; legend { padding: 0.2em 0.5em; border: 1px solid; font-weight: bold; </style> </head> <body> <h2> 고객정보수정페이지 </h2> <div style="font-weight:bold; 입력값에오류가있습니다 :") </div> <form method="post" action=""> <fieldset> <legend> 고객정보수정 </legend> <div> <label> 고객 ID 번호 :</label> <input name="customerid" type="text" size="50" value="@customerid" />

70 </div> <div> <label> 이름 :</label> <input name="firstname" type="text" size="50" /> </div> <div> <label> 성 :</label> <input name="lastname" type="text" size="50" /> </div> <div> <label> 주소 :</label> <input name="address" type="text" size="50" /> </div> <div> <label> 전화번호 :</label> <input name="phone" type="text" size="50" /> </div> <div> <label> </label> <input name=" " type="text" size="50" /> </div> <div> <label> </label> <input type="submit" value="update" class="submit" /> </div> </fieldset> </form> </body> </html> 04_update_02.cshtml 파일로저장합니다. 실행을위해앞에서만들었던 03_update_01.cshtml 업데이트리스트페이지를 실행하세요. 위의업데이트화면은 Insert 처리와마찬가지로 validation 후에파라미터화된값을처리하게되면서마무리됩니다. 마지막 삭제처리 - DELETE 를알아보도록할께요 ~

71 Razor 로데이터베이스값삭제 DELETE 처리 어느덧마지막내용이네요. 삭제처리를위한 DELETE 는더쉽습니다. 데이터조회리스트화면에서해당값을선택해 삭제 var db = Database.OpenFile("CohoWinery.sdf"); var selectquerystring = "SELECT * FROM Customers ORDER BY CustomerID"; if (IsPost) { var deletequerystring = "DELETE FROM Customers WHERE CustomerID=@0"; db.execute(deletequerystring, Request["rowID"]); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title> 고객정보삭제 </title> <script type="text/javascript"> function deleterow(rowid) { var answer = confirm(" 정말삭제하시겠습니까?") if (answer==true) { document.form.rowid.value = rowid; document.form.submit(); </script> </head> <body> <h2 class="subheader"> 고객정보삭제 </h2> <form method="post" action="" name="form"> <input type="hidden" name="rowid" value="" /> <table border="1"> <thead> <tr> <th/>

72 <th> 이름 </th> <th> 성 </th> <th> 주소 </th> <th> 전화번호 </th> <th> </th> </tr> </thead> (var row in db.query(selectquerystring)) { <tr> <td><a href="javascript:deleterow('@row.customerid')"> 삭제 </a></td> <td>@row.firstname</td> <td>@row.lastname</td> <td>@row.address</td> <td>@row.phone</td> <td><a href="mailto:@row. " style="textdecoration:underline;">@row. </a></td> </tr> </tbody> </table> </form> </body> </html> 05_del.cshtml 파일로저장하고실행하세요. 마지막으로, 데이터를손쉽게웹에서표시해주는 WebGrid Helper 를소개해드리려고합니다. 기본제공되는 Grid 로 그리드로사용하기편리하실거에요. 자동페이징이나, 쉬운디자인등등... 이번에는맛보기정도만하고, 나중에기회되면 이 WebGrid 도잘풀어보도록할께요. ^_^ WebGrid Helper var db = Database.OpenFile("CohoWinery.sdf"); var selectquerystring = "SELECT * FROM Customers";

73 var data = db.query(selectquerystring); var grid = new WebGrid(data, defaultsort: "FirstName", rowsperpage: 5); <!DOCTYPE html> <html> <head> <title> WebGrid 에데이터를표시합니다. </title> <style type="text/css"> h1 {font-size: 14px;.grid { margin: 4px; border-collapse: collapse; width: 600px;.head { background-color: #E8E8E8; font-weight: bold; color: #FFF;.grid th,.grid td { border: 1px solid #C0C0C0; padding: 5px;.alt { background-color: #E8E8E8; color: #000;.FirstName { width: 200px; </style> </head> <body> <h1> 웹그리드로데이터를표시 tablestyle: "grid", headerstyle: "head", alternatingrowstyle: "alt", columns: grid.columns( grid.column("firstname", " 이름 ", style: "product"), grid.column("address", " 주소 ", format:@<i>@item.address</i>), grid.column("phone", " 전화번호 ", format:@<text>@item.phone</text>) ) ) </html> WebGrid 로저장하고실행해보세요. 그럼이런형태로보이실겁니다. ^_^

74 짧은코드로그리드가아주깔끔하게나오죠? 이런방법도 Razor 와 WebMatrix 는기본제공하고있으니참고하시길 바랍니다. Razor 와 WebMatrix 를이용한데이터베이스개발의장점은? 데이터처리에대한예를말씀드렸어요. 어쩌면 Razor 가기존의웹개발방식과가장차별화를제공하는부분이바로이 데이터베이스처리부분일겁니다. Razor & WebMatrix 의데이터베이스개발작업의장점은 (1) 자체내장된 SQL DB 를이용하고 (2) 무료 SQL 서버인 SQL Express 나 SQL 서버상위버전으로 100% 마이그레이션을 WebMatrix 내부에서지원하며 (3) 간결한데이터베이스접근처리방식 (4) 개발과쿼리, 데이터베이스작업을모두하나의도구인 WebMatrix 에서제공하는것은 Razor 와데이터베이스개발에대한큰매력이아닐까생각합니다. 데이터베이스에경험이없으신분들은내용이조금어려웠을지도모르겠습니다. 곧, 이강좌에대해서도동영상강좌를 준비하고있으니많은도움되시길바랍니다. 그럼다음강좌인 (9) Razor 강좌 - Helper 소개 ( 이미지, 비디오 ) 에서뵙도록하겠습니다. ^_^

75 (9) Razor 강좌 - Helper 소개 ( 이미지, 비디오 ) 지난시간에는 (8) Razor 강좌 - 데이터베이스처리 강좌를진행했습니다. 이번시간에는바로이어서, (9) Razor 강좌 - Helper 소개 ( 이미지, 비디오 ) 강좌를진행하도록하겠습니다. Razor 와 WebMatrix 에서 Helper 는무엇인가요? 넵. 지난강좌에서도몇번소개해드렸습니다만, Helper 는웹에서사용되는여러기능들을손쉽게이용가능하도록 구조화시킨모듈입니다. 즉, 다양하고, 복잡한웹의기능을개발자가쉽게이용가능하도록돕는부품이지요. 그렇다면, Helper 는어떤종류가있나요? Razor 는이러한 Helper 를기본적으로포함하고있으며, 사용자가직접만들어사용할수있도록역시돕고있습니다. 기본적으로현재 WebMatrix Beta1 에포함된 Helper 들의리스트를보여드리자면아래와같아요. 참조 : WebMatrix Helpers 종류 - 영문 위의링크를통해대략이런종류의다양한 Helper 들이 Beta1 에서기본제공되고있구나 ~ 정도만보셔도좋을것같습니다. Beta1 에서이정도로많고앞으로공개예정인녀석들등도많이있으니정식버전에서는엄청나겠지요? ^_^ 기대됩니다. 이번강좌에서는이러한 Helper 들중에서종종사용하시게될 Image 처리, Video 처리, 두개정도의기본 Helper 를상세히 살펴봐서어떻게 Helper 를이용하는지, 또한 Helper 가얼마나우리의웹개발닭질을줄여줄지기대해보는시간을 가지도록하겠습니다. 참조 : 사용자가직접 Helper 를만들고사용하는방법 영문 Image 처리 Helper WebImage 소개해드릴녀석은 WebImage Helper 입니다. 이녀석으로어떤걸할수있냐고요? - 웹서버경로의이미지로드 - 사용자에의해업로드된이미지로드 - 이미지파일을웹서버특정경로에저장 - 이미지에워터마크 ( 텍스트또는이미지 ) 추가표시 - 이미지 Flip 이나회전 - 이미지크기조절 (Resize 를이용한섬네일표시 ) 와같은웹개발에서종종사용하게될기능을제공합니다. 그럼요기능들중에서섬네일로사용하기위한크기조절 (Resize) 처리와텍스트워터마크기능을살펴보도록하겠습니다.

76 아! 제강좌는수많은, 모든 Helper 들의기능이나사용예를보여드리는게아니에요. 제가보여드릴소개샘플들을봐보시면서 Helper 란이런것이고, 이런목적으로 Helper 를사용하고, 이렇게 Helper 이용가능하구나부분에초점을맞추셔야, 앞으로도쏟아져나오게될수많은 Helper 들중에원하시는 Helper 를직접찾아사용가능하실겁니다. 막상이용방법설명이라고해봐야코드한줄정도에파라미터값들넣는게다네요.( 쿨럭 ) 워낙쉬워서사용방법설명이라고하기도좀거시기합니다. ^_^;;; 그럼시작해볼게요 ~ WebImage 섬네일이미지표시 (Resize) 예제실행을위해 WebMatrix 로 WebImage 폴더를만들고, 그하위에 images, 또그하위에 tumbs 폴더를미리 WebImage photo = null; var newfilename = ""; var imagepath = ""; var imagethumbpath = ""; if(ispost){ photo = WebImage.GetImageFromRequest(); if(photo!= null){ newfilename = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName); imagepath + newfilename; photo.save(@"~\webimage\" + imagepath); imagethumbpath + newfilename; photo.resize( width: 60, height: 60, preserveaspectratio: true, preventenlarge: true ); photo.save(@"~\webimage\" + imagethumbpath); <!DOCTYPE html> <html> <head> <title> 이미지리사이징 </title>

77 </head> <body> <h1> 섬네일이미지자동추출 </h1> <form action="" method="post" enctype="multipart/form-data"> <fieldset> <legend> 섬네일이미지생성 </legend> <label for="image"> 이미지 </label> <input type="file" name="image" /> <br/> <input type="submit" value="submit" /> </fieldset> ""){ <div class="result"> <img alt="thumbnail image" /> <a target="_self"> 실제이미지보기 </a> </div> </body> </html> WebImage 폴더에 ResizeImage.cshtml 파일로저장하시고실행하세요. 아무사진이나업로드를하시면됩니다. 코드를통해처리되는내용을설명드리면, - 이미지를 form 으로업로드받고 - WebImage 개체인 photo 에 GetImageFromRequest 로이미지가로드됩니다. - Save 를통해업로드된이미지를저장하고, - 이어서 WebImage.Resize 로이미지크기를줄여 - Thumbnail 이미지를한번더 Save 하게되지요. WebImage Helper - 이미지에워터마크 (Watermark) 표시 다음으로워터마크 (Watermark) 처리를확인해보도록할게요. 이미지소스에대한보호, 불법적인이미지도용방지등의 목적으로보통이워터마크방식을이용하게됩니다. 예제를보면서설명드리도록하겠습니다.

78 @{ var imagepath= ""; WebImage photo = new WebImage("images/photo.jpg"); if(photo!= null){ imagepath = "images/photo.jpg"; photo.addtextwatermark("photo by - 워터마크 ", fontcolor:"yellow", fontfamily:"arial"); photo.save(imagepath); <!DOCTYPE html> <html> <head> <title> 워터마크이미지처리 </title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1> ""){ <div class="result"> <img src="@imagepath" alt="image" /> </div> </body> </html> WebImages 폴더하위에 watermark.cshtml 로저장하세요. 실행을위해선 WebImages 폴더아래 images 폴더에 jpg 파일을두세요. 저는위의코드처럼 photo.jpg 파일로두었습니다. 이파일에대해워터마크를찍는처리입니다. 코드진행에대해선설명이많이필요하지않으실듯합니다. 이렇게 WebImage.AddTextWatermark 를호출해텍스트기반워터마크추가가가능합니다. 또한, WebImage.AddImagesWatermark 를이용하면이미지를이용해워터마크처리가가능해집니다. 이렇게, Razor 는즉각적인이미지처리가가능한 Helper 등을통해, 손쉬운이미지기반처리를가능하게개발자편의성을제공하고있어요. - 생유생유 ~ 실행결과는아래처럼보이실겁니다.

79 아래쪽에이렇게아래쪽에 Watermark 텍스트가찍히실거에요. ( 오늘도자식자랑성공 ~ 아자 ~ 텨텨텨 ~) 이렇게간단히이미지 Resize, 워터마크처리에대해서알아보았습니다. 다음으로는웹에서실행가능한 Video 처리에대해서소개해드리도록하겠습니다. WebMatrix & Razor 에서 Video helper 로 Flash, Silverlight, WMV 비디오나어플리케이션실행 느끼시는것처럼, Razor 에서는 Adboe Flash 비디오와 WMV 비디오파일 ( 스트리밍도 ) 플레이도가능하며 Microsoft Silverlight 파일인 xap 파일도처리가가능합니다. 이번소개에서는간단히 Silverlight 를실행해보도록하겠습니다.. <!DOCTYPE html> <html> <head> <title>silverlight Video 실행 </title> </head> <body>

80 @Video.Silverlight( path: " width: "300", height: "200", bgcolor: "Black", autoupgrade: true ) <p> Silverlight 실행 </p> </body> </html> 웹사이트상위에 Video 폴더를만들고, 여기에 Silverlight.cshtml 파일로저장했습니다. 정확히 Flash 나 Silverlight, 미디어플레이어와같은처리에사용되는조금은복잡한 HTML 인 <OBJECT> 태그를자동으로 생성해주는처리라고보시면됩니다. 위와같이 Video 를실행하면실버라이트를 HTML 에서수행토록하는아래코드가 생성되지요. <object width="300" height="200" type="application/x-silverlight-2" data="data:application/x-silverlight-2," > <param name="source" value=" /> <param name="background" value="black" /> <a href=" style="text-decoration:none"> <img src=" alt="get Microsoft Silverlight" style="border-style:none"/> </a> </object> 예상대로 (?) 시죠? 복잡한 HTML 코드등을자동으로캡슐화해생성해줍니다. - 개발자는여러종속성이나복잡성등을 고민할필요없이개발작업간코드를표준화, 캡슐화키셔서손쉽게개발에적용은가능할것같아요. video helper 의경우 Adobe Flash 는 swf 파일, Silverlight 은 xap 파일만처리가가능합니다. 아울러, 꼭 Video 플레이어일 필요는없습니다. swf 파일이나 xap 파일이면 ( 어플리케이션도 ) 됩니다. WMV 는자동으로미디어플레이어가붙게됩니다. 자 ~ 이렇게해서 Helper 들에대해서알아보았습니다. Helper 에대해서정리해보자면, - Helper 는웹에서사용되는여러기능들을손쉽게이용가능하도록구조화시킨모듈입니다. - 다양하고, 복잡한웹의기능을개발자가쉽게이용가능하도록돕는부품이지요.

81 이번강좌를통해 Image 처리등을보시고아마그렇게느끼셨을거에요. Razor 님은분명웹개발자의편의성을위해신경 좀써주신듯하네요. ^_^ 앞으로 WebMatrix 와 Razor 가발전하면서계속다양하고훌륭한 Helper 들이많이나오게될 예정이라고합니다. 이번강좌내용으로다양한 Helper 를사용하는방법이도움되셨길바랍니다. 그럼다음강좌인 (10) Razor 강좌 디버깅에서뵙도록하겠습니다. 감사합니다. ^_^ 참고자료 : 사용자가직접 Helper 를만들고사용하는방법 WebMatrix Helpers 종류

82 (10) Razor 강좌 디버깅 지난시간에는 (9) Razor 강좌 - Helper 소개 ( 이미지, 비디오 ) 강좌를진행했습니다. 이번시간에는바로이어서, (10) Razor 강좌 디버깅 강좌를진행하도록하겠습니다. Razor 에서디버깅 (Debugging) 웹개발이라는게워낙엮인기술들이짬뽕된, 짜장같은 (?) 영역이많아우리웹개발자분들참고생많습니다. 특히, 데이터베이스연계부분이나, 사이트제작에필수적인게시판이나 CMS 오픈소스프로젝트한두개정도는꿰고있어야하고, 디자인영역이나웹저작영역인 CSS 까지도이해가필요합니다. 그뿐인가요, 최근에는 Open API 나외부서비스연동관련기술은물론, Flash 나 Silverlight 과같은 RIA 쪽도이해가필요한상황이지요. 이런짜장들이짬뽕되어 (?) 뒹구는웹개발업무에, 다방면에걸쳐고민해야할 " 디버깅 " 은참만만한녀석이아닙니다. 이게서버의오류인지, 내려보낸 Ajax 스크립트의문제인지, 사용자브라우저환경문제인지, DB 문제인지걸러내는것만해도, 어떤경우에는고민스러울경우가많지요. 하지만 Razor 에서는조금숨돌리실만하실겁니다. WebMatrix 와 Razor 는가장최근에발표된웹개발방식인만큼, 이러한복잡한웹개발에대한디버깅을위해여러기능들을제공합니다. 저와같이 Razor 디버깅에대해서차근차근살펴보시지요 ~ Razor 와 WebMatrix 의디버깅방식을간단히정리해보면 - ServerInfo Helper 를이용해서버설정정보를일괄출력, 디버깅에이용가능합니다.(PHP 하신분들이라면, phpinfo 와유사하다고보시면됩니다.) - 10 년넘는역사를가지고있는기존 ASP.NET 의디버깅-오류정보기능을그대로이용합니다. - WebMatrix 자체제공하는 Request 처리기록을이용해오류재현등이손쉽게가능합니다. - 기존 ASP 나 PHP 의디버깅방식인출력값처리디버깅 ( 변수값찍어보기 ) 형태로도디버깅이가능합니다. - ObjectInfo Helper 를이용해추적을원하는개체정보를정확히얻어디버깅에도움을받을수있습니다. - WebMatrix 에기본포함된 SEO 리포트툴을이용해 SEO 관련오류를쉽게처리가능합니다. ServerInfo 로서버설정및환경정보조회 서버의설정이나환경정보를일괄조회해디버깅이나설치등이잘이루어졌는지등을알아볼수있습니다. 바로디버깅의 시작이지요. cshtml 동작여부역시이테스트를통해확인가능하지요. 아래처럼수행가능합니다. <!DOCTYPE html> <html> <head> <title></title> </head> <body>

83 </body> 웹사이트루트에 Debug 라는폴더를만들고하위에 ServerInfo.cshtml 파일을만들고위와같이올려두었습니다. 이렇게 ServerInfo Helper 를실행하시면, 서버의설정, 구성환경정보를한눈에보실수있습니다. PHP 에경험이있는분이라면바로감이오실겁니다. phpinfo() 와같은역할을수행한다고보시면됩니다. 다음으로 ASP.NET 디버깅인터페이스를봐보도록할께요. Razor 는 10 년동안서비스된 ASP.NET 의정확하고상세한오류페이지정보를이용합니다. Razor 는 ASP.NET 의성능과안정성에 PHP 처럼, 아니제경험상 PHP 이상으로더쉬운개발방식을제공하는기술입니다. 기본베이스엔진을 ASP.NET 으로이용하기때문에근간이되는디버깅이나오류정보를확인가능하지요. 예를들어, Razor 로데이터베이스삽입을하다가이런오류가발생한다면.( 예시오류입니다. 재현하려애쓰지마세요 ~ ^_^;;;)

84 개발하면서이렇게잘뽑혀져나온오류정보만슥슥 ~ 읽어도어디코드가어떤오류를유발했는지예측과확인이가능합니다. 상세한추적을원할경우에는 Call Stack 정보를보셔도어떤루틴을타다가오류가발생했는지도확인가능하지요.( 물론대부분의운영-Production 환경에서는이런화면은내부적으로저장만시키고, 예쁜일반사용자대상 UI 의화면을출력하고계실겁니다.) 잊지마세요, Razor 는어느날뚝딱나타난아이돌같은녀석이아니라 ASP.NET 이라는엄청난스폰서 (?) 가뒤에서후원 해주고있으며마이크로소프트가차세대웹개발기술의한축으로엄청나게밀고있는녀석이라는것입니다. WebMatrix 에서제공하는 Request 처리요청로깅을이용한디버깅 이거는이 WebMatrix 개발도구의기능인데요. 개발하는과정에서로깅기능을이용해발생하는오류를확인 / 상세한오류 해결을위한가이드도제공이가능합니다.

85 이렇게, WebMatrix 왼쪽하단의 Site 섹션을선택하고, 왼쪽위의 Requests 를선택하고상단의 Capture Request 가선택 되어있다면 - 기본선택개발간발생한요청처리를자동기록해확인가능합니다. 만약오류가발생한게있다면해당요청을 클릭하세요. 바로상세정보와오류의해결방안에대한추천가이드까지제공받을수있습니다. 와우 ~ 예전같으면, 개발환경일지라도, IIS 웹로그열어죽어라파거나오류보고루틴을직접만들어이용하셨을겁니다. Razor 에서는그럴필요없어요 ~ 넵 ~ 나름훌륭합니다. 개발환경에서이용하기에는아주딱이실겁니다. 출력값처리디버깅 ( 변수값찍어보기 ) 기존 ASP 나 PHP 의디버깅방식인출력값처리디버깅을물론해보실수있습니다. 예를들어, var weekday = DateTime.Now.DayOfWeek; if(weekday == "Saturday") { <p>" 토요일 "</p> else { <p>" 아마일요일 "</p>

86 debug 폴더하위에 output.cshtml 파일로저장하고실행했습니다. 아마도, if 문에서형변환 (Casting) 관련오류가발생했을 겁니다. var weekday = /* if(weekday == "Saturday") { <p>" 토요일 "</p> else { <p>" 아마일요일 "</p> */ 아마도, 를찍어보는처리를하실수있을겁니다. 이런방식을찍어보는, 출력디버깅방법이라고 보통이야기합니다. 타입형변환관련이슈이기때문에 weekday 개체가어떤타입이길래? 이런정보도궁금하실겁니다. 이럴때 ObjectInfo Helper var weekday = /* if(weekday == "Saturday") { <p>" 토요일 "</p> else { <p>" 아마일요일 "</p> */

87 찍어보니 weekday 는 "DayOfWeek" 형이네요. String 과비교하려했으니안됩니다. 따라서, String 타입으로형변환하면 var weekday = DateTime.Now.DayOfWeek; //@ObjectInfo.Print(weekday); if(weekday.tostring() == "Saturday") { <p>" 토요일 "</p> else { <p>" 아마일요일 "</p> 이렇게 ToString 으로형변환해처리가잘되는것을확인가능합니다. 이런출력디버깅방식도가능합니다. 참고로, 웹개발경험이많으신분들만을위한부가설명... 웹개발경력자분이시라면, Break point( 중단점 ) 을걸고단계별로따라가면서오류를확인하고싶으실경우에는무료로제공되는 Visual Web Developer Express( 무료웹개발버전의비주얼스튜디오 ) 나 Visual Studio 이용해개발하시면가능합니다. 이강좌는 WebMatrix 와 Razor 강좌로 Visual Studio 디버깅은보여드리기좀그렇네요. 하지만, 나중에따로, WebMatrix & Razor 강좌마무리후에준비해보여드리도록할께요. ^_^ - 아알고있으시지요? Visual Studio 에서도 ASP.NET MVC3 부터 Razor 개발이가능합니다. 참고자료 : Introducing ASP.NET MVC 3 (Preview 1) - 영문위내용은본강좌와무관하니, 그냥그러려니하고넘어가셔도됩니다. Razor 를위해 MVC 나 ASP.NET 을모두이해하실필요는없습니다. WebMatrix 에기본포함된 SEO 리포트툴을이용해검색엔진과맞지않는 SEO 관련오류를쉽게처리가능합니다. 예전에 WebMatrix 소개동영상강좌에서언급해드렸습니다만, 요즘은웹사이트에대한사용자유입에검색엔진만한게없지요. 이검색엔진에의해잘검색되도록 SEO 관련처리도많이하고계실겁니다. 이 SEO 최적화를검사하는게만만치않고고가의유료서비스등을이용해야할수있는데요. IIS7 과 WebMatrix 에서는이런 SEO 최적화기능을제공하고있습니다. 참고자료 : [ 동영상강좌 ] (2) WebMatrix 5 분리뷰 ~ IIS7 의 SEO Toolkit 소개

88 왼쪽아래 Reports 를선택하시고, 웹사이트를선택하시면이렇게자동으로리포트를만들고, SEO 최적화를위한상세한 가이드라인까지알려줍니다. - 훌륭하죠 ~ 이러한 SEO 관련작업도 WebMatrix 와내장해서제공하고있습니다. 자 ~ 이렇게해서 WebMatrix 와 Razor 가제공하는디버깅방안과접근절차에대해서소개해드렸습니다. 기존웹개발 경험이있는분들은쉽게감이오실것같아요 ~ 개인적인소견으로 Razor 는어떤면에서는 PHP 의디버깅장점과 ASP.NET 의디버깅장점들을모두가지고있다고느껴지네요. ^_^ 그럼다음강좌는마지막 WebMatrix & Razor 하는강좌 (11) Razor 강좌 - 캐시처리에서뵙도록하겠습니다. 감사합니다. ^_^ 참고자료 : IIS7 의 SEO Toolkit 소개 Introducing ASP.NET MVC 3 (Preview 1)

89 (11) Razor 강좌 - 캐시처리 지난시간에는 (10) Razor 강좌 디버깅 강좌를진행했습니다. 이번시간에는바로이어서, (11) Razor 강좌 - 캐시처리 강좌를진행하도록하겠습니다. 웹개발에서캐시 (Cache) 란? 캐시소개 웹개발에서캐시를간단히소개해드리자면, 엄청나게많은사용자가몰리는웹사이트에서매번웹페이지정보를 데이터베이스나외부의서버와연동해동적으로생성해사용자에게제공할경우웹서버의성능이아무리좋아도사용자가 몰리게되면성능이저하될수밖에없습니다. 캐시는이렇게대규모트래픽이몰리는웹사이트에서웹페이지를웹서버의메모리에일정시간, 또는특정조건으로 저장하고있다가재사용하는기술입니다. 예를들어, 나의웹사이트에서날씨정보를보여주는경우를생각해보세요. 날씨정보가기상청등에서전달되지만, 매분, 매초마다새로운정보가오는건아닐거에요. 아마도, 대략, 한두시간정도에한번정도정보가오겠죠. 이정보를매번동적으로우리웹사이트에서제공하는것보다캐시로한시간에한번만동적으로정보를만들고, 한시간동안은캐시된정보를제공해도문제없으실거에요. 어떠세요? 캐시기능좋아보이시죠? 하지만, 캐시기능을잘못사용할경우에는더큰문제가발생할수도있습니다. 캐시사용시주의사항 예를들어, 초단위로정보신속성을주로제공해야하는증권시세정보제공이나속보뉴스를제공해야하는포털의뉴스 속보섹션같은경우에는이런캐시기능을이용해 한시간동안캐싱해라 ~ 이렇게설정한다면문제가될겁니다. 정보의 성격과서비스성격에따라캐시구성을달리하셔야합니다. 이제대략캐시에대해감이잡히셨는지요? 이렇게캐시는웹개발에서트래픽이몰리는대규모웹사이트에필수적인기능이고, 캐시를사용해도괜찮을지결정여부가 매우중요한포인트입니다. 그렇다면 Razor 와캐시가어떤관계가있을까요? Razor 의캐시지원 WebCache Helper Razor 는가장최신의웹개발방식으로페이지에대해손쉽게이용가능한캐시기능을제공합니다. 이는 WebCache Helper 를통해구현가능하며아래의예제를통해살펴보도록하겠습니다.

90 @{ var cacheitemkey = "Time"; var cachehit = true; var time = WebCache.Get(cacheItemKey); if (time == null) { cachehit = false; if (cachehit == false) { time = DateTime.Now; WebCache.Set(cacheItemKey, time, 1, false); //1 분동안캐시 <!DOCTYPE html> <html> <head> <title>webcache Helper 예제 </title> </head> <body> (cachehit) 캐시에서정보를찾았습니다. else 캐시에서정보를찾지못했습니다. </div> <div> 에캐시되었습니다. </div> </body> </html> 웹사이트최상위에 Cache 라는폴더를만들고 cache.cshtml 파일로저장해실행했습니다. WebCache 는캐시설정을돕는 Helper 입니다. 시간을 1 분으로구성해캐시되도록구성했기때문에처음요청하면캐시가잡히고, 1 분간은캐시된페이지를보시게

91 될겁니다. 이어서, 1 분이지나한번더리프레시하시면캐시가만료 (Expire) 되었기때문에새로운페이지를보시게 될겁니다. Razor 는우리웹개발자에게손쉬운페이지캐싱제어를위해이런 WebCache Helper 캐시기능을사용하기간편하게 제공하고있습니다. Razor & WebMatrix 기본시리즈강좌를마치면서 짧은시간이지만, 시리즈 Razor 기본강좌를제공해보았습니다. 강좌를하면서받은느낌은참웹개발자를위한깔끔한작한기능들을제공하는녀석이구나 생각이들었어요. Razor 를한마디로말씀드리자면, ASP.NET 만큼안정적이고빠르며 PHP 만큼개발하기쉽다고할까요. 다음으로는컬럼이나팁강좌형태로부족했던내용을보충해드리려고생각하고있습니다. ASP 나 ASP.NET 그리고 여건이된다면 PHP 개발자분들을위한 Razor 강좌도생각해보고있구요. 다음강좌도기대해주세요 ~ 앞으로도계속 Razor 와 WebMatrix 의발전이기대됩니다. ^_^ 우리모두화이팅!

92 (12) Razor 강좌 SMTP 메일전송 (Live 메일과 Gmail 지원. SSL 지원 ) 개인적으로궁금하기도했고, 나름필요한게메일서비스인지라추가강좌하나더올려봅니다. Razor 에서 SMTP 메일전송 참고로, Auth SMTP( 인증 SMTP) 를이용가능하고 SSL 을이용하는 Live 메일 (MSN 메일 ) 이나 Gmail 도이용가능합니다. 저는 Live mail 로해보도록할께요. 이강좌를보시는개발자분들이라면, Live 메신저 (MSN 메신저 ) ID 는하나씩있으실 //Live 메일테스트입니다. (gmail 도됩니다.) // 시작하기전에 Live ID(MSN 메신저 ID) 로메일접속을테스트해보세요.( 계정비활가능성 ) //Live 메일테스트는 에서로그인해보세요. //gmail 테스트는 에서로그인해보세요. try { // Mail Helper 사용 //SMTP 서버주소 - Live 메일이나 gmail 도됩니다. gmail 의경우 smtp.gmail.com Mail.SmtpServer = "smtp.live.com"; //SMTP 서버포트 (Live 메일과 gmail 모두같음. gmail 공식문서로 SSL 은 465 인데여하간 587 도됩니다. 아래참고자료 ) // 대부분의 ISP 가스팸방지목적으로 25 번포트를막기때문에요즘의 SMTP 제공자는 SSL 이나 587 를기본지원합니다. Mail.SmtpPort = 587; // SSL 사용여부 (Live 메일과 gmail 모두같음 ) Mail.EnableSsl = true; // 라이브 (MSN) 메신저주소를넣으세요. Live ID 는 주소입니다. //gmail 은 gmail ID 메일주소 Mail.UserName = "Live ID 를넣으세요 "; // 라이브 (MSN) 메신저주소를넣으세요. Live ID 는 주소입니다. //gmail 은 gmail ID 메일주소

93 Mail.From = " 보내는 - 메일 - 주소 - Live ID( 라이브 (MSN) 메신저 ID 를넣으세요.)"; Mail.Password = "Live-ID 의 - 암호 "; // 메일전송 Mail.Send( to: " 받는-사람-메일-주소 ", // 받는사람메일주소 - 자신에게보내도되요. subject: "SQLER 의 Razor 메일전송강좌 ", body: " 메일전송성공 " ); <text> <b> 이메일전송성공 </b> 메일이전달되었습니다. </text> catch (Exception ex) { <text> <b> 이메일전송실패 </b> 아마도메일관련구성이잘못된것같습니다. 다시확인해보세요. <br /> 오류메세지 <br </text> 웹사이트최상위에 Mail 폴더를만들고 MailProcess.cshtml 로만들고실행했습니다. Live Mail 과 Gmail 모두 SSL - SMTP 를지원합니다. Razor 는기본적으로이를지원하구요. 가능한예제코드에주석으로 설명해두었으니, 복사해실행해보시면도움되실겁니다. 여담으로... 요즘은추세가, 호스팅사나자체적으로 SMTP 를메일서버를운영하기보다는이런서비스의무료 SMTP 를이용하는게추세인듯합니다. 특히, Windows Live 관리센터나 google apps 를이용하면우리회사나커뮤니티의도메인을이용하는메일주소로메일서비스전체이용이가능하지요. 윈도우라이브메일을이용하면, 웹기반이아니라클라이언트어플리케이션으로동작해오프라인에서메일도볼수있고, 다양한편의기능을활용가능합니다. 모두무료로, 우리회사의도메인을사용하는메일주소를무료로직원에게그냥생성가능하고, SMTP 도지원하며, * 무료 * 로다양한기능의메일클라이언트어플리케이션도지원해편리합니다.~

94 Windows Live 관리센터 ( 구. Custom Domains) 가 3 번째물결을탔습니다 윈도우라이브메일 Razor 는기본적으로 Mail Helper 로이런 SSL SMTP 를지원하기때문에이런메일서비스들과연동하기도쉬울것같아요. 감사합니다. SMTP 구성관련참고 라이브메일 (Hotmail) SMTP 관련정보 영문 GMail SMTP 관련정보 - 영문

95 (13) Razor 강좌 웹사이트전체, 또는폴더내파일요청시항상실행되는모듈 쓰다보니강좌가조금씩늘어나네요. 나름꼭필요할내용으로예상되어두개의강좌를추가했습니다. 웹사이트를개발하다보면, 모든페이지요청에대해처리해야하는공통모듈이반드시있습니다. 예를들어, 데이터베이스연결문자열 과같은 전역변수 와유사한정보들을처리해야할경우가있습니다. 또는, 에러처리루틴을 폴더별로정의해쓰기원하실경우에는 폴더마다 폴더하위의파일실행시마다동작되길원하는처리가있을것입니다. Razor 에서는웹사이트전체페이지요청시동작하는모듈 _start.cshtml 과폴더별로요청시항상처리되는모듈인 _inti.cshtml 이존재합니다. 웹사이트전체아무페이지나요청시동작하는모듈 _start.cshtml 강좌내용진행을위해꼭아래흐름을이해하시면좋을것같아요. 사용자요청이들어올때만약 _start.cshtml" 이존재하고, 처음요청이경우실행하고, 이어서요청된페이지가처리됩니다. _start.cshtml" 파일이존재하지않거나, 처음요청이아닐경우에는실행되지않습니다. ( 꼭 cshtml 만가능한건아닙니다. vbhtml 도당연히됩니다. 편의상 cshtml 로적었습니다.^_^;;;) 주의 당연히, 모든페이지요청시실행되는모듈이 _start.cshtml 파일에오류가있으면전체웹사이트실행에서오류가발생할 수있습니다. 사용에주의하세요. 참고 페이지파일앞에 _ 즉, 언더바가있을경우에이파일은사용자의직접적인요청에의해실행되지않습니다. 다른파일 요청에의한참조로만동작하게됩니다. 그렇다면, 예제를통해살펴보도록하겠습니다.

96 @{ AppData["customAppName"] = "SQLER 웹사이트 "; 현재웹사이트의루트에 _start.cshtml var appname = ApplicationInstance.Application["customAppName"]; <!DOCTYPE html> <html> <head> <title> 웹사이트의이름을보여주세요 ~</title> </head> <body> <h1>@appname</h1> </body> </html> 웹사이트의루트에 AppName.cshtml 파일로저장하고실행합니다. 실행해보니감이오시죠? 제가실행한건 AppName.cshtml 파일인데 _start.cshtml 페이지에전역으로구성한변수인 customappname 의값을불러와개별페이지에서이용가능합니다. 이렇게, 전역변수로사용가능한처리를이용하시면 유용합니다. 조금실전적인 (?) 전역변수처리예제를소개해드리려고해요. 또하나의 Helper 인 recaptcha Helper 를이용하는예제를살펴보도록하겠습니다.( 캡차는악의적인봇을걸러내스팸등을사이트에서실행하지못하도록사람인지검사하는기능입니다. 아마사이트댓글쓰기나포털카페가입시나오는숫자나단어를넣으라는처리보셨을거에요. 그게캡차입니다.) 국내에서는좀뜸하지만, 해외에서기본캡차로많이쓰이는 recaptcha 를이용해볼게요. Helper 하나더공부하는셈 ~ 치시면될겁니다. 사용을위해등록을해야합니다. 사이트에접속합니다. 웹사이트에대해계정을생성 ( 구글계정이용 ) 하시면 publickey 와 PrivateKey 문자열이나오게됩니다. 이문자열을복사해이용하시면됩니다. ( 참고로, Razor 의 Helper 는 Helper 는누구나추가로만들어사용이가능합니다.) recaptcha helper 사용에필요한문자열을 _start.cshtml // 국내외에서캡차로많이쓰이는 recaptcha 사이트에접속합니다. // 웹사이트에대해계정을생성 ( 구글계정이용 ) 하시면 //publickey 와 PrivateKey 문자열이나오게됩니다. // 이문자열을복사해이용하시면됩니다. ReCaptcha.PublicKey = "PublicKey 문자열을복사해넣으세요."; ReCaptcha.PrivateKey = "PrivateKey 문자열을복사해넣으세요.";

97 루트폴더에위치한 _start.cshtml var showrecaptcha = true; if (IsPost) { if (ReCaptcha.Validate()) 통과! 사람이군요!!! showrecaptcha = false; 너봇이지?! <!DOCTYPE html> <html> <head> <title> 캡차처리 Test 페이지 - 단어를정확히입력하세요.</title> </head> <body> <form action="" == true){ if(recaptcha.privatekey!= ""){ <p>@recaptcha.gethtml()</p> else { <p> 아마도인증키가틀리거나오류가있는것같습니다. 다시확인해보세요. </p> <div> <input type="submit" value=" 실행 " /> </div> </form> </body> </html> Recaptcha.cshtml 파일로저장하고실행합니다.

98 단어를넣고처리가되면통과하게됩니다. 이렇게간단히 _start.cshtml 를이용한전역변수처리를알아보았습니다. 다음은웹사이트전체가아니라, 폴더내파일들에대한처리를알아보도록할게요. " 폴더 " 내파일요청시항상실행되는모듈 - _init.cshtml 전체웹사이트에대해처리되는공통모듈인 _start 와달리 " 폴더 " 하위에위치하는페이지파일들에대해서만처리될필요가있는경우가있습니다. 이때사용하는처리가 _init.cshtml 입니다. 웹개발경험이있는분들은바로감이딱오실거에요. 이녀석이사용되는대표적인경우도느낌이오시죠? 예 ~ 바로사용자정의에러처리일거에요. 흐름은어렵지않습니다. 아래를꼭이해해주세요.

99 _start 처리모듈은위에서설명해드린것과같습니다. 이어서, 폴더안에 _init.cshtml 파일이위치하게되면해당파일을 실행하고실행후에사용자가요청한페이지가실행되게됩니다. _start 와달리 _init 에서는 RunPage() 를실행해요청될페이지를그위치에서실행하게됩니다. 왜이런경우가있는고 하니, 개발경험이있는분이라면에러핸들시 try 에서시도할경우입니다. 감이팍팍오시죠? 그럼간단한예제를통해 PageData["Color1"] = " 빨강색 "; PageData["Color2"] = " 파랑색 "; 웹사이트루트에 _init.cshtml PageData["Color2"] = " 노랑색 "; PageData["Color3"] = " 초록색 "; InitPages 라는폴더를만들고이폴더에 _init.cshtml InitPages 폴더에 default.cshtml 파일을만들고실행합니다. InitPages 폴더의페이지를요청했는데루트폴더의 _init 파일과 InitPages 폴더의 _init 파일이모두실행됩니다. 그럼 Color2 는어떻게나오나요? 계층처리로종단에위치한값, 노랑색 이출력됩니다. 감이오시지요? 그렇다면, 기대하고 있으실에러핸들처리를해보도록할게요. _init 을이용한폴더내페이지실행시에러처리모듈 <!DOCTYPE html> <html> <head> <title> 오류가발생했습니다.</title> </head> <body> <h1>sqler 고객님불편을드려죄송합니다. 조속히오류를해결하겠습니다.</h1>

100 <p> </html> </body> 웹사이트루트폴더에 Error.cshtml try { RunPage(); catch (Exception ex) { Response.Redirect("~/Error.cshtml?source=" + HttpUtility.UrlEncode(Request.AppRelativeCurrentExecutionFilePath)); 루트폴더에 InitCatch 폴더를만들고 _init.cshtml var db = Database.OpenFile(" 오류유발 - 없는 DB 를열기위해시도 "); InitCatch 폴더에 Exception.cshtml 파일로저장합니다. 이어서, 에러를발생시키는 Exception.cshtml 파일을실행하세요. 감이오시는지요? InitCatch 폴더의 _init 중간 RunPage() 가수행되어요청된페이지인 Exception.cshtml 이실행됩니다. 오류가발생하고오류는핸들되어루트의 error 페이지로 redirect 되며쿼리문자열로에러페이지정보를전달하게됩니다. error.cshtml 페이지는넘겨받은에러페이지정보를출력하게됩니다. 여담으로, 웹개발자분들을위한참고 이렇게폴더내오류처리와같은모듈을쉽게사용가능한처리가 _init.cshtml 입니다. 만약, 웹개발경험이많으시고좀더다듬어진 error 를구현하고싶다면, 적절히 error 핸들페이지에 catch 된 exception 개체의에러정보를 string 으로변환해넘겨서가공후사용자에게보여주고, 이어서관리자에게오류에대해자동알림기능 (SMTP 메일이나 SMS 전송 ) 도가능할겁니다. 도움되시길바라며, 다음강좌에서뵙겠습니다. 참고자료 : 사용자가직접 Helper 를만들고사용하는방법 영문

101 (14) Razor 강좌 - URL 라우팅 (Routing) 으로 SEO 최적화구현 이번에소개해드릴내용은, Razor 의 URL 라우팅관련내용입니다. 아마블로그나최신의오픈소스 CMS 를이용해보신 분들은이런 SEO 와 Fancy URL 이나 Permanent URL 에대해서잘아실겁니다. 복잡하고, 프로그래밍친화적인 URL 보다는사용자와검색엔진에친화적인 URL 을이용하는방법을의미합니다. 특히, 콘텐트사이트트래픽유입에가장큰기여를하는녀석인검색엔진이이런 SEO(Search Engine Optimizer) 차원에서 URL 에높은가중치를두고있기때문에최근웹사이트제작에기본요소이기도합니다. Razor 는가장최신의웹개발방식입니다. 당연히기본이런 SEO 제공을위한 Fancy & Permanent URL 을이용하는 기능을기본제공합니다. 바로 URL 라우팅 기능입니다. 바로상세히알아보도록하지요. var FruitName = UrlData[0].ToString(); <!DOCTYPE html> <html> <head> <title>url 라우팅 </title> </head> </body> </html>

102 루트폴더에 fruit.cshtml 파일을만들고, 아래링크와같이 URL 을만들어실행합니다. 사과 ( 링크로사용하는서버나포트가저와다를수있습니다. 조절해넣으세요.) 그럼결과가보이실겁니다. " 사과 " 가잘찍혀나오시지요. ^_^ 제가만든파일은분명 fruit.cshtml 파일이고, 라우팅을위한아무처리를안해도자동으로 URL 라우팅을해줍니다. 이럴때 Razor 참땡큐하죠. 다른기술이라면라이브러리를만들어쓰거나, 라우팅을웹서버플러그인 rewrite 모듈로구현해야하는데, 이걸그냥쉽게종속성이나귀찮은거없이자체해결해줍니다. 그리고, 파라미터값처리를위해 UrlData 만쓰면땡이죠. 그런데, 만약, 진짜 사과 /default,cshtml 과같은파일이존재한다면어떻게될까요? UrlData 가 어떻게도움을주는건지? 그렇다면, 이런자동라우팅이어떤우선순위에의해동작하는지이해할필요가있습니다. 아래라우팅우선순위를참고하세요. 이런살짝아리까리한폴더와파일들이위치하고있다고가정해보세요. 폴더이름과파일이름에주의하셔야할겁니다. URL 요청이들어올경우에다음과같은순서로라우팅이처리합니다. 해당단계에맞는파일이없다면이어서아래파일을찾는절차를진행하게됩니다. (1) /a.cshtml 파일이존재할경우 b/c 값이 UrlData 로전달됩니다. (2) /a/b.cshtml 파일이존재할경우 c 값이 UrlData 로전달됩니다. (3) /a/b/c.cshtml 파일이존재할경우아무값도 UrlData 로전달되지않습니다. 그냥실행만됩니다. cshtml 파일매칭이없을경우다음순서로파일을찾게됩니다. (4) /a/b/c/default.cshtml 파일을찾게됩니다. (5) /a/b/c/index.cshtml 파일을찾게됩니다. 이렇게간단히 URL 라우팅기능을알아보았습니다. Razor 의 URL 라우팅기능, 어떠세요? 깔끔하게느껴지시나요? 앞으로도많은좋은내용으로인사드리겠습니다.