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

이번에는 이벤트 바인딩에 대해서 알아보겠습니다.

데이터 바인딩은 ts파일의 변수를 html 에서 이용하는 것이었죠.

이번 바인딩은 html의 이벤트를 ts파일의 메소드와 연결하는 것입니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button (click)="onAddIncome()">Add Income</button>

여기서 중요한 부분은 click 이벤트를 ( ): Event Binding 으로 감싼 것입니다.

click 이벤트를 ts의 onAddIncome() 라는 메소드와 연결해준 것이죠.

당연히 ts 파일에는 onAddIncome() 메소드가 있어야겠죠?

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 1000;
    ngOnInit(){ }
    onAddIncome(){
      this.budget += this.budget;
    }
}

자동으로 budget 이 올라가는 타이머 코드는 삭제하구요.

ts 파일에 onAddIncome() 메소드를 만들어줍니다.

input에 써있는 값 역시 budget이므로 그만큼 더해지도록 합니다.

이렇게하면 버튼을 클릭할 때마다 budget이 2배가 됩니다.

이벤트 바인딩 동작화면

아주 쉽게 ts 파일의 메소드를 html에서 호출하는 것을 볼 수 있습니다.

이벤트 발생시 활용해야하는 값이 있다면 $event를 변수로 받을 수 있는데요.

활용은 다음 기회로 남겨두도록 하겠습니다.

소스주소: https://github.com/jsrho1023/account-book

String이 바인딩이 되었다면 다른 것도 가능하겠죠??

오늘은 Property 바인딩에 대해서 보겠습니다.

html 태그의 속성과 ts 클래스의 변수를 연결합니다.

역시 말보다는 코드를 보는 게 더 쉽겠죠?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

지난 번 ts 코드의 template부분을 변경합니다.

template을 templateUrl 로 수정하구요.

지난번 지우지 않고 그대로 둔 html 파일 경로를 설정합니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button>Add Income</button>

budget.component.html에 Property Binding을 적용해보죠.

위의 코드에서 중요한 부분은 [value] 부분입니다.

대괄호 [ ]는 원래 html 코드에는 없는 내용이죠.

input 태그의 value 속성에 ts 코드의 값을 맵핑할 수 있습니다.

budget값은 ts 코드에 정의된 변수 이름입니다.

<h3> 태그에 있는 값과 동일하죠.

결과화면은 아래와 같습니다.

property binding 결과화면

Input의 값이 budget값과 동일하게 바뀌는 것을 볼 수 있습니다.

물론 아래와 같이 String Interpolation을 이용해도 동일합니다.

<input type="text" value="{{budget}}">

다음에는 Event Binding을 통해 Add Income 버튼을 동작시켜보죠.

소스주소: https://github.com/jsrho1023/account-book

며칠 전에 싱크대 바닥 쪽에 물이 고인 것을 발견했습니다.

자세히 살펴보니 싱크대 아래 쪽의 배수관 문제더군요.

플라스틱 호스가 삭아서 갈라져있었습니다.

그래서 문제가 생긴 참에 배수구를 교체하기로 했습니다.

먼저 유튜브의 영상을 시청했지요.

(https://www.youtube.com/watch?v=Lp0zcm9xX6M)

덤벼볼만 하더군요.

배수구 분해

먼저 문제가 생긴 호스를 보니 영상과 달리 Y배관이 되어있습니다.

잘 사용하지 않는 식기세척기와 연결된 배관이 있어서 그렇습니다.

신경쓰지 않고 조심스레 배수구를 분해합니다.

① 슬슬 돌리면서 힘을 주어 빼면 빠집니다.

배수구와 연결된 부분도 돌려서 빼면 되구요.

그리고 다음 순서로 싱크대 측면 배관을 분리합니다.

② 나사를 풀고,

③ 배수구 우측에 연결된 부분을 돌려 배수관을 분리합니다.

④ 통을 좌측으로 힘껏 돌리면 상단부와 분리가 됩니다.

(오래되서 그런지 더럽...)

그리고 새 배수구 세트를 철물점에서 구입합니다.

2017년 12월 기준 15,000원 입니다. 싸요!

조립은 분해했던것과 반대 순서로 간단히!

배수구 조립

① 배수구의 상단, 하단부를 싱크대 철판을 사이에 두고 결합합니다.

② 싱크대 우측에 배수관을 나사로 연결합니다.

③ 배수구 우측에 배수관을 연결하구요.

④ 배수구 하단에 배수관을 연결합니다.

⑤ Y자 배관에 돌려가면서 밀어끼우면 됩니다.

배수구 세트에는 악취방지용 배수구 캡도 있습니다.

바닥에 연결하는 경우는 캡을 잘 씌워야 냄새가 안나요.

저는 Y배관이 되어있어서 더 편했네요. ^^

싱크대에 물이 샌다거나 악취가 나면 직접 교체해보세요.

어렵지 않습니다.

Angular에는 Data를 표출하는 방법이 다양하게 있습니다.

그 중 가장 간단한 방법인 String Interpolation을 보도록 할게요.

ts 클래스의 변수를 template html에서 가져와 보여주는 것입니다.

이렇게 하는 것이 무슨 도움이 될까요?

먼저 비즈니스 로직과 보여주는 뷰를 분리할 수 있습니다.

html 화면을 변수들로 구성한 후 ts 파일에서 로직만 구현하면 되는거죠.

그리고 정적인 html이지만 data의 변화를 통해 동적으로 보일 수 있습니다.

말보다 예를 들어 설명하는 것이 빠르겠죠?

지난 번 만들었던 budget.component.ts 파일을 수정하겠습니다.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    template: `<h3>My Budget: ₩{{budget}}</h3>`,
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

Angular 관련 주목할 만한 부분이 2군데 입니다.

6번째줄의 template 속성과 {{ }} 괄호 입니다.

ECMA6에 등장하는 Template String ` (back-tick)도 있습니다만.. 

Angular에 집중하기 위해 생략하겠습니다.

지난번 CLI로 생성해준 ts 파일에는 templateUrl 속성이 있었습니다.

하지만 template이 간단한 경우 굳이 파일이 아니어도 됩니다.

위와 같이 template이라는 속성에 inline으로 html을 작성해도 되죠.

그럼 더이상 budget.component.html은 필요가 없습니다.

하지만 나중에 사용할 예정이니 놔두도록 하겠습니다.

오늘 더 중요한 부분은 {{ }} : String Interpolation 기능입니다.

ts 코드에서 사용하는 변수 budget을 html 코드에 출력할 수 있습니다.

위의 코드와 같이 중괄호 사이에 변수명을 넣어주면 됩니다.

간단히 코드를 설명하자면, 1초에 한번씩 budget 값을 1000씩 올립니다.

ts 코드의 budget 값이 변함에 따라 아래와 같이 화면의 금액이 변하죠.

저의 실제 예산도 1초에 1000원씩 증가하면 얼마나 좋을까요..?

String Interpolation을 이용한 화면

매우 쉽게 화면에 변화를 줄 수 있습니다.

JavaScript로 DOM을 제어하면 되지 않냐구요? 맞습니다. 

그러나 Angular의 장점들은 아직 많으니 천천히 보자구요.

소스주소: https://github.com/jsrho1023/account-book

얼마전 재미난 이야기를 들었습니다.

"엄마랑 딸처럼 지내자"라는 시어머니의 말의 의미가 얼마나 다를 수 있는지요.

시어미는 아마도 친하게 지내자는 의미로 하신 말씀이실 겁니다.

하지만 곧이곧대로 받아들이면 상당히 재미있을 것 같습니다.

어쩌면 며느리가 이렇게 말할지도요.

"정말 엄마처럼 대해도 괜찮으시겠어요? 후회하실텐데요..."

엄마랑 딸 관계의 기본적인 틀은 엄마가 딸에게 한없이 주는 관계입니다.

즉, 엄마가 손해를 많이 볼 가능성이 높은 관계라는 것이죠.

딸은 엄마에게 굉장히 편하게 대합니다.

화도 내고, 짜증도 부리고 막말도 하겠죠?

시어머니 전문 배우

남,여가 부부가 되면서 변하는 관계에 대한 이야기는 늘 재미난 소재입니다.

해외에도 부부관계, 장모와 남편의 관계 등에 관련된 조크가 많은데요.

그 중 재미난 것이 있어 한 번 가져와봤습니다.(약간 IT 스러운...)

Title: 남편 1.0 과 아내 1.0 기술 지원 문의 Archive

——————————————————–

친해하는 기술지원팀께,

작년 저는 남자친구 5.0에서 남편 1.0으로 업그레이드했습니다.

그러고나니 시스템전반에 걸쳐 눈에 띄는 성능 저하를 느꼈습니다.

특별히 꽃과 보석 관련 어플이 그렇습니다.

남자친구 5.0에서는 결함없이 작동했던 기능인데 말이죠.

그리고 남편 1.0은 간혹 회계 기능에서 알 수 없는 오류가 발생합니다.

게다가 남편 1.0은 매우 많은 소중한 기능들이 빠져있습니다.

로맨스 9.5와 경청 6.5가 사라졌습니다.

쓸데없는 축구 5.0과 농구 3.0은 왜 추가된걸까요?

대화 8.0과 청소 2.6은 시스템 충돌을 일으킵니다.

잔소리 5.3를 실행해서 문제를 고치려했지만 정상작동하지 않네요.

어떻게 해야 하나요?

From, 좌절

——————————————————–

친해하는 좌절고객께,

먼저 남자친구 5.0은 오락 용이나 남편 1.0은 운영체제임을 인지하십시오.

먼저 아래와 같은 명령어를 입력해보시길 권장합니다.

"C:/I Thought YOU LOVED ME"

그리고 눈물 6.2를 다운받고 죄의식3.0으로 업데이트 해보십시오.

프로그램이 잘 동작한다면 남편 1.0은 보석과 꽃 기능을 실행할 것입니다.

하지만 기억하십시오.

눈물과 죄의식 기능은 간혹 아래와 같은 프로그램을 실행할 수 있습니다.

남자1.0의 우울한 침묵 2.5, 또는 맥주6.1

맥주 6.1은 매우 위험한 프로그램입니다.

매우 큰 코골이Beta 버젼을 실행시키기 때문이지요.

무슨일이 있든지 장모1.0을 설치하지는 마십시오.

(결국 모든 시스템 자원을 망가뜨리는 바이러스가 될겁니다.)

또한 남자친구 5.0을 다시 설치하려고 시도하지 마십시오.

남편 1.0과 심각한 충돌을 일으키는 지원되지 않는 프로그램입니다.

요약하자면, 남편 1.0은 좋은 운영체제입니다.

다만 메모리가 제한적이어서 새로운 걸 빨리 익힐 수 없습니다.

메모리와 성능향상을 위한 추가적인 프로그램 구매를 원하신다면, 

음식 3.0과 야한속옷 7.7을 추천합니다.

행운일 빕니다.

기술지원팀

——————————————————–

친해하는 기술지원팀께,

작년 저는 여자친구7.0을 아내1.0으로 업그레이드하였습니다.

그리고 알 수 없는 백그라운드 프로그램이 돌며 많은 자원을 낭비하고있습니다.

게다가, 아내1.0은 부팅부터 많은 감시 프로그램을 알아서 실행합니다.

게임10.3과 친구들과취하는밤2.5 그리고 축구5.0이 실행되지 못하게 합니다.

저는 아내1.0을 계속 사용하지 못할 것만 같습니다.

여자친구7.0으로 돌아가기위해 삭제를 시도했지만 불가능하네요.

제발 도와주실 수 있으신지요?

감사합니다.

조

——————————————————–

친애하는 조고객님께,

이는 많은 남자들의 매우 일반적인 불평입니다.

주로 오해에서 발생하는 문제입니다.

많은 사람들이 아내 1.0을 도구나 오락으로 생각합니다.

하지만 아내 1.0은 운영체제로써 많은 프로그램을 실행시킵니다.

먼저 아내 1.0은 한 번 설치되면 삭제나 변경이 불가능합니다.

여자친구 8.0이나 아내 2.0을 설치시도하신 분들은 더 많은 문제를 얻었습니다..

아내 1.0을 유지하시면서 상황을 개선하기를 추천드립니다.

저 또한 아내 1.0을 설치한 사람입니다.

선배로써 "일반적인 부부의 실수들"이라는 매뉴얼을 정독하시길 제안합니다.

그리고 모든 실수와 문제는 아무 이유없이도 발생할 수 있다고 가정하십시오.

비상시 가장 좋은 명령은 아래와 같습니다.

"C:/APOLOGIZE"

아내 1.0은 매우 좋은 운영체제입니다.

다만 운영, 유지가 어려울 뿐입니다.

혹시 성능향상을 위한 추가적인 투자를 고민하신다면,

꽃 2.1과 보석 2.2 그리고 초콜릿 5.0을 추천합니다.

어떤 상황에서도 짧은치마의비서3.3과 같은 프로그램은 깔지 마십시오.

이는 아내1.0과는 호환이 되지 않으며 큰 피해를 가져올 수 있습니다.

행운을 빕니다.

기술지원팀

——————————————————–

개인적으로 재미나게 읽어서 공유합니다.

출처: http://www.al6400.com/blog/husband-1-0-and-wife-1-0-joke/

Angular에 대해서 대략 훑어 본 것 같으니 이제 직접 코딩을 해보도록 하겠습니다.

지난 글에서 말씀드렸듯이 Component들을 추가하여 Application을 만들어갑니다.

바로 그 Component를 추가하는 2가지 방법에 대해서 공부해볼게요.

1. Angular CLI(Command-Line-Interface)

ng generate component (축약: ng g c) 라는 CLI명령어를 이용할 수 있습니다.

만약 budget이라는 컴포넌트를 만들고 싶다면 아래와 같이 사용합니다.

ng generate component budget (축약: ng g c budget)

이렇게 명령어를 입력하면 directory와 파일이 생성됩니다.

app.module.ts에 필요한 코드가 자동으로 추가되구요.

angular-cli (create component command)

2. Manual

물론 명령어를 사용하는 것은 편하고 좋은 방법입니다.

하지만 더 깊은 이해를 위해 하나,하나 손으로 만들어 보는 것도 좋겠죠?

새로운 Component를 추가하려면 당연히 먼저 파일을 만들어야합니다.

Component는 ts, html, css 3가지 파일로 이루어지게 됩니다.

일단 간단하게 Component당 하나의 폴더를 만드는 것으로 가정하죠.

(CLI를 사용하는 것과 동일하게 폴더 구조를 만들겠습니다.)

budget폴더를 생성하고 그 안에 3개의 파일을 생성합니다.

budget

- budget.component.html

- budget.component.css

- budget.component.ts

먼저 ts파일을 구성해보죠.

Angular의 Component를 사용하기 위해 import를 먼저 합니다.

import { Component } from '@angular/core';

지난 글의 @Component라는 Metadata를 넣어줍니다.

@Component 안에는 selector, templateUrl, styleUrls이 필요합니다.

selector는 templateUrl이 위차할 html 태그 이름이라고 보시면 됩니다.

자동 생성되는 규칙대로 'app-budget'이라고 넣어주겠습니다.

templateUrl은 새로 만든 html 파일 이름을 넣구요.

위 세가지를 구성해주고, class를 선언하면 ts 파일 구성이 완료됩니다.

@Component({
  selector: 'app-budget',
  templateUrl: './budget.component.html',
  styleUrls: ['./budget.component.css']
})

위와 같이 구성해준다음 이 Component를 볼 수 있도록 노출시켜줍니다.

export class BudgetComponent{}

TypeScript에서 객체를 다른 객체에서 import하여 사용할 수 있도록 하는 문법입니다.

TypeScript에 대해서는 자세히 다루지 않을게요.

저도 자세히 알지는 못하고 Angular에서 쓸 때 필요한 만큼만 익혀 가고 있습니다.

css 파일은 그냥 두고(꾸미기는 생략!) html 파일을 편집해봅시다.

<h3>I made first component!!!</h3>

마지막으로 이 Component를 사용하겠다는 것을 Angular에 알려야합니다.

app.module.ts에 import하고 @NgModule의 declaration에 추가합니다.

NgModule에 대해서는 추후에 더 자세히 다루도록 하겠습니다.

import { BudgetComponent } from '@./budget/buget.component';

@NgModule({
  declaration: [
    BudgteComponent,
    ...
  ], 
  ...
})

위 두 가지 방법을 통해 새로운 컴포넌트를 추가할 수 있습니다.

그리고 그 컴포넌트를 화면에 출력해봅시다.

app.component.html에 우리가 지정한 selector (app-budget) 태그를 넣습니다.

<div style="text-align:center">
  <app-budget></app-budget>
</div>

ng serve를 통해 화면을 실행하면 아래와 같은 화면이 뜹니다.

새로운 Component가 추가된 angular 첫 페이지

Anuglar의 가장 중요한 요소라고 말씀드렸던 Component에 대해 더 자세히 보겠습니다.

Angular Web Application의 핵심 부품인 Component는 3개의 파일로 구성됩니다.

타입스크립트 파일인 ts 파일과 템플릿 html 파일, 스타일 css 파일 입니다.

이미 만들어져있는 app.component.{ts,html,css} 파일들을 보겠습니다.

(app.component에는 spec.ts파일이 하나 더 있는데 테스트를 위한 파일 입니다.)

먼저 app.component.ts 파일은 아래와 같이 생겼습니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent { }

import는 이미 만들어진 Module에 대한 의존성이라고 보시면 됩니다.

오늘 살펴볼 부분은 @Component라고 쓰여진 Metadata 입니다.

AppComponent는 타입스크립트 Class입니다.

@Component는 Angular가 Compile될 때, 이 Class가 Component임을 표시해줍니다.

그리고 또 Component로서 어느 곳에 무엇을 어떻게 표시할지 속성을 가지고 있죠.

속성이 3가지 있습니다.

1. 어느 곳에(Selector)

2. 무엇을(TemplateUrl)

3. 어떤 스타일로(StyleUrls)

Selector는 Component가 들어갈 html tag라고 보시면 됩니다.

index.html의 <app-root></app-root>태그 기억하시나요?

TemplatUrl은 Component에 들어가는 html 문서의 골격입니다.

첫 화면에 보여지는 Welcome화면의 태그들이 다 app.component.html에 있죠.

StyleUrls는 html의 스타일을 지정해주는 css파일들입니다.

JavaScript Array 형태로 여러 파일이 선택될 수 있습니다.

물론 다른 속성들도 있습니다만, 그건 하나하나 해보면서 익혀가겠습니다.

다음에는 새로운 Component를 직접 추가해보도록 하겠습니다.

Angular CLI를 통해 Angular 프로젝트를 생성하는 것까지 진행했습니다.

그럼 이제 Angular 첫 페이지가 어떻게 만들어 지는가에 대해 알아보겠습니다.

자동으로 생성되는 많은 파일들이 있습니다.

그 중 지금 우리가 집중해서 볼 것은 3개의 파일과 1개의 Set입니다.

1. main.ts

2. app.module.ts

3. index.html

4. app.component. files (Set)

1. main.ts

Angular는 스크립트 언어인 JavaScript로 작성이 되지만, Compile되어 사용됩니다.

설정에 따라 JIT(Just-In-Time), 또는 AOT(Ahead-Of-Time) Compiler를 사용할 수 있습니다.

Compiler에 대해서는 자세히 다루지 않구요. (자세히 모르기도 합니다.)

이러한 빌드 작업의 시작점이 main.ts입니다.

마치 C의 main.c, C++의 main.cpp와 같은 느낌이죠?

main.ts는 Application의 진입점으로 사용할 시작 Module을 설정(AppModule)해줍니다.

main.ts

앞으로 수정할 일은 거의 없어보여요.

2. app.module.ts

가장 중요한 파일이라고 볼 수 있는데요.

main.ts에서 시작 Module로 설정한 그 Module입니다.

Angular Application을 어떻게 조립할지 결정하는 파일입니다.

어떤 Component들이 들어가고 어떤 Module들을 참조할지에 대한 정보를 담고 있어요.

app.module.ts

3. index.html

이 파일이 브라우저로 접속했을 때 보이는 화면입니다.

화면에서 봤던 것 만큼 많은 코드가 들어있지 않죠?

사실 <app-root></app-root>라는 자리에 Component가 들어가서 보여지기 때문입니다.

index.html

이 파일 또한 직접 편집할 일은 거의 없습니다.

Angular가 빌드시 필요한 js와 css파일들을 알아서 추가해주기 때문입니다.

필요한 js와 css파일들은 사실 Component에 담겨져 있습니다.

4. app.component.{ ts, html, css, spec.ts }

우리가 만들어 갈 Application의 root(뿌리)가 되는 Component입니다.

Application이 개발되어가면서 많은 Component들이 추가됩니다.

이 Component들을 사용하여 Application을 구성하는 Main Component라고 보시면 됩니다.

app.component.ts

전체 적으로 요약하면 아래와 같은 구조입니다.

전체 소스 구조

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 기본 화면

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