많이 기다리셨죠? 아닌가.. 하루만에 급강좌?


어쨌든 이번에는 낸시로 MVC를 완성하는 방법을 배워 봅시다.


그전에 준비물이 있다면 바로 뷰엔진입니다.

하지만 아까 프롤로그에서 언급했듯이 낸시는 제시카와 다르게 자체 뷰 엔진을 제공하고 있습니다.

SuperSimpleViewEngine 인데 레이저 삘 나보인다구 얘기했죠.


하지만 별도로 뷰 엔진을 선택하면 Razor 나 Spark 등 익숙한 뷰 템플릿을 사용할 수 있습니다.

낸시는 뷰 엔진을 간편하게 확장할 수 있는 인터페이스를 제공하는데, 각 뷰 엔진별로 정말 신경 많이 썼습니다.

그 중 가장 많이 쓰는 Razor 과 Spark 엔진에서 많은 기능 향상과 최대한의 사용을 목표로 하고 있고, 많이 발전했습니다.

물론 아직 부족한 부분도 있죠. Razor 의 경우 Helper 구문이 아직 지원되지 않는다고 합니다. 이 문제는 0.12.0 에 개선될 예정이라는군요.

하지만 헬퍼가 없어도 쓰는데 큰 지장은 없죠. 레이아웃만 되도 감지덕지해야 해야죠.ㅋ


이번 강좌는 당연히 Razor 뷰 엔진을 통한 MVC 완성을 해보겠습니다. 김대우형님도 따라하기 쉽도록!

오늘도 nuget packages 를 엽니다. 프로젝트에 오른쪽 마우스... 아오 쓰기 귀찮아.


capture2.png


정렬 기준 보이십니까? Most Downloads 순. 즉, 많이 다운받은 순입니다.

역시 Razor 의 위엄이 돋보이는군요. 많이 사용하고 있습니다.

Install 로 깔아주세요~

또는 Nancy 소스를빌드하신 경우, 저 이름이 네임스페이스니까 직접 찾아서 넣어주시면 되겠습니다. 일일이 경로 안알려줘도 구조화가 잘 되어서 금방 찾을겁니다.


자.. 뷰 페이지를 만들어 보겠습니다.

capture4.png

Views 폴더를 만들어 주시고.. 근데 웹 응용에서는 Razor 파일을 못만든다는 문제가 있습니다.

별 수 있나요.. HTML 파일을 선택하고 확장자를 cshtml 로 하면 되겠습니다.

capture3.png  

아무렴 어때요. 자 이제 편집을..........

capture5.png 

일단 cshtml 파일 편집은 지원됩니다. 서비스팩 1 까셧다면 당연히 지원될겁니다. 이제 문제는 맨 위에 있는 저 파란줄..

뭘까요? 파란줄에 마우스를 갖다대면

"BuildProviders 어셈블리를 로드하지 못했습니다. 파일을 찾을수 없습니다" 같은 오류를 보실 수 있을 겁니다.

네. 첫번째 문제를 위해 web.config 를 보시면 Razor 까신 후 뭔가 추가가 되어 있을 겁니다.

capture6.png 바로 cshtml 확장자와 vbhtml 확장자인데요. 낸시가 0.10.0 부터 BuildProvider 를 만들었습니다.

하지만 개체 브라우저를 보시면 저 어셈블리가 안보일 겁니다.

그렇습니다. nuget 으로 받으신 경우 저 BuildProvider 가 없어서 런타임 오류가 뜬겁니다.

물론 없어도 돌아가는데는 지장이 없습니다. 하지만 가뜩이나 IDE로 하는데 개발생산성이 떨어지겠죠?

낸시 소스 빌드하신 분은 BuildProviders가 추가되있지 않을겁니다. 덕분에 파란줄은 볼 수 없지만 대신 Razor 인텔리센스가 허전할 겁니다. 암것도 없어서

먼저 nuget 사용자를 위한 BuildProvider 어셈블리를 다운받습니다. Nancy.ViewEngines.Razor.BuildProviders.dll.zip

소스 빌드 사용자는 위 파일에 대한 어셈블리를 찾아 참조에 추가하신 후, web.config 에 다음 줄을 추가합니다.

  1. <compilation debug="true" targetFramework="4.0">
  2.       <buildProviders>
  3.         <add extension=".cshtml" type="Nancy.ViewEngines.Razor.BuildProviders.NancyCSharpRazorBuildProvider, Nancy.ViewEngines.Razor.BuildProviders" />
  4.         <add extension=".vbhtml" type="Nancy.ViewEngines.Razor.BuildProviders.NancyVisualBasicRazorBuildProvider, Nancy.ViewEngines.Razor.BuildProviders" />
  5.       </buildProviders>
  6.     </compilation>


compilation 태그가 있는 분은 하위 태그를 열어주시고 BuildProviders 태그를 추가하셔서 넣으시면 되겠습니다.

없으면 confignation -> system.web 에 compilation 태그를 추가하시면 됩니다. 이때 targetFramework="4.0" 은 꼭 추가해야 닷넷 4.0 으로 웹 앱이 올바르게 돌아갑니다.


그리고 빌드합니다!!! 안그러면 런타임 갱신이 안되기 때문에 안고쳐집니다!!!


이렇게 한 다음 다시 cshtml 파일을 닫았다 다시 보면 오류가 사라진 걸 볼 수 있습니다.

근데 낸시에서 아직 아쉬운 부분을 남겼는데요. 바로 inherits 키워드를 통해 명시적으로 뷰 상속을 해야 합니다.

이 문제는 0.11.0 버전때 고친다고 합니다. 4월 초에 나올 것 같군요.

간단하게 맨 위에 한줄만 추가하면 됩니다.

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>

낸시 0.10.0 부터는 ASP.NET MVC 3 처럼 모델 타입을 제네릭으로 정의해서 뷰 상속을 정의하는 환경을 지원합니다.

따라서 이런 식으로 하면 원하는 모델 타입을 바꿔 뷰를 생성할 수 있습니다.

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<System.String>

대충 이런식이죠.


그리고 페이지 솰라솰라 작성하시면 됩니다.

예를 들면...

Views/Index.cshtml
  1. @inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<System.String>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>@Model</title>
  7. </head>
  8. <body>
  9.     오늘 날짜는 @DateTime.Now
  10. </body>
  11. </html>


모델이 String 입니다.. ㅋㅋ 아무렴 어때요. MVC 에서 M 타입이 꼭 DTO일 필요는 없잖아요.

자. 이렇게 뷰 페이지를 만들었으면 이제 연결을 하는 일이 남았습니다. 바로 컨트롤러 작성!

정말 간단합니다. 전편에서 만든 컨트롤러를 수정하겠습니다.

Start.cs
  1. using Nancy;
  2.  
  3. namespace NancyLecture
  4. {
  5.     public class Start : NancyModule
  6.     {
  7.         public Start()
  8.         {
  9.             Get["/"] = _ => View["Index.cshtml", "Hello World"];
  10.         }
  11.     }
  12. }


리턴값에 View 라는 속성을 Get 하시면 됩니다. 이 때 배열 방식으로 받습니다. 메서드 구문이 아닌 속성 인덱스 구문입니다. 이게 참 맘에 들더군요. 첫번째 인자는 뷰 이름, 두번째 인자는 모델 개체입니다.

뷰 이름의 경우 cshtml 빼도 되긴 하지만 만약 여러개의 뷰 엔진을 사용한다면 파일명을 입력하는 것이 건강에 좋습니다.

두번째 인자에 모델은 어떻게 넣던 자유입니다. 저처럼 문자열을 넣어도 되고, 또는 익명 객체를 넣어 써도 됩니다.

아니면 DTO 만들었다면 그걸 넣어도 되고 자유롭게 연습하시면 되겠습니다.


capture7.png

자. 이렇게 저와 똑같이 따라하신 경우, 브라우저에 위와 같은 내용이 나오면 성공한 겁니다.


뭐.. 허무하겠지만 MVC 패턴이 성립이 됐습니다. M은 문자열, V는 Razor 뷰, C는 낸시.


오늘 강좌는 여기서 마치도록 하겠습니다.

다음 강좌는 컨트롤러에 대해 좀 더 심도있게 다루는 방법에 대해 배워보도록 하겠습니다.


ㅅㄱ.





profile
20대 언제나 쿨한 개발(犬足)자.