1장) Angular 2 개발을 위한 환경설정

본격적으로 Angular 2 

(아직은 4버전이 나오지 않았고, 일단은 Angular.js 1 과 헷갈릴 위험이 있기에 일단은 Angular2 로 적겠습니다.) 

를 이용한 개발에 앞서 환경설정을 해봅시다. 

뭐가 필요할까요? 

일단 개발을 위한 기본적인 편집기가 필요하겠죠?  그럼 어떤 걸 사용할까요. 

이 부분은 뭘 사용해도 됩니다. 다만 Angular2 는 Typescript 를 사용하고, 이 Typescript 는 MS 에서 만들었고 

그럼 ! IDE 의 최강자인 VisualStudio 를 사용하면 되느냐?  됩니다. 

다만 VisualStudio 는 너무 무겁습니다.  

제가 추천하는 놈은 Vscode 또는 Atom 입니다. Vscode 는 MS에서 만든 새로운 IDE 로서 Typescript 를 공식 

지원 할 뿐만 아니라 VS와는 다르게 가볍고 빠르고 , 확장성도 뛰어납니다. 

Atom 은 워낙 유명하니.... 일단 둘 중 마음에 드는 놈으로 설치를 합시다. 

저 같은 경우 Vscode 를 사용했습니다.  여기서 추가로 개발을 도와줄 플러그인을 설치해봅시다. 

추천하는 플러그인은 

이 2개 입니다.  

설치하는 법은 윈도우 기준 Ctrl + Shift + X 버튼을 누르면 확장 탭이 나옵니다. 

여기서 해당 플러그인 이름을 검색해서 설치 하면 됩니다.  

자 깨끗하게 설치가 다 되었으면 이제 개발을 위한 편집기가 준비되었습니다. 

이제 Angular 의 사용법을 알아보기 위해 Angular 의 공식홈페이지로 갑니다. 

https://angular.io/   가봤더니 Angular 에 관한 소개와 튜토리얼 이 나와있습니다. 

React 도 그렇고 Angular 1 도 그렇고 처음에 개발 시작전 환경설정에 많은 시간을 허비 합니다. 

Webpack , babel , grunt , jasmin 등 이것들은 뭐지 ? 하는 것들이 너무 많습니다. 

기존에 그냥 <script></script> 로 스크립트만 짜던 분들은 멘붕이 있을 수도 있습니다. 

해당 모듈들에 대한 것은 차차 배워가면서 설명하기로 하고 일단 Angular 를 사용하기 위한 

준비가 필요합니다. 

그런 분들을 위해 Angular 는 한방에 개발환경 설정을 해주는 모듈이 있습니다. 

바로 Angular-cli 입니다. 

https://cli.angular.io/   해당 홈페이지에 가면 사용법이 나와있습니다.

먼저 angular-cli 를 사용하기 위해서는 npm 으로 다운로드 받아야 합니다. 

npm 을 사용하기 위해 node.js 를 설치 합니다. 

설치가 끝났다면 cmd 창을 열어서 

                                           npm install angular-cli -g 

커맨드를 사용합시다. 

설치가 완료 되었다면 이제 Angular 프로젝트를 만들어 봅시다. 

프로젝트를 사용할 디렉터리로 가서 

   ng new my-first-app 

명령어를 사용합시다. 

그럼 이제 새로운 Angular 프로젝트를 생성하고 모듈을 다운로드 받기 시작합니다. 

어느정도 시간이 지나면 설치가 완료됩니다. 

완료 되었다면 해당 폴더로 가서 

      ng serve 

명령어를 사용합시다.  해당 명령어는 테스트를 위한 live-server 를 실행합니다. 

초기 포트는 4200 으로 설정 되어있기에 이제 http://localhost:4200 으로 접속 합시다. 

해당 화면처럼 Angular 를 이용한 웹서비스가 실행 되는 것을 볼 수 있습니다. 

와 ! 정말 쉽다 !  이로써 Angular 2 에 한걸음 다가 갔습니다.

오늘은 간단한 환경설정과 Angular-cli 를 이용해서 첫 Angular App 을 실행 해 보았습니다. 

다음 글에서는 Angular 2 의 폴더구조와 설정파일에 대한 설명을 하고 

Angular 공식홈의 Todo Heroes 를 만들어보며 Angular 의 기본기능을 알아보겠습니다.