앵귤러 튜토리얼 (Angular tutorial) - 5

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

4회까지에 내용에서는 app.component.ts와 app.component.html과의 관계에 대해 알아보았다.

앵귤러라는 녀석이 동작을 할 때 사용자의 화면을 구성하기 위해서는 해당 컴포넌트.ts파일이 먼저 동작하고, 그리고나서 컴포넌트.ts파일에서의 설정에 의해 *.html파일이 만들어 지는 것 까지 이해하였다면 아주 간단한 게시판 같은 샘플코드를 작성해서 조금 더 이해해 보도록 하자.

 

제목이 있으면서, 내용이 존재하고 좌, 우 버튼을 통해 페이징이 되는 게시판을 간단하게 구현하여 보자.

물론 데이터베이스랑 실제 서버에서의 동작 개념이 아니므로 데이터는 하드코딩된 내용으로만 하자.

기존에 작성한 app.component.ts파일과 app.component.html파일을 이용하여 보자.

app.component.ts파일을 먼저 수정하자.

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

@Component({
  selector: 'app-root',  //뭥미?
  templateUrl: './app.component.html',  //ts가 동작하고 난 이후에 만들어질 html
  styleUrls: ['./app.component.css']    //해당 html의 css를 설정하는 곳
})

export class AppComponent {

  title : string = 'Title';//제목
  list : Array<any> = new Array();  //데이터를 그릴 대상

  leftButtonName : string = 'Left';  //왼쪽버튼 이름
  rightButtonName : string = 'Right';  //오른쪽 버튼 이름

  constructor() {  //생성자
    console.log('start');
  }

  goToServerAndGetData(type : string) : void{  //데이터베이스로부터 데이터를 가져오는 함수
    
  }

}

 

주석내용의 거의 전부이다. @Component 데코레이터에서 selector라는 부분은 일단 넘어가자.

해당 데코레이터에서는 templateUrl을 같은 디렉토리에 있는 app.component.html파일을 지정하였으며, 스타일(CSS)는 app.component.css 파일을 대상으로 하도록 지정되어 있다.

 

또한 아직 익숙하지 않는 표현식이 "변수명 : 반환타입" 형식인데...익숙해 지도록 노력해야 한다.

그리고 여태껏 보지 못한 <any>라는 표현식이 나왔는데..자바를 경험해본 사람은 바로 이해할 수 있는데..그렇지 않는사람은 좀 당황스러울 것이다.

 

해당 내용은 제네릭이라 하며, 여러 종류의 자료형을 받을 때 사용된다.

자료형에 대한 표현방법이 어렵다면 아래 참고주소를 통해 조금 더 숙달해 보자. 이해가 되지 않는다면 배열을 만들 때 일단 "저렇게 쓰는구나~" 하고 넘어가도록 하자.

 

만약 오류문구(버전에 따라)가 보이거나 이해가 되지 않으면 <any>부분은 지워도 상관 없다.

https://lts0606.tistory.com/18

Typescript 자료형

 

다음으로는 app.component.html파일을 수정하여 보자.

<h3>{{title}}</h3>  <!-- 앞서 선언된 title 변수-->

<table>
  <tr>
    <th>Number</th><th>Name</th><th>day</th>
  </tr>
</table>
<input type="button" value="left" />
<input type="button" value="right" />

 

뭐 여기까지는 어렵지가 않다. 저 위 상단의 title이라는 내용이 컴포넌트.ts에서 선언한 변수명이 적용되었음을 알 수 있는점이 조금 특이할 뿐이다.

그런데, 사용자가 처음 접속해서 아무런데이터가 나오지 않는다면 황당해 할 것이다. 게시판에 빈 화면을 보여주지말고 2개정도 기본값을 보여주도록 하여 보자. 컴포넌트.ts파일로 돌아가 수정하여보자.

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

@Component({
  selector: 'app-root',  //뭥미?
  templateUrl: './app.component.html',  //ts가 동작하고 난 이후에 만들어질 html
  styleUrls: ['./app.component.css']    //해당 html의 css를 설정하는 곳
})

export class AppComponent {

  title : string = 'Title';//제목
  list : Array<any> = new Array();  //데이터를 그릴 대상

  leftButtonName : string = 'Left';  //왼쪽버튼 이름
  rightButtonName : string = 'Right';  //오른쪽 버튼 이름

  constructor() {  //생성자
    console.log('start');  //생성자는 컴포넌트 파일이 읽히면서 자동으로 실행되는 메소드 이다.
    this.goToServerAndGetData('first');  //처음 데이터를 가져오는 효과를 추가 하자.
  }

  goToServerAndGetData(type : string) : void{  //데이터베이스로부터 데이터를 가져오는 함수
    this.list = new Array();
    if(type == 'first'){  //퍼스트가 들어오면
      this.list.push([1,'제목1번 입니다.','2019-05-28 09:00:00']);
      this.list.push([2,'제목2번 입니다.','2019-05-28 09:10:00']);
    }
  }

}

 

여기까지도 어렵지는 않다. 생성자를 통해서 데이터베이스에서 정보를 가져오는 함수를 실행시키도록 하였다.

list라는 변수를 보면 <any>라는 제네릭이 있는데, 어떠한 내용이던지 간에 다 받을 수 있다는 의미이다. 만약 해당 부분에 number, string 등을 선언한다면 오직 number나 string만 받을 수 있다.

 

이제 사용자가 처음 접속한 다음에 데이터가 화면에 띄울일만 남았다.

저번시간에 언급 하였던 ngIf와 ngFor를 사용해보도록 하자. 요녀석들은 디렉티브라 불리운다.

app.component.html파일을 열어서 ngIf와 ngFor를 추가하자.

<h3>{{title}}</h3>  <!-- 앞서 선언된 title 변수-->

<table>
  <tr>
    <th>Number</th><th>Name</th><th>day</th>
  </tr>

  <tr *ngFor="let item of list">  <!-- list변수의 크기가 0보다 크면 반복문을 실행한다. -->
    <td>{{item[0]}}</td>   <!-- ts파일에 list에 담은 변수가 배열로 되어있었다. -->
    <td>{{item[1]}}</td>  <!-- ngFor가 동작하면 해당 노드(html 테그)가 같이 반복되어 생성된다. -->
    <td>{{item[2]}}</td>
  </tr>
</table>
<div *ngIf="list.length > 0">ngIf가 없어도 ngFor 자체도 크기가 0이상이어야만 동작 하는구나</div>
<div *ngIf="list.length == 0">배열크기가 0이면 보이겠다.</div>
<input type="button" value="left" />
<input type="button" value="right" />

 

흥미로운점은 ngFor문이 대상의 크기가 0 이면 자동으로 동작하지 않는다는 점이다.

확인하고 싶다면 앞서 생성자(constructor)에서 선언한 goToServerAndGetData 부분을 주석처리하여보면 알 수 있다.

그럼이제 버튼에 기능을 달아서 페이징효과를 한번 흉내내어 보자.

html파일에서 click 이벤트를 부여하자.

<input type="button" value="left" (click)='goToServerAndGetData("left");'/>  <!-- 왼쪽으로 가자 -->
<input type="button" value="right"(click)='goToServerAndGetData("right");' />  <!-- 오른쪽으로 가자 -->

 

자바스크립트에서는 onclick이지만 앵귤러에서는 (click) 이다. 컴포넌트.ts파일에 왼쪽과 오른쪽일 때 해야 되는 행동을 추가하여 보자.

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

@Component({
  selector: 'app-root',  //뭥미?
  templateUrl: './app.component.html',  //ts가 동작하고 난 이후에 만들어질 html
  styleUrls: ['./app.component.css']    //해당 html의 css를 설정하는 곳
})

export class AppComponent {

  title : string = 'Title';//제목
  list : Array<any> = new Array();  //데이터를 그릴 대상  
  // *해당부분에 오류가 발생하면 private list = new Array();를 사용 하여 주자.

  leftButtonName : string = 'Left';  //왼쪽버튼 이름
  rightButtonName : string = 'Right';  //오른쪽 버튼 이름

  constructor() {  //생성자
    console.log('start');  //생성자는 컴포넌트 파일이 읽히면서 자동으로 실행되는 메소드 이다.
    this.goToServerAndGetData('first');  //처음 데이터를 밀어넣어보도록 하자.
  }

  goToServerAndGetData(type : string) : void{  //데이터베이스로부터 데이터를 가져오는 함수
    this.list = new Array();
    if(type == 'first'){  //퍼스트가 들어오면
      this.list.push([1,'제목1번 입니다.','2019-05-28 09:00:00']);
      this.list.push([2,'제목2번 입니다.','2019-05-28 09:10:00']);
    } else if(type == 'left'){  //왼쪽효과
      this.list.push([-4,'제목 -4번 입니다.','2019-05-28 08:10:00']);
      this.list.push([-3,'제목 -3번 입니다.','2019-05-28 08:20:00']);
      this.list.push([-2,'제목 -2번 입니다.','2019-05-28 08:30:00']);
      this.list.push([-1,'제목 -1번 입니다.','2019-05-28 08:40:00']);
      this.list.push([0,'제목 0번 입니다.','2019-05-28 08:50:00']);
    } else { //오른쪽 효과, 비어있는 효과

    }
  }

}

 

처음 화면에서 내용도 잘 보이고 버튼을 눌렀을 때 ngFor와 ngIf 디렉티브도 잘 동작함을 알 수 있다.

뭔가 밍밍한데...스타일을 한번 줘 보도록 하자.

테이블 테그에 클래스명을 추가하자.

<table class='table'>

 

그리고 여태껏 사용하지 않았던 app.component.css파일을 건드려 보도록 하자.

.table{
    width: 100%;
    border: 1px solid gray;
}
.table tr td{
    text-align: center;
    border: 1px solid gray;
}

만약 css와 관련된 내용을 전혀(?)모른다면 해당 선언은 그냥 테이블 테그에 넓이와 정렬, 선색을 추가하는 정도로만 이해하면 된다. 적용하고 저장하면 바로 색이 입혀진 테이블이 그려진다.

 

요래화면이 나온다.

 

이처럼 앵귤러는 프론트에서 조차도 화면을 그릴 html과 데이터를 관리할 ts 부분이 완벽하게 나누어 져 있어서 소스코드 관리가 나름 잘 됨을 알 수 있다.

여기까지 이해가 되지 않는다면 처음으로 돌아가 다시 천천히 살펴봐야 한다.

사실, 앵귤러 자체가 진입장벽이 높은 편이라..자바스크립트가 미숙한 사람들에게는 매우 어렵고 익히기가 쉽지 않다.

 

아무튼, 여기까지 이해하였다면 드디어 감(?) 잡은것이라 볼 수 있다.

다음장에서는 조금 어렵지만 여태껏 살펴보지 않고 넘어갔던 다른 파일들(app.module.ts, main.ts 등등..)의 역할과 관계에 대해서 살펴보자.