1. Angular 오픈소스 : Angular-calendar

실전프로젝트2 수업에서 오픈소스 소프트웨어를 설치해보고 활용할 방안을 생각해보는 수업을 하게 되었다.

나는 그 중에서 Angular를 예전에 배우고 싶었지만 아직 도전해 보지 않아서 Angular 오픈소스를 선택해서 사용해 보겠다.

 

 

먼저 Angular에 대해서 간단하게 설명하자면,

Angularsms Single Page Application(SPA) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 

웹 어플리케이션, 모바일 웹, 녜이티브 모바일과 데스크탑 어플리케이션 등 프론트엔드 개발에 필요한 대부분의 기능을 가지고 있다. 

주언어로 TypeScript을 선택하여 큰 규모의 어플리케이션 개발에 적합하다.

 

¿ 여기서! AngularJS도 있던데, AngularJS랑 Angular랑 무엇이 다른가요? 하고 궁금점을 가지는 사람도 있을 것이다

 바로, Angular 1 버전을 AngularJS라고 하고, 그와 구분되게 Angular 2 버전 이상을 Angular라고 한다.

하지만, Angular는 단순히 Angular JS의 업그레이드 버전이 아니다. Angular는 TypeScript로 재작성이 되었고, AngularJS와는 호환성이 없는 브레이킹 체인지를 다수 포함한다. Angular는 AngularJS보다 배우기 쉽고 성능은 향상됐으며, 어플리케이션 구조는 다 단순하다.

 

---

 

이제, Angular 오픈소스를 선택해야하는데, 이번 수업에서는 Angular 6.0+ calendar를 선택해서 사용해 볼 것이다. 

 

Angular 6.0+ calendar는 Angular 6.0 이상 버전을 사용하여 년, 월 , 일 달력에 이벤트를 표시할 수 있는 오픈소스이다.

          <  해당 오픈소스를 보고 싶으면  https://github.com/mattlewis92/angular-calendar 를 참고하면 된다. >

 

이 angular-calendar 오픈소스는 사용하는 사람들에게 최대한 유연성을 제공하기 위해 시작 및 실행에 필요한 상당량의 boilerplate code가 필요하다. ( boilerplate code는 최소한의 수정만으로 여러 곳에 활용 가능한 코드를 말한다.)

그래서 달력을 만들기 위한 일부 구성 요소들은 재사용이 가능하도록 자체 module로 분리되어 있고, 필요한 최소값만 달력에 포함되어 있어 종속성이 없는 달력보다 추가 코드가 없다. 

 

angular-calendar 오픈소스에서 기본 달력에 구성요소들을 추가하기 위한 옵션의 전체 목록을 보려면 

 

월 : https://mattlewis92.github.io/angular-calendar/docs/components/CalendarMonthViewComponent.html

년 : https://mattlewis92.github.io/angular-calendar/docs/components/CalendarWeekViewComponent.html

일 : https://mattlewis92.github.io/angular-calendar/docs/components/CalendarDayViewComponent.html

 

위에 소스를 참고해서 자신의 project에 참고해서 사용하면 된다.

위에 소스가 자신의 프로젝트에 맞지 않는다면, 이 소스를 대체해서 구송요소를 직접 작성하고 이 라이브러리에서 제공하는 보기 대신 사용해도 된다. 

 

 

여기서 사용자 정의 템플릿을 사용하는 방법을 더 설명해보자면, 이 달력의 모든 부분은 ng-template 을 사용해서 사용자 정의할 수 있다.

 1) 위에서 말한 년, 월, 일  구성요소에 대해 사용자 정의하는 템플릿을 해당 링크에서 찾는다.

         ex) 월을 나타내는 달력 구성요소에 관한 소스 : https://mattlewis92.github.io/angular-calendar/docs/components/CalendarMonthViewComponent.html#cellTemplate

 2) 다음으로 소스를 보고 템플릿을 사용할 child component를 찾는다. 

         ex) 월별보기 cell의 예에서는 "calendar-month-cell.component.ts"이다.

 3) 이제 선택한 템플릿의 템플릿 소스를 자신의 component에 복사하고 원하는대로 수정한다.

 4) 마지막으로 템플릿을 components input으로 전달한다. 

         ex) <mwl-calendar-month-view [cellTemplate]="cellTemplateId" />

 

 

어플리케이션에서 라이브러리를 사용하는 방법에 대한 포괄적인 예제는 

https://mattlewis92.github.io/angular-calendar/#/kitchen-sink 에서 확인할 수 있다.

Demo 중 하나인 kitchen sink