안녕하세요. 코난 김대우 입니다.
지난 2011년 1월 14일에 WebMatrix 정식버전(RTW)이 발표되었으며, 이 문서의 내용은 최신의 WebMatrix 정식버전에 맞춰 수정 되었습니다. 감사합니다.
- 최종 수정일 : 2011년 1월 19일

================================================================================


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

 

코난이와 함께하는 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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에서 실행해 보세요~ 결과는 아래 처럼 보이실 겁니다.

 

reuse01.png

 

넵. 우리네 웹사이트에서 일반적으로 사용되는 구조라고 가정해 보도록 하겠습니다.

 

그렇다면, 저 헤더 영역과 바닥 영역이 거의 모든 페이지에서 공통으로 사용되는데요. 재사용 가능한 저런 영역을 분리해 사용 하면 웹사이트 개발이 편리하지 않을까요? 넵, 웹개발 경험이 있는 분들은 바로 감이 오실 겁니다. include 처리죠.

 

Razor에서 이런 공통 모듈 처리 - 재사용 가능한 웹페이지 영역 제작을 해 보도록 하겠습니다.

 

먼저 WebMatrix에서 간단히 폴더를 만들어 볼께요. 간단히, 최상위의 WebSite1 폴더에서 마우스 우버튼 - "새 폴더" 하시거나, 메뉴바의 "새로 만들기" 버튼 아래를 클릭해 "새 폴더"를 하셔도 됩니다. - 저는 Resue 라는 폴더를 하나 만들고 3개의 파일을 만들었습니다.

 

index.cshtml  : 메인영역의 콘텐츠 영역으로 사용

_header.cshtml : 공통 헤더 영역으로 사용

_footer.cshtml : 공통 바닥 영역으로 사용

 

할 예정입니다.

 

그리고, index.cshtml 파일을 아래처럼 구성합니다.

 

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

<html xmlns="http://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 구문 처리라고 보시면 됩니다.

 

 

        <div class="header">    
        이곳은 사이트 배너와 메뉴에 사용되는 공통 헤더 영역 입니다.
        <hr />
        </div>

_header.cshtml 페이지의 내용

 

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

_footer.cshtml 페이지의 내용

 

참고하세요 :

파일 이름 앞에 "_"를 넣는 이유는 사용자에 호출이 불가하며, 다른 cshtml파일에 의해 "참조만 되어 호출 가능한" 파일입니다. 직접 호출은 불가한 파일이지요. 보안성을 높이거나, 이런 참조되는 용도로 사용하시면 좋겠지요. ^_^

 

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

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

 

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

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

 

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

 

참고자료 :

ASP.NET 사이트의 Razor Tutorial 내용 3 - Creating a Consistent Look



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 강좌 - 캐시 처리
(12) Razor 강좌 – SMTP 메일전송(Live메일과 Gmail지원. SSL지원)
(13) Razor 강좌 – 웹사이트 전체, 또는 폴더 내 파일 요청 시 항상 실행 되는 모듈

(14) Razor 강좌 - URL 라우팅(Routing) 으로 SEO 최적화 구현



지난 동영상 참고 자료 :

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

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

[동영상 강좌] (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 최적화 구현






profile

부족하지만, SQLER의 누군가와 함께한 나눔을 통해 제가 더 많이 즐거웠습니다.
SQLER와 함께 즐거워 할수록, 그 나눔을 통해 더 많은 기회와 가치를 발견하게 되었습니다.
나눔의 생각이 앞으로도 계속, SQLER를 움직일 것입니다.

코난, 김대우 / SQLER 운영자 / 골라먹는 SQLER RSS 정보 구독 / 실시간 SQLER 소식 uxkorea 트위터