3. Angular-calendar 활용 및 후기

*Angular-calendar 활용

자신의 프로젝트 안에 오픈소스 요소들을 추가해야 angular-calendar가 나타난다.

 

1. Angular project 생성

일단 Angular-calendar 설치 단계에서 자신의 angular 프로젝트를 생성했을 것이다.

나는 ng new myAngProject 로 myAngProject라는 angular 프로젝트를 생성했다.

 

*모르겠다면 아래 글 참고

2020/03/15 - [분류 전체보기] - 2. Angular-calendar 설치

2. Angular-calendar 설치

 

앞서 말했다시피 angular-calendar는 기본적인 angular-calendar가 만들어지는 바탕을 제공해주고 사용자는 제공해준 individual APIs 를 이용하거나 직접 작성하여 원하는 angular-calendar를 반드는 방식이다.

 

하지만 처음 사용하는 나에게는 수많은 APIs들을 보고 내 프로젝트에 넣고 싶은 component를 찾고 적용하는게 무척이나 어렵고 시간이 부족했다.

 

때문에 나는 오픈소스에서 제공해준 모든 common module bundler 에 대한 빠른 시작 예제를 보고 가져왔다.

https://github.com/mattlewis92/angular-calendar/tree/master/build-tool-examples/angular-cli

mattlewis92/angular-calendar

*내가 참고한 소스코드이다. (오픈소스 작성자가 제공)

 

2. 소스 가져오기

내가 생성한 myAngProject의 /src/app 안에 app.component, app.module files에 빠른 시작 예제 안의 angular-cli/src/app의 app.component, app.module files 의 소스들을 가져왔다.

src/main.ts 또한 그대로 소스를 가져왔다

 

*소스를 가져올 때, 자신의 프로젝트에 맞게 약간의 수정이 필요하다. 수정하지 않으면 에러가 날 수 있으니 주의!

 

3. 실행

자신의 프로젝트에 Angular 설치 부분에서 다룬 angular-calendar 적용하는 방법과 angular-calendar에서 제공해준 소스를 가져왔다면 이제 실행을 하면 된다.

 

다음 명령어를 cmd에 입력한다 :

npm start

*에러가 뜨면 dependencies, 버전 호환, 코드 에러 등을 살펴보고 수정해준다.

 

에러가 없이 잘 작동한다면 localhost:4200 에 접속하면 다음과 같은 화면이 뜬다;

Angular-calendar의 빠른 시작 예제를 참고해서 만든 아주 기본적인 달력 틀

결과를 보니 아주 기본적인 달력 틀이 만들어졌다. 

 

원래 다른 APIs들을 참고해서 작성하기가 너무 어려워서 위의 예제로 만들었더니 너무 기본적인 달력 틀이기 때문에 component들을 더 적용해 보기로 했다. 

---

내가 스스로 달력 요소들을 알아보고 적용하는 것은 너무 오래걸릴 것 같기 때문에 오픈소스에서 제공해준 demo site를 통해 달력 요소들을 적용해 보기로 했다.

 

https://mattlewis92.github.io/angular-calendar/#/custom-templates

Angular 6.0+ calendar

나는 데모 중에 Custom templates 을 가져왔다. 

 

앞서 적용했던 것과 마찬가지로 나의 angular 프로젝트에 해당 소스들을 가져오고 실행한다.

 

결과 : 

Demo : Custom templates

npm start로 localhost:4200에서 실행해본 결과 위의 이미지가 나왔다.

 

---

*Angular-calendar 활용 후기

Angular를 사용하는 프로젝트를 해보고 싶어서 Angular-calendar를 선택해서 활용해보았는데, 생각보다 더 오픈소스를 내 프로젝트에 적용하기가 힘들었다.

일단 이 오픈소스를 적용하기 위한 환경을 설정하는 것부터 계속 에러가 떠서 설치하는데도 많은 시간이 걸렸다. node.js, npm install, angular-cli 등 설치하는데 특히 npm install에서 여러 Error가 떠서 하나하나 구글로 서치해보고 해결했다. 특히 npm install하는데 계속 에러가 떠서 버전들을 업데이트해주고, nvm을 설치해서 nvm을 사용해보기도 하고 하였다.

그리고 이 오픈소스의 특성상 단순히 설치하고 코드를 조금 가져오면 되는 것이 아니라 사용자의 코드 유연성을 위해 년, 월, 일에 대한 component가 독립적인 module로 제공하기 때문에 그 API들을 알아보고 내가 만들고자 하는 달력에 맞게 적용해야 해서 달력을 만드는 것이 쉽지 않았다. 또한 데모 사이트에서 원하는 달력을 골라 적용하는 것도 그래도 가져오는 것이 아니라 가져오는 소스에 맞게 다른 파일들을 변경을 해줘야하는 것이 있어서 이것 또한 내가 스스로 적용하는 것보단 쉽지만 상당히 많은 생각과 시간을 요구했다.내가 어떤 순서로, 어떤 것을 어떻게 적용해야하는지는 이 오픈소스에서 제공해주는 코드와 component를 잘보고 공부할 필요가 있다고 생각했다.

하지만 이 오픈소스를 나의 angular 프로젝트에 적용하면서, 이러한 점이 비록 오픈소스를 적용하는데 더 힘들고 복잡하지만 다른 프로젝트에서도 개별적으로 다 적용될 수 있다는 것, 그리고 내가 원하는 component들을 적용해서 나만의 calendar를 만들 수 있다는 점이 되게 매력적이라고 생각했다. 그래서 지금은 복잡하고 시간이 오래걸려서 demo를 참고해서 달력을 적용했지만, 나중에 다시 APIs 설명들을 보고 내가 원하는 달력에 맞게 적용해서 스스로 달력을 만들어보고 싶다.