각이 다른 MVC6! 그 여섯 번째 이야기

최지훈지오시스(Qoo10)

Agenda

• ASP.NET MVC 6• 특징

• 기존 버전과의 차이점

• ViewComponent

• Razor 지시자

• TagHelper

• Web API

• AngularJS• 소개 및 장점

• 구문

Compare to ASP.NET Framework

Compare to ASP.NET Framework

Web Pages

Web API

Compare to ASP.NET Framework

ASP.NET MVC 6 Features

• 불필요한 비용과 중복 제거(Web Pages/Web API)

• Web UI와 Web API 생성을 위한 단일 웹 프레임워크

• 웹 페이지에서 MVC로의 자연스러운 전환(향후)

• ASP.NET 5 기반

• .NET Core 제공

• IIS 혹은 자체 호스팅 환경 모두 지원

Difference between MVC 6 and MVC 5

• MVC 6와 Web API의 통합

Difference between MVC 6 and MVC 5

• 프로젝트(솔루션) 구조의 변경

Difference between MVC 6 and MVC 5

• ASP.NET MVC 6의 대상은 Full .NET과 .NET Core

Difference between MVC 6 and MVC 5

• wwwroot에는 정적 파일들이 위치

Difference between MVC 6 and MVC 5

• 서버/클라이언트 측 종속성 관리를 위한 새로운 접근 방법

Server Side Package

Client Side Package

Difference between MVC 6 and MVC 5

• 통합된 서버 측 패키지로 인해 ASP.NET MVC 6의 저장 공간이축소됨

Getting Started with ASP.NET MVC 6

• MVC 패키지 추가 : Microsoft.AspNet.Mvc

• Startup.cs• ConfigurateService(IServiceCollection services) 메서드

• service.AddMvc()

• service.Configure<MvcOptions>(options => {…})

• Configure() 메서드• app.UseMvc(routes => …)

• 또는, ASP.NET 5 웹 응용 프로그램을 생성

• 샘플 및 소스 참고 : https://github.com/aspnet/mvc

ViewComponent

• 이전 버전의 Partial View와 유사

• 조건에 따른 화면 표시

• 뷰 컴포넌트 클래스• ViewComponent 클래스에서 파생

• ViewComponent를 접미사로 하는 클래스 생성

Razor Directives

• @model, @using, @section, @functions는 존재

• @helper는 삭제됨

• @inject, @addTagHelper가 추가됨

@inject Directive

• 뷰에 클래스나 서비스에 정의된 메서드에 대한 직접 호출이 가능• @inject <type> <property>

TagHelpers

• 태그로써 표시되는 HTML 헬퍼• ASP.NET MVC 5의 HtmlHelper 메서드 대체

• @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" }) 대신

• <label asp-for="UserName" class="col-md-2 control-label"></label>

• 추가 속성을 통해 커스터마이징이 용이함

• HTML 에디터에서 원활하게 작업이 가능

TagHelpers

• 일반적인 기능을 수행하는 여러 TagHelper들을 포함• Anchor/Form/Input/Label/Select/TextArea• Script/Link• ValidationMessage/ValidationSummary

• Razor 페이지에 TagHelper 추가• ex : @addTagHelper “*, Microsoft.AspNet.Mvc.TagHelpers”

• 태그 처리를 위해 임의적으로 HTML 요소에 접두사 정의 가능• ex : @tagHelperPrefix “+”

• HTML처럼 사용이 가능• ex : <a asp-controller=“Home” asp-action=“Index”>Home</a>

TagHelpers

• <a asp-action="Add" asp-controller="Movie">Add</a>

• <form asp-action="Add" asp-anti-forgery="true" asp-controller="Movie"></form>

• <label asp-for="Title"></label>

• <input type="text" asp-for="Title" />

• <textarea asp-for="Description"></textarea>

• <select asp-for="SelectedGenre" asp-items="Model.AllGenres"></select>

• <span asp-validation-for="Description"></span>

Web API

• ASP.NET Web API : 브라우저나 모바일 장치 등 광범위한 클라이언트를 연결하는 HTTP 서비스를 보다 쉽게 만들어주는 프레임워크

• 주요 기능• 라우팅을 특성으로 정의할 수 있음

• ex : [Route(“order/{orderNo}]

• CORS(Cross Origin Resource Sharing)• 웹 페이지에서 다른 도메인의 특정 페이지에 대한 렌더링을 가능하게 해주는 메

커니즘

• OWIN(Open Web Interface for .NET) 통합

• Web API Odata(Open Data Protocol)• $expand, $select, $value 지원

Why ASP.NET Web API?

• 현대적 HTTP 프로그래밍 모델

• 요청에 대한 유효성 검사가 가능

• 손쉬운 URI 자원 매핑 및 동일한 HTTP 인터페이스를 구현

• 여러 HTTP 컨텐츠 타협(content negotiation)의 지원

• 도움말 페이지 생성

• 가볍고, 테스트 및 확장이 용이하다.

AngularJS

• 자바스크립트를 기반으로 한 MVC/MVVM 웹 프레임워크로SPA(단일 페이지 응용 프로그램) 형태의 웹 응용 프로그램을 빠르게 개발할 수 있도록 하는 오픈 소스 웹 프레임워크

• 장점• 유지 보수가 쉽고, 개발 속도가 빠르다.

• 간편한 데이터 바인딩을 통해 뷰의 업데이트가 빠르다.

• 코드 패턴이 동일해 개인간의 차이에 따른 결과물의 차이가 적고, 코드량이 감소한다.

• SPA 개발에 최적화되어 있다.

• 기능적인 분리가 명확해 협업이 쉽다.

Reference of AngularJS

• 다운로드• https://angularjs.org/

• 확장 관리자

Reference of AngularJS

• 새 항목 추가 > Client-side

Structure of AngularJS

지시자

지시자

데이터 바인딩표현식

• 지시자, 데이터 바인딩 표현식

Structure of AngularJS

• ng-repeat

Structure of AngularJS

• ng-switch

• ng-controller / ng-show / ng-if / ng-value / ng-href / ng-src…

Structure of AngularJS

• 뷰 / 컨트롤러 / $scope

$scope

Structure of AngularJS

Conclusion

• ASP.NET MVC 6 = MVC 5 + ASP.NET Web API + Web Pages.

• TagHelper / ViewComponent / @inject와 같은 기능을 제공

• 그 외에도 라우팅 / 영역(Areas) / 모델 바인딩과 같은 부가적인기능을 지원

• AngularJS는 SPA를 개발하는 데 있어 장점을 가진다.• 간편한 코드 작성 및 코드량의 감소

• 개발 속도가 빠름

한국 ASP.NET 개발자 모임입니다.

ASP.NET에 관심이 있다면 누구나참여하실 수 있는 공개그룹입니다.

https://www.facebook.com/groups/AspxKorea

ASP.NET Korea User Group

감사합니다.• MSDN Forum http://aka.ms/msdnforum

• TechNet Forum http://aka.ms/technetforum

http://aka.ms/td2015_again

TechDays Korea 2015에서 놓치신 세션은 Microsoft 기술 동영상 커뮤니티 Channel 9에서

추후에 다시 보실 수 있습니다.