IT 회사에서 즐겁게 지내기!

Angular의 전체 구조에 대해서 아주 살짝만 훑어보고 가겠습니다.

사실은 저도 정확히 알지 못하고 앞으로 익혀갈 예정이지만요.

Angular Overview

위 그림은 Angular의 구조를 아주 단순화한 그림입니다.

크게 보이는 몇 가지 단어들을 정리하고 넘어가도록 하죠.

해보면서 익히는 게 더 좋을듯 합니다.

Angular는 Component들을 이용하여 Web Page를 만들어냅니다.

Component가 가장 중요한 구성요소라고 할 수 있겠죠.

Component는 Template(=html+부가기능)을 이용하여 화면을 그립니다.

여러 개의 Component들, 즉 여러가지 기능들을 하나의 package로 묶은 것이 Module입니다. 

Angular Library또한 하나의 Module이라고 볼 수 있습니다.

Angular는 Typescript Class에 Metadata를 이용하여 Component, Module 등을 구분하죠.

Component간에 공통적인 기능을 수행하는 Service를 만들어 사용할 수 있습니다.

그리고 Template에서는 DOM을 구성하는데 Directive를 활용합니다.

정리하면 아래와 같은 구조로 요약됩니다.

Angular Terms

위 그림은 제가 나름대로 단순화한 관계도 이므로 틀릴 여지가 있습니다.

앞으로 배우면서 잘못된 부분은 수정해나가도록 하지요.

출처: https://angular.io/guide/architecture

Angular를 사용해보기 위해서 당연히 개발 환경 세팅을 해야겠죠.

역시나 준비된 프레임워크답게 Command Line Interface(CLI)를 제공하고 있습니다.

물론 요즘에는 Graphical User Interface(GUI)를 선호하는 추세도 있긴 하지만요.

그래도 프로그래머들은 CLI에 편하고 익숙해질 필요가 있습니다.

Linux, Git 등 많은 도구들이 CLI로 동작 하니까요.

네, 잡설이 길었습니다.

Prerequisite: Node.js

Angular를 설치하기 위해서 먼저 설치해야하는 녀석들이 있습니다.

Node.js 와 Node Package Manager(npm) 입니다.

사실 Node.js를 설치하면 npm도 자동으로 따라오니 설치해야하는 녀석이 되겠군요.

Node.js 홈페이지에서 Long Term Support(LTS)버젼 받아서 설치하면 됩니다.

간단한 건 넘어가도록 할게요.

그럼 Node.js가 설치되었다는 가정 하에 Angular 개발 환경을 만들어 보겠습니다.

cmd를 실행하여 Angular 개발 환경을 세팅하고자 하는 위치로 이동합니다.

npm install -g @angular/cli

위 명령어를 통해 angular cli를 설치할 수 있습니다.

npm install은 Node Package Manager가 특정 패키지를 설치하도록 하구요.

여기서 -g 옵션은 global을 의미하여 해당 패키지를 지속적으로 사용할 때 쓰입니다.

-g 옵션을 사용하면 %AppDATA%\npm\node_modules에 패키지가 저장됩니다.

Windows 7을 예로들면 경로는 아래와 같습니다.

C:\Users\John\AppData\Roaming\npm\node_modules\

그럼 이제 개발을 시작하기 위한 환경을 구성해보겠습니다.

예를 들어 applicationName이라는 폴더에서 작업을 한다고 가정해볼게요.

ng new applicationName

위 명령어를 통해 개발을 시작하기 위한 환경 세팅이 완료됩니다.

엄청 간단하죠?

applicationName폴더에 들어갑니다.

cd applicationName

그리고 아래 명령어가 정상적으로 실행되는지를 확인합니다.

ng serve

localhost의 4200포트로 접근하면 아래와 같은 화면이 보입니다.

Angular App 기본 화면

그럼 이제부터 시작입니다!