[td 2015]각이 다른 mvc6! 그 여섯 번째 이야기!(최지훈)
TRANSCRIPT
Agenda
• ASP.NET MVC 6• 특징
• 기존 버전과의 차이점
• ViewComponent
• Razor 지시자
• TagHelper
• Web API
• AngularJS• 소개 및 장점
• 구문
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
• 서버/클라이언트 측 종속성 관리를 위한 새로운 접근 방법
Server Side Package
Client Side Package
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가 추가됨
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 개발에 최적화되어 있다.
• 기능적인 분리가 명확해 협업이 쉽다.
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