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

아티클
07/16/2010

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

코난이와 함께하는 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 강좌 - 캐시 처리

지난 시간에는 “(4) Razor 강좌 - 코드블록과 POST처리” 강좌를 진행 했습니다.

이번 시간에는 바로 이어서 다섯번째 강좌, “(4) Razor 강좌 - 재사용 가능한 코드 생성” 강좌를 진행 하도록 하겠습니다.

재사용 가능한 코드는 어쩌면 기존 웹 개발자 분들에겐 아주 짧은 내용이 될 것 같은데요.

바로, Include 구문과 같다고 보시면 됩니다.

이런 HTML 페이지가 있다고 생각해 보시지요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>HTML 재사용 페이지</title>
    </head>
    <body>
        <div class="header">
        이곳은 사이트 배너와 메뉴에 사용되는 공통 헤더 영역 입니다.
        <hr />
        </div>
        <h1>여기가 메인 영역 입니다.</h1>
        <p>메인 페이지 콘텐츠 영역이에요.</p>

        <div class="footer">
            <hr />
            SQLER에서 제공해 드립니다~ 공통 Footer 내용입니다.
        </div>
    </body>
</html>

아시죠? 걍 복사하시고, 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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>HTML 재사용 페이지</title>
    </head>
    <body>
        @RenderPage("_header.cshtml")
        <h1>여기가 메인 영역 입니다.</h1>
        <p>메인 페이지 콘텐츠 영역이에요.</p>
        @RenderPage("_footer.cshtml")
    </body>
</html>

보시면, 중간에 보이시지요? @RenderPage("_header.cshtml")

이렇게 @RenderPage를 이용해 파일을 해당 영역으로 불러와 합칠 수 있습니다. - include 구문 처리라고 보시면 됩니다.

_header.cshtml 페이지의 내용

        <div class="footer">
            <hr />
            SQLER에서 제공해 드립니다~ 공통 Footer 내용입니다.
        </div>

_footer.cshtml 페이지의 내용

참고하세요 :

파일 이름 앞에 "_"를 넣는 이유는 다른 파일과의 손쉬운 식별을 위해 개발 보조 차원에서 구별해 넣은 것입니다. "_"를 반드시 사용할 필요는 없습니다.

자. 이렇게 3개의 파일을 모두 저처럼 채우셨다면, 이제 실행을 해 보도록 하시지요.

아~ 당연하겠지만, WebMatrix에서 index.cshtml 페이지를 열고 실행(F12) 하셔야 합니다.

어떠세요? 분리된 파일이 하나의 페이지로 잘 보이시는지요?

넵~ 재사용 가능한 코드 생성! 많은 도움 되시길 바랍니다.

다음은 조금 더 향상된 코드 재사용 방안 - "레이아웃 페이지" 처리에 대해서 살펴 보도록 하겠습니다.