TechDays Korea 2015

1. 각이 다른 MVC6! 그 여섯 번째 이야기
최지훈
지오시스(Qoo10)

2. Agenda
• ASP.NET MVC 6
• 특징
• 기존 버전과의 차이점
• ViewComponent
• Razor 지시자
• TagHelper
• Web API
• AngularJS
• 소개 및 장점
• 구문

3. Compare to ASP.NET Framework

4. Compare to ASP.NET Framework

5. Web Pages
Web API
Compare to ASP.NET Framework

6. ASP.NET MVC 6 Features
• 불필요한 비용과 중복 제거(Web Pages/Web API)
• Web UI와 Web API 생성을 위한 단일 웹 프레임워크
• 웹 페이지에서 MVC로의 자연스러운 전환(향후)
• ASP.NET 5 기반
• .NET Core 제공
• IIS 혹은 자체 호스팅 환경 모두 지원

7. Difference between MVC 6 and MVC 5
• MVC 6와 Web API의 통합

8. Difference between MVC 6 and MVC 5
• 프로젝트(솔루션)
구조의 변경

9. Difference between MVC 6 and MVC 5
• ASP.NET MVC 6의 대상은 Full .NET과 .NET Core

10. Difference between MVC 6 and MVC 5
• wwwroot에는 정적 파일들이 위치

11. Difference between MVC 6 and MVC 5
• 서버/클라이언트 측 종속성 관리를 위한 새로운 접근 방법
Server Side Package
Client Side Package

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

13. 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

15. ViewComponent
• 이전 버전의 Partial View와 유사
• 조건에 따른 화면 표시
• 뷰 컴포넌트 클래스
• ViewComponent 클래스에서 파생
• ViewComponent를 접미사로 하는 클래스 생성

16. Razor Directives
• @model, @using, @section, @functions는 존재
• @helper는 삭제됨
• @inject, @addTagHelper가 추가됨

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

19. 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 에디터에서 원활하게 작업이 가능

20. 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>

21. 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>

23. 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 지원

24. Why ASP.NET Web API?
• 현대적 HTTP 프로그래밍 모델
• 요청에 대한 유효성 검사가 가능
• 손쉬운 URI 자원 매핑 및 동일한 HTTP 인터페이스를 구현
• 여러 HTTP 컨텐츠 타협(content negotiation)의 지원
• 도움말 페이지 생성
• 가볍고, 테스트 및 확장이 용이하다.

25. AngularJS
• 자바스크립트를 기반으로 한 MVC/MVVM 웹 프레임워크로
SPA(단일 페이지 응용 프로그램) 형태의 웹 응용 프로그램을 빠
르게 개발할 수 있도록 하는 오픈 소스 웹 프레임워크
• 장점
• 유지 보수가 쉽고, 개발 속도가 빠르다.
• 간편한 데이터 바인딩을 통해 뷰의 업데이트가 빠르다.
• 코드 패턴이 동일해 개인간의 차이에 따른 결과물의 차이가 적고, 코드
량이 감소한다.
• SPA 개발에 최적화되어 있다.
• 기능적인 분리가 명확해 협업이 쉽다.

26. Reference of AngularJS
• 다운로드
• https://angularjs.org/
• 확장 관리자

27. Reference of AngularJS
• 새 항목 추가 >
Client-side

28. Structure of AngularJS
지시자
지시자
데이터 바인딩
표현식
• 지시자, 데이터 바인딩 표현식

29. Structure of AngularJS
• ng-repeat

30. Structure of AngularJS
• ng-switch
• ng-controller / ng-show / ng-if / ng-value / ng-href / ng-src…

31. Structure of AngularJS
• 뷰 / 컨트롤러 / $scope
$scope

32. Structure of AngularJS

34. Conclusion
• ASP.NET MVC 6 = MVC 5 + ASP.NET Web API + Web Pages.
• TagHelper / ViewComponent / @inject와 같은 기능을 제공
• 그 외에도 라우팅 / 영역(Areas) / 모델 바인딩과 같은 부가적인
기능을 지원
• AngularJS는 SPA를 개발하는 데 있어 장점을 가진다.
• 간편한 코드 작성 및 코드량의 감소
• 개발 속도가 빠름

35. 한국 ASP.NET 개발자 모임입니다.
ASP.NET에 관심이 있다면 누구나
참여하실 수 있는 공개그룹입니다.
https://www.facebook.com/groups/AspxKorea
ASP.NET Korea User Group

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

37. http://aka.ms/td2015_again
TechDays Korea 2015에서 놓치신 세션은
Microsoft 기술 동영상 커뮤니티 Channel 9에서
추후에 다시 보실 수 있습니다.