[Chapter 1] Angular 2 개발 환경설정

오래간만에 글을 씁니다.

Angular 2 를 이용한 개발을 하게되어 공부하던 도중 좋은 글을 발견하여 해당 글을 바탕으로 저도 공부하는 겸 글을 작성하겠습니다.

이 글을 Angular 공식 홈페이지의 튜토리얼을 Chapter가 진행됩니다. 

우선 개발을 위해 기본적으로 편집기가 필요합니다.

편집기는 어떤 것을 사용해도 상관 없지만 Angular2는 Typescript를 사용합니다. 

Typescript는 MS에서 만들었습니다.

여기까지 생각했다면 떠오르는 편집기가 있을 겁니다.

바로 IDE의 대명사 VisualStudio 가 있고 사용할 수 있습니다.

하지만 VisualStudio는 너무나 무겁습니다. 그래서 저는 Vscode를 사용하겠습니다.

Vscode는 MS에서 만든 IDE로 Typescript를 공식 지원하고 있으며 가볍습니다.

Vscode를 설치하고 개발을 도와줄 플러그인을 설치합니다.

Vscode 상에서 Ctrl + Shift + X 버튼을 누르면 확장탭이 나옵니다.

상단의 검색창에서 Angular 2 TypeScript Snippets를 검색하여 설치해 줍시다.

이제 개발을 위한 첫 걸음마를 떼었습니다.

Angular 사용법을 알아보기 위해 공식 홈페이지에 들어가보면 Angular에 대한 소개와 튜토리얼이 나와있습니다.ㅇㅇ

저는 개발을 시작하기 전에 환경설정 때문에 많은 시간을 허비하는게 싫습니다.

저와 같은 분들을 위해 Angular 는 개발환경 설정을 한번에 하게 해주는 Angular-cli 모듈이 있습니다.

사용방법은 해당 공식 홈페이지에 들어가보면 나와있습니다.

Angular-cli 를 사용하기 위해서는 npm으로 다운로드 해야합니다.

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

[node.js] node.js 설치 및 설정

node.js 설치가 끝났다면 cmd 창을 열어서 커맨드를 입력합시다.

npm install angular-cli -g

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

먼저 cmd 창에서 프로젝트를 생성할 디렉터리로 이동합니다.

해당 디렉토리에서 프로젝트 생성 명령어를 사용합시다.

ng new my-first-app

명령어를 실행하면 Angular 프로젝트를 자동으로 생성하고 모듈들을 다운받습니다.

조금만 기다리면 설치가 완료됩니다.

해당 폴더로 디렉토리를 이동시킨 후 

ng serve

명령어를 실행합니다.

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

초기 포트는 4200으로 설정되어있으니 브라우저를 열어 http://localhost:4200 으로 접속해봅시다.

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

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

Angular 공식 홈페이지의 튜토리얼을 만들어 보면서 Angular 의 기본 기능을 익히도록 하겠습니다.

REFERENCE

http://alexband.tistory.com/