2. Angular-calendar 설치

이제 앞서 설명했던 angular-calendar를 설치하는 방법을 알아보자. (참고, 작성자는 mac 을 사용하고 있다.)

 

먼저, angular-calendar 오픈소스는 자신의 angular project에 angular-calendar 소스를 집어넣어야 하기 때문에 자신의 angular project가 필요하다.

Angular 프로젝트를 시작하기 위해서 나는 Angular-cli를 사용할 것이다.

 

Angular cli 설치를 하려면 Node.js의 npm 명령어가 필요하다.

때문에, Node.js를 설치해야 한다.

 

1. Node.js 설치

Node.js 사이트에 접속을 한다.

https://nodejs.org/ko/

Node.js

사이트에 접속하면 밑에 화면 같이 뜨는데, 그냥 LTS 버전을 다운로드하여 설치하면 된다.

node -v   /   npm -v   를 cmd 창에 입력하여 버전을 확인한다.

---

2. Angular cli 설치

Angular 프로젝츠를 시작하기 위한 Node.js를 설치했으니, 이제 Angular cli를 설치하면 된다.

다음 명령어를 cmd창에 입력한다.

cmd 창을 띄우고 명령어를 입력한다.

설치 후,  ng version를 cmd 창에 입력해보면 아래와 같은 내용을 확인할 수 있다.

---

3. Angular 프로젝트 생성 

ng new 명령어 다음에 프로젝트 이름을 지정하면 새로운 프로젝트 폴더가 생성되고 스캐폴딩이 작성된다.

---

4. 프로젝트에 오픈소스 삽입

먼저, npm 을 통해 install을 진행한다 :

그 다음, 자신의 프로젝트의 src 디렉토리에 있는 styles.css (global styles of app)에 CSS file을 include 한다.

* 이 단계를 거치지 않으면 나중에 결과에서 No styles 결과가 나타난다.

 

마지막으로 자신의 프로젝트의 src 디렉토리의 app 디렉토리로 들어가서 app.modules.ts 에 다음 코드를 입력한다.

이로서는 아주 기본적인 오픈소스의 제공이 끝나고, 앞서 이 오픈소스에서 설명했다시피 여기에 individual APIs 코드를 추가하여 사용자가 원하는 달력을 완성한다.

---

5.  프로젝트 실행

현재 실행하고자 하는 자신의 프로젝트로 들어가서 npm install를 cmd 창에 입력한다. (npm install은 local dev dependencies를 설치해준다.)

 

npm start 를 통해서 개발서버를 시작한다. 

에러 없이 코드가 제대로 실행된다면 localhost:4200에서 결과를 확인할 수 있다.

 

* 여기서 중요한 점은 angular-calendar, node.js, npm, angular-cli 버전이 서로 호환이 잘 되어야 한다. 최신버전으로 업데이트하는 것을 추천한다.