지금까지 WebMatrix를 사용해 매우 간단한 웹 페이지를 만드는 방법을 보았습니다. 그리고 다른 여러 가지의 웹 브라우저에서 어떻게 작동되는지, 뿐만 아니라 기본페이지를 더 예쁘게 바꿔주는 CSS스타일을 사용해 보았습니다.
이번에는 이 모든 것을 가지고 다음단계로 넘어가 서버프로그래밍을 할 것 입니다. 당신은 핸드폰이나 컴퓨터에서 작동하는 어플리케이션을 작성하거나, 심지어 웹 브라우저에서 작동하는 자바스크립트 어플리케이션과 같은 클라이언트 프로그래밍을 했을 것입니다. 서버프로그래밍과 다른 중요한 점은 당신의 어플리케이션 코드가 클라이언트 장치에서 작동하지 않는다는 점입니다. 반면에 최종사용자가 서버에 요청을 보내고 페이지를 실행했다면, 그리고 만약 그 페이지가 "활성화된"페이지라면 서버는 코드를 실행하고 그 코드를 HTML markup으로 생성한 뒤 브라우저로 값을 보낼 것 입니다. 그 브라우저는 HTML을 표현하고 유저는 그 결과를 볼 수 있을 것 입니다
당신의 솜씨가 성장한다면(as you grow your skills), 당신은 당신의 브라우저에서 실행되는 일부 코드로 무언가 섞여있는 것을 찾을 수 있을 것 입니다. (일반적으로 사용하는 자바스크립트, 또는 실버라이트와 같은 Rich Internet Application(RIA) 기술, 그리고 나머지는 여러분의 서버에서 실행됩니다. (*php나 asp 등을 의미하는 듯)
WebMatrix는 웹 페이지 프로그래밍을 위해 Razor문법을 제공합니다. 그리고 특징 중 하나로 단순하고 강력한 레이아웃 엔진을 제공할 것입니다. 이번 문서에서는 레이아웃의 특징을 사용해 한곳에 있는 보통의 HTML로 이루어진 <head>와 footer 내용을 자동적으로 당신의 페이지에 생성되도록 할 것 입니다. 그래서 영화 목록과 같은 페이지를 구축하게 된다면 파일은 페이지를 위한 메인 내용만 있으면 완전한 통제와 함께(with you in fully control) 나머지는 자동으로 추가됩니다.
Razor를 사용한 CSHTML 페이지 만들기
지금까지 .HTM, .HTML의 확장자의 HTML페이지를 만들어 보았습니다. 그것들은 정적인 페이지입니다. 그래서 그들의 주소가 브라우저를 통해 호출되면 서버는 그 내용을 브라우저에게 간단하게 전송합니다. 서버가 어떤 식으로든 페이지를 처리하지 않습니다.
HTML에 기반해 서버에서 만들어 진 페이지뿐만 아니라 HTML로 출력하는 페이지를 어떻게 만들어야 하는지 서버에서 동작하는 코드 같은 ‘동적인’ 웹 페이지를 들어보았을 겁니다. 동적인 페이지는 정말로 강력한 시나리오를 제공합니다. 그리고 시리즈의 나머지에 당신은 그것들을 사용할 것입니다.(and for the rest of these series you’ll be using them) 그것들 중의 하나로 데이터베이스에 영화들을 저장하는 것을 허용할 수 있고, HTML페이지로 직접 영화제목을 작성하는 것이 아니라, 목록을 변경하려면 언제든지 페이지를 변경하지 않고 서버가 데이터베이스에 당신의 페이지의 자료를 생성하게 됩니다.
이번 세션에선 당신이 처음으로 동적인 페이지를 만들게 될 것입니다.
WebMatrix에선 동적인 웹 페이지는 .CSHTML, .VBHTML 확장자를 갖습니다. 그것들은 C#(cs) 또는 비쥬얼 베이직(VB) 인라인 코드로 작성된 효과적인 HTML 파일입니다. 여기서는 C#언어를 인라인 코드로 사용 가능하게 해주는 CSHTML을 사용할 것입니다. 이것을 위한 방법론으로 레이저라고 불리우는 HTML내에서 인라인으로 허용해주는 구문입니다.(The methodology for doing this, and the syntax that allows me to do this inline within HTML is nicknamed ‘Razor’)
자 이제 하나를 만들어봅시다.
WebMatrix의 파일 작업 공간에서 movies.cshtml 이름의 CSHTML페이지를 새로 만듭니다:
WebMatrix는 기본적인 HTML페이지처럼 만들어질 것입니다. 내용을 아래처럼 바꿔줍니다:
1: <div id="movieslist">
2: <ol>
3: <li><a href="#">It’s a wonderful life</a></li>
4: <li><a href="#">Lord of the Rings</a></li>
5: <li><a href="#">The Fourth World</a></li>
6: <li><a href="#">The Lion King</a></li>
7: </ol>
8: </div>
이상하게 보이지 않나요? 여기에는 <HTML>태그가 없습니다. 여기에는 <HEAD>나<BODY>태그가 없습니다. 하지만 여전히 작동합니다! 아니면 그건 적어도 조금(a little) 작동합니다. 실행하면 아래화면을 볼 수 있습니다:
Header 와 Footer
자 이제 우리가 이전에 했던 거랑 페이지가 비슷해졌습니다. 영화 리스트가 담긴 페이지의 <div>태그 전에 들어가는 모든 HTML의 헤더(header) 페이지부분과, 그리고 <div>태그 다음에 들어가는 모든 HTML의 푸터(footer) 부분을 정의해 봅시다. <header>과 <footer>태그와 그 전에 작업했던 default.html페이지와 혼란스러워 하지 마세요
PageHeader.cshtml 이라는 페이지를 새로 생성합니다. 그리고 default.html의 <div> 위에 모든 것을 복사해 삽입합니다. 그럼 이것과 같을 것 입니다.
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="utf-8" />
5: <title>My Favorite Movies</title>
6: <link rel="stylesheet" type="text/css" href="movies.css" />
7: </head>
8: <body>
9: <header>
10: <h1>A list of my Favorite Movies</h1>
11: </header>
유사하게 PageFooter.cshtml이라고 불리우는 페이지를 생성하여 default.html의 <div> 아래의 모든 것을 복사해 삽입합니다. 그럼 이것과 같을 것입니다.
1: <footer>
2: This site was built using Microsoft WebMatrix.
3: <a href="http://web.ms/webmatrix">Download it now.</a>
4: </footer>
5: </html>
Razor을 사용하여 동적으로 Header와 Footer 삽입하기
이제 여기까지 오셨으면 당신은 처음으로 Razor을 사용하여 서버코드를 작성하게 될 것입니다. WebMatrix는 HTML과 Razor코드간의 다른 점을 ‘@’문자를 사용해 알립니다. 당신은 코드를 작성하기 전에 이 문자(@)를 위치함으로써 서버에게 무엇을 하라고 지시하게 될 것입니다.
자 예를 들어 다음의 명령어가 있습니다:
@RenderPage("pagename")은 ‘pagename’라는 HTML을 서버가 불러오게 할것입니다. 그리고 이것을 현재 파일의 위치에 넣게 될 것입니다.
그래서 이 예제를 가지고 movies.cshtml을 아래와 같이 바꾸어 봅시다.
1: @RenderPage("PageHeader.cshtml")
2: <div id="movieslist">
3: <ol>
4: <li><a href="#">It’s a wonderful life</a></li>
5: <li><a href="#">Lord of the Rings</a></li>
6: <li><a href="#">The Fourth World</a></li>
7: <li><a href="#">The Lion King</a></li>
8: </ol>
9: </div>
10: @RenderPage("PageFooter.cshtml")
페이지를 실행하면 아래와 같이 보일 것입니다:
이것은 정적인 HTML파일이 나타난 것입니다. 이것은 놀라운 것이 아닙니다. 왜냐면 이것은 같은 header와 footer, 그리고 body이기 때문입니다 (페이지에서 요구한 CSS를 포함해서). 그러나 당신이 보았듯이 이것은 페이지를 좀더 쉽게 다룰 수 있게 해주었습니다. 그리고 새로운 페이지를 만들게 되면 항상 같은 header와 footer, 그리고 스타일시트가 적용될 것입니다.
레이아웃 페이지 만들기
여기까지 오셨다면, 페이지를 만들고 Razor문법을 사용하여 header와 footer코드를 페이지에 포함시켰을 것입니다. 이것은 상향식 접근방법 입니다(bottom-up approach)
또 하나, 아마도 좀더 효과적인 접근방법이 될 것 입니다. 모든 페이지를 위한 템플릿으로 레이아웃을 만들고 사용합니다. 그리고 당신이 원하는 특정한 내용을 추가합니다. 이것은 하향식 접근방법 입니다(top-down approach)
아래에서 어떻게 했나 봅니다. _SiteLayout.cshtml 이라는 CSHTML페이지를 새로 만듭니다.
이전에 만들었던 페이지로 내용을 교체합니다. 이게 만약 익숙하다면, 이전에 만들었던 정적인 페이지인 default.html의 모든 것이기 때문입니다.
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="utf-8" />
5: <title>My Favorite Movies</title>
6: <link rel="stylesheet" type="text/css" href="movies.css" />
7: </head>
8: <body>
9: <header>
10: <h1>A list of my Favorite Movies</h1>
11: </header>
12: <div id="movieslist">
13: <ol>
14: <li><a href="#">It’s a wonderful life</a></li>
15: <li><a href="#">Lord of the Rings</a></li>
16: <li><a href="#">The Fourth World</a></li>
17: <li><a href="#">The Lion King</a></li>
18: </ol>
19: </div>
20: <footer>
21: This site was built using Microsoft WebMatrix.
22: <a href="http://web.ms/webmatrix">Download it now.</a>
23: </footer>
24: </html>
이제 movieslist 라고 적힌 <div> 태그를 아래와 같은 코드로 교체합니다.
@RenderBody()
기억하세요, 앞에서 말했던 @문자는 이 부분부터 서버에서 코드가 동작하도록 WebMatrix에서 알려주는 것입니다.
RenderBody 명령은 WebMatrix에서 이 부분에 내용이 표현(render)되도록 해줍니다.
여기 _SiteLayout.cshtml 페이지가 있습니다:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="utf-8" />
5: <title>My Favorite Movies</title>
6: <link rel="stylesheet" type="text/css" href="movies.css" />
7: </head>
8: <body>
9: <header>
10: <h1>A list of my Favorite Movies</h1>
11: </header>
12: @RenderBody()
13: <footer>
14: This site was built using Microsoft WebMatrix.
15: <a href="http://web.ms/webmatrix">Download it now.</a>
16: </footer>
17: </html>
그래서 얼마 전에 만들었던 movies.cshtml 가 페이지에 불려질 때, 내용은 <div>와 <ol><li> 리스트가 됩니다. 그러므로 당신이 CSHTML을 볼 때 WebMatrix는 이 페이지가 어떻게 그려질지 레이아웃 페이지를 통해 사용할 것입니다. 그러므로 head와 CSS, 모든 것이 레이아웃 페이지로부터 나오게 됩니다.
이것을 하기 전에, @RenderPage 명령들을 movies.cshtml로 부터 삭제하는 것을 잊지 마세요.
레이아웃 페이지가 어떻게 사용되는지 WebMatrix에게 알리기(Telling)
여기까지 집중해서 하셨다면 이런 생각을 하셨을 것입니다. _SiteLayout.cshtml에서 movies.cshtml을 어떻게 알고 사용했을까? 정답은
그렇지 않다 입니다(it doesn’t). 우리는 WebMatrix에게 알려야 합니다.
운 좋게도 이것은 생각보다 쉽습니다.
_PageStart.cshtml이라는 페이지를 만들었다면, 이 페이지는 WebMatrix에서 CSHTML(또는 VBHTML)을 실행할 때마다 호출될 것입니다. 이것에 대한 좋은 사용법은 전역변수나 함수를 지정하는 것입니다. _SiteLayout.cshtml에 의한 모든 사이트를 위한 레이아웃을 여기에 우리가 말해줄 것입니다.
그럼 가서 _PageStart.cshtml을 작성합니다.
아래와 같은 내용으로 교체합니다:
1: @{
2: Layout = "~/_SiteLayout.cshtml";
3: }
사이트를 실행하고 movies.cshtml을 브라우저를 통해 확인합니다.
모두 함께 넣기
이제 무슨 일이 생겼나요? 하나하나 차례대로 WebMatrix가 당신의 페이지를 어떻게 실행했는지 확인해보겠습니다.
- 브라우저가 movies.cshtml을 서버에 요청했다.
- 서버는 _PageStart.cshtml 이 존재하는지 확인하고, 실행한다. 이것은 한 줄의 코드이고, _SiteLayout.cshtml 파일을 레이아웃으로 하기 위해 Layout변수를 지정한다.
- 서버는 페이지의 레이아웃으로 SiteLayout.cshtml을 실행한다. 이것은 head와 CSS, <body>태그와 같은 정적인 HTML페이지에서 예상할 수 있는 모든 것을 제공해 준다.
- movies.cshtml 내용을 페이지의 위치에 삽입하는 @RenderBody()태그를 확인하여 읽는다.
- 서버는 _SiteLayout.cshtml에서 나머지 부분을 읽어 footer와 같은 </body>와 </html> 닫는(closing) 태그의 마무리를 하게 된다
- 스타일링까지 완료된 페이지가 브라우저로 반환된다.
다른 페이지 추가하기
이 방법의 장점은 분명 당신이 다른 페이지를 작성할 때의 일의 양을 통해 증명해 줍니다.
WebMatrix를 사용해 about.cshtml 페이지를 생성합니다.
about.cshtml의 내용을 아래와 같이 교체합니다:
1: <h1>About me</h1>
2: <h2>I’m the author of this page. I should put something interesting here.</h2>
3:
about.cshtml을 보게 된다면 _SiteLayout.cshtml이 @Renderbody()에 접근하는 것만 제외하고 이전의 세션에서 실행한 것과 같은 프로세스로 내용이 표현될 것입니다. 그 결과는 다음과 같습니다:
페이지의 타이틀과 footer가 남아있는 것이 보이나요? 만약에 About 페이지를 편집하고 싶다면 페이지를 작업하는데 많은 시간을 빼앗길 필요가 없습니다. 단순히 메인 부분의 본문을 수정하면 됩니다. 이것은 사이트를 만드는데 많은 시간을 절약해줄 것입니다
이것은 WebMatrix에 포함된 레이아웃을 가지고 당신이 할 수 있는 빙산의 일각입니다.
요약
이번 챕터에서는 WebMatrix에서 모든 페이지에 자주 쓰이는 코드를 레이아웃 파일에 넣어서 사이트 제작을 좀더 쉽게 해주는 레이아웃 구조를 어떻게 사용하는지 보았습니다. 또 C#의 Razor문법을 사용하여 처음으로 동적 페이지도 만들었습니다.
다음 챕터에서는 정적인 영화 목록을 데이터베이스의 목록으로 교체하는 좀더 깊은 Razor문법을 해볼 예정입니다. WebMatrix 에서는 무료이고, 파일기반의 데이터베이스이고, 또한 데이터를 만들고 관리하는 데이터베이스 도구 셋트를 가지고 있는 SQL Server Compact 데이터베이스를 통합하였습니다. 이제 데이터베이스를 만들고, 필드를 추가하고, 데이터를 추가하고, 사용자가 언제든지 페이지를 호출해서 데이터를 쓸 수 있게 하는 코드를 작성해볼 예정입니다.
Recent Comments