Angular로 개발하기
개발하기에 앞서 Angular라는 프레임워크를 이용해서 웹 애플리케이션을 개발하려면 크게 두가지를 생각해야 한다.
1. 사용자와 상호작용할 뷰를 구성
일반적인 웹 애플리케이션은 API혹은 배치 프로그램과 같이 다른 애플리케이션과 통신하며 구현된 기능에 따라 동작한다. 하지만 사용자용 애플리케이션의 핵심은 사용자와의 상호작용이다. 해당 애플리케이션의 실행 전반에 걸쳐 사용자와 반복적으로 상호작용하므로 사용자와 소통할 매개로서 뷰가 반드시 필요하다.
이 말이 무엇일까 고민을 많이 해보았는데 이 뷰라는 녀석이 직접 사용자와 소통을 한다는 뜻인 것 같다. 즉 사용자가 보게되는 페이지 중 에서도 사용자와 상호작용할 수 있는 뷰가 반드시 필요하다라는 것 같다.
2. 뷰와 연결된 일련의 로직을 개발
프레임워크를 사용한다는 것은 애플리케이션의 시작부터 종료까지 모든 것을 직접 만드는 것이 아니라 실행 및 관리의 주도권은 프레임워크에 위임하고 일련의 로직만을 개발한다는 것이다.
이 말은 프레임워크를 사용하는 이유를 설명 해준다고 생각한다.
1. Angular src/app
먼저 우리는 src폴더에 있는 녀석들을 건들여 봐야한다. 왜냐면 이녀석들이 핵심이기 때문이다. src폴더안에는 많은 파일들이 있지만 가장 기본이되는 app 폴더 부터 확인해 보겠다.
app 폴더에 보면 app.component.css/ app.component.html/ app.component.spec.ts/ app.component.ts/ app.moudle.ts 이렇게 총 5가지의 파일로 구성이되어 있다.
- app.component.css : 말그대로 app이라는 컴포넌트의 css를 담당하는 파일이다.
- app.component.html: 말그대로 app이라는 컴포넌트의 html 즉 템플릿을 담당하는 파일이다.
- app.component.spec.ts: 테스트 코드라는데 어떤식으로 사용되는지는 잘 모르겠다.
- app.component.ts : 템플릿에 등장하는 변수나 메소드들을 세팅하는 파일이다. (물론 타입스크립트)
- app.module.ts : app이라는 컴포넌트의 공유성?(적절한표현을 못 찾겠다.)을 전체적으로 관리하는 파일이다.
사용자와 상호작용할 뷰를 구성 이라는 것은 app.component.html에서 주로 이루어질 것이고, 뷰와 연결된 일련의 로직을 개발은 app.component.ts에서 주로 이루어질 수 있음을 유추해볼 수 있다.
자, 그러면 어떤식으로 뷰가 구성되고 로직이 구성되는지 예제를 통해 한번 알아보자.
app.component.html
<h4><span>{{userName}}</span>!! welcome !!</h4>
<div class="contents">
<label for="user-name">name: </label>
<input type="text" name="user-name" id="user-name" #nameInput>
<button type="button" (click)="setName(nameInput.value)">submit</button>
</div>
import { Component } from '@angular/core';
app.component.ts
import { Component } from '@angular/core';
@Component({ //여기서 붙는 @는 이 클래스가 컴포넌트임을 알리는 표시
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userName = "";
setName(name) {
this.userName = name;
}
}
이 예제를 입력한 후에 ng serve
를 통해서 실행을 시키고 입력칸에 무언가를 적고나서 submit를 누르면 뭔가 페이지가 변함을 알 수가 있다.
ts파일에서 @Component의 @는 중요한 의미를 가진다. 이 클래스가 컴포넌트임을 알리는 동시에 메타데이터를 전달한다. 해당 메타데이터는 selector/ templateUrl/ styleUrls 가 있다. 뒤에 두개는 느낌상 뷰를 구성하는 실제 파일을 의미하는 것임을 알 수 있다.
selector도 조금만 더 찾아보면 src/index.html에
추가적으로 import { Component } from '@angular/core';
이 부분은 angular를 이용해서 빌드할 때 반드시 필요한 요소라고 생각하면 된다.
2. Component
앵귤러로는 뷰를 컴포넌트의 조합으로도 만들 수 있다. 뿐만 아니라 컴포넌트 역시 컴포넌트의 조합으로도 만들 수 있다.
먼저 Component를 생성해보자
ng g component 컴포넌트이름
cmd 창에 이런 명령어를 입력하게 되면 지정한 컴포넌트이름으로 컴포넌트를 만들 수 있다.
그러면 두개의 컴포넌트를 일단 만들어보자.
ng g component a
ng g component b
이렇게 cmd창에 입력을하고 나면 src/app 폴더안에 a폴더와 b폴더가 생성되어 있을 것이다. 명령어를 기반으로 컴포넌트를 생성하면 필요한 파일들이 자동으로 세팅이된다. 다만 app.component와 가장 큰 차이점은 a.module.ts와 b.module.ts가 없는 것이다. 하지만 app.module.ts 파일에 들어가보면 뭔가 꽤 추가가 되어있음을 확인할 수 있다. 일단 import하는 것과 declarations이 두개씩 늘었다.
app.module.ts
import { AppComponent } from './app.component';
import { AComponent } from './a/a.component'; //a컴포넌트를 import하는 것이 자동으로 됨
import { BComponent } from './b/b.component';
@NgModule({
declarations: [
AppComponent,
AComponent,
BComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
정확히 맞는지는 모르겠지만 이 app이라는 컴포넌트안에 a컴포넌트와 b컴포넌트가 일단 속해있음을 알 수 있다.
app.component.html
...
<app-a></app-a> //a.component.ts 파일의 선택자를 찾아보자 그러면 무슨 뜻인지 알 수 있다.
<app-b></app-b>
이렇게 추가해보면 a works! b works! 가 출력됨을 알 수 있다.
즉 종합해보면 Component를 어떤 모듈에 사용하기 위해서는 ~.module.ts파일에 import와 declarations를 선언해줘야 한다. 뿐만아니라 생성한 component의 ~.component.ts파일에서 반드시 export를 해줘야 한다.
3. 데이터 바인딩
데이터 바인딩이란?
데이터 바인딩 : 뷰와 컴포넌트에서 발생한 데이터의 변경 사항을 자동으로 일치화 시키는 것
앵귤러에서는 데이터바인딩을 기본적으로 제공해준다. 다만 우리가 해야할 것은 뷰와 컴포넌트 간의 관계를 확실히 선언애주는 것이다.
단방향 바인딩
단방향 바인딩이란 컴포넌트에서 뷰로, 혹은 뷰에서 컴포넌트 한쪽으로만 데이터를 바인딩 해주는 것이다.
단방향 바인딩은 크게 삽입식, 프로퍼티 바인딩, 이벤트 바인딩으로 나눌 수 있다.
1. 삽입식 : {{ 컴포넌트에 선언한 속성(쉽게변수명) }}
컴포넌트에서 선언한 속성을 위의 방식으로 뷰에서 사용할 수 있다.
2. 프로퍼티 바인딩 : [프로퍼티]="속성"
예를들면 DOM에 의하면 <button>
이라는 태그의 프로퍼티로 disabled가 있는데 그러한 프로퍼티를 []를 이용해서 바인딩하는 것이다.
...
[disabled]="a === '1'"
...
위 코드에서 <button>
태그의 프로퍼티 disabled를 A 컴포넌트의 a라는 속성과 1이라는 비교 결과값인 boolean 값과 바인딩(일치화)한다는 의미이다.
3. 이벤트 바인딩 : (DOM의 이벤트 핸들러)="메소드"
예를들면 click이라 <button>
의 이벤트핸들러를 ()를 이용해서 바인딩하는 것이다.
...
(click)="생성한메소드"
...
2번째인 프로퍼티 바인딩을 이해했다면 이벤트 바인딩이 이해가 안갈 수가 없다.
각 태그들의 이벤트 핸들러와 프로퍼티가 궁금하다면 구글에 검색하면 다 나온다.
양방향 바인딩
양방향 바인딩이란 컴포넌트와 뷰가 양쪽 모두 데이터를 바인딩 해주는 것이다. 양방향 바인딩을 사용하는 방법중 가장 쉬운 방법은 FormsModule
이 제공하는 NgModule
지시자를 활용하는 것이다.
쉽게 생각하면 흔히 우리가 사용하는 <form>
과 <input>
과 관련된 이야기이다.
양방향 바인딩은 후에 폼과 모듈을 다룰 때 좀더 자세히 설명하도록 하겠다.
'Front_End > Angular' 카테고리의 다른 글
05. Angular로 개발하기 - 3 - 구조 지시자 (0) | 2017.08.19 |
---|---|
04. Angular로 개발하기 - 2 - 서비스/의존성주입 (0) | 2017.07.29 |
02. Angular 시작하기 (0) | 2017.07.08 |
01. Angular 준비하기 (0) | 2017.07.07 |
00. Angular의 개념/구조 (0) | 2017.07.03 |