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

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

lts0606.tistory.com/328

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

 

저번시간에는 컴포넌트, 모듈, 메인.ts 와의 관계와 역할에 대해서 살펴 보았다.

다시한번 기억을 더듬어 보자.

컴포넌트 파일은 브라우저에서 화면을 구성하는 파일이다.

모듈 파일은 그러한 컴포넌트 파일들을 관리하는 파일이다.

그리고 메인파일은 처음 실행 할 모듈(컴포넌트를 넣어도 되지만, 그러한 방법은 잘 쓰지 않는다)을 선택해주는 파일이다.

 

사실 모듈에서의 역할은 조금 더 세분화 할 수 있다.

앞서 이야기하였지만, 모듈 다른역할도 하고있는데 서로 필요한 자원을 공유 한다던지 아니면 다른 모듈을 불러와서 사용 할 수 있게 하는 등 이러한 역할도 병행해서 하고 있다.

음..말이어렵다..

맨처음 생성된 app.module.ts파일을 열어보자.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { OtherComponentComponent } from './other-component/other-component.component';  //추가되었다.

@NgModule({
  declarations: [  //디클라레션(선언), 사용할 컴포넌트 목록
    AppComponent, OtherComponentComponent  //추가 되었다.
  ],
  imports: [
    BrowserModule  //  -->>>>>> 아니..너 모듈이였네??
  ],
  providers: [],//프로바이더스(공급자), 설정한 정보를 자동 제공
  bootstrap: [AppComponent] //부트스트랩(시작), 메인으로 등록할 컴포넌트
})
export class AppModule { }

 

사실 우리는 애초 처음부터 다른 모듈을 등록하여 사용하고 있었다. 가운데 imports 부분에 BrowserModule이 보이는가? 해당 부분이 앵귤러의 핵심모듈중 1개인 브라우저모듈이다.

이 모듈이 하는 역할은 간단하게 살펴보면, 잠깐 맛 보았던 ngFor랑 ngIf 같은 명령문을 html파일에서 만나면 해당 행동에 생명을 불어넣어주는 역할을 하는 녀석이다.

이처럼 앵귤러의 대부분의 구조는 모듈로 이루어져 있다.

 

어떠한 모듈을 가져다 쓰는것은 마치 자바스크립트에서 라이브러리를 가져다 쓰는 것과 거의 동일한 행위라고 볼 수 있다. 이렇게 ----> <script src='어떤라이브러리.js'></script>

 

그럼 앞으로 다른 개발자님(?)들이 만든 여러 라이브러리를 가져다 사용하기 위해서는 내가 만든 모듈에 import를 하면 되겠다는 것을 알 수 있게 되었다. 모르면 안되는데...

재미있는점은 이러한 모듈은 어떠한 기능 또는 데이터도 관리하거나 공유 할 수 있다.

아래처럼 모듈 파일의(app.module.ts)코드를 변경하여 보자.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { OtherComponentComponent } from './other-component/other-component.component'; 

@NgModule({
  declarations: [ 
    AppComponent, OtherComponentComponent 
  ],
  imports: [
    BrowserModule  
  ],
  providers: [{provide:'title',useValue:'제목'}],//이것은?
  bootstrap: [AppComponent] 
})
export class AppModule { }

 

중간에 providers라는 부분에 json형태로 공급, 사용값 이라는 개념의 내용을 추가하였다.

providers: [{provide:'title',useValue:'제목'}]

app.component.ts파일로 이동해서 아래처럼 수정하여 보자.

import { Component, Inject } from '@angular/core';  //여기 import를 해야합니다!!!!!

@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 leftButtonName : string = 'Left';  //왼쪽버튼 이름
  private rightButtonName : string = 'Right';  //오른쪽 버튼 이름

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

  //생략...
}

 

constructor는 생성자라는 의미이다. 예전에 배운기억을 더듬으면, 컴포넌트가 만들어 질 때 바로 실행시켜주는 녀석이다. 그런데..처음보는 데코레이터인 Inject가 입력되었다.

해당 데코레이터는 모듈에서 어떠한 데이터가 제공(provide)되면 해당 이름을 통해 최초 컴포넌트가 만들어 질 때 받을 수 있게 해준다.

모듈파일을 다시한번 살펴보자.

providers: [{provide:'title',useValue:'제목'}]

중간쯤 해당 부분에서 provide를 title로 하였다. 그리고 useValue를 제목이라 하였으니, 위 코드가 실행되면 "제목" 이라는 내용이 출력됨을 알 수 있다.

이전시간에 만든 다른 컴포넌트에도 내용을 한번 입력하여보자.

import { Component, OnInit, Inject } from '@angular/core';  //import 중요하다!!!

@Component({
  selector: 'app-other-component',
  templateUrl: './other-component.component.html',
  styleUrls: ['./other-component.component.css']
})
export class OtherComponentComponent implements OnInit {  //implements는 일단 넘어가자

  constructor(@Inject('title') title : string) {   //여기 생성자에 모듈에서온 데이터 받겠다고 써 준다.
    console.log(title);
  }

  ngOnInit() {  //이것도 일단 넘어가자, 지우지는 말자.
    
  }

}

 

왓..마찬가지로 출력됨을 알 수 있다.

이처럼 모듈에서는 다른 모듈을 사용할 수 있게 해주는 것 뿐만 아니라 특정 데이터도 공유하고 관리 할 수 있음을 알 수 있었다.

여기서 한번 더 해볼만한 것이 다른모듈이 뭐 있는지 한번 사용해보도록 하자.

앞으로 자주 만나볼 FormsModule 이라는 녀석을 사용 해 보자.

모듈을 사용하려면 어떻게한다? 내 모듈에 등록하면된다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //폼 모듈입니다.

import { AppComponent } from './app.component';
import { OtherComponentComponent } from './other-component/other-component.component';  

@NgModule({
  declarations: [  
    AppComponent, OtherComponentComponent 
  ],
  imports: [
    BrowserModule ,
    FormsModule  //새로추가한 폼 모듈
  ],
  providers: [{provide:'title',useValue:'제목'}],
  bootstrap: [AppComponent] 
})
export class AppModule { }

 

근데..이녀석은 뭐하는데 사용되는 걸까? 두번째로 만들었던 컴포넌트 파일을 수정하여보자.

other-component.component.ts를 수정하여 보자.

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

@Component({
  selector: 'app-other-component',
  templateUrl: './other-component.component.html',
  styleUrls: ['./other-component.component.css']
})
export class OtherComponentComponent implements OnInit {  

  im_text : string = 'im text';  //단순한 텍스트 변수

  constructor(@Inject('title') title : string) { 
    console.log(title);
  }

  ngOnInit() { 
    
  }

  changeModel(){  //text값을 변경
    this.im_text = 'change text';
  }
}

 

해당 other-component.component.html 파일 내용을 바꾸어 보자.

<p>
  other-component works!
</p>


<div>
  <input type="text" [(ngModel)]="im_text" />  <!--이건 처음보는거다...-->
  <input type='button' value='change' (click)='changeModel()' /> <!--방금 만든 데이터 변경 메소드-->
</div>

 

또 처음보는 녀석이 등장했다. [] 안에 (ngModel)이라는 값이 있는데 뭔 내용인지는 모르겠지만 내가 선언한 변수명과 동일하게 되어 있다.

 

아..그런데 실행은 하고있는가? 실행방법은 해당 디렉토리에서 ng serve라는 명령어이다. 잊지 말자.

버튼을 눌러보면 내용이 바뀌는 것을 알 수 있다.

ngModel이라는 녀석은 어떤 데이터의 key, value 형태의 동작을 하는 것 처럼 보인다.

실제로 내용도 그러하다. ngModel에 내가 원하는 변수명을 써 주고, 컴포넌트 파일에서 해당 변수명이 일치하면 데이터가 변할 때 자동으로 해당 값을 바꾸어준다.

 

마치 jquery에서의 $(아이디).val(); 과 같은 개념, 자바스크립트에서 document.getElementById.value와 개념이 같다.

이러한 기능을 누가 쓸 수 있게 해주었는가 하면 바로 FormsModule, 앵귤러에서 제공하는 모듈이 이러한 기능을 사용 할 수 있게 해주었다.

정리하여보자.

1. 모듈은 컴포넌트를 관리하여준다.

2. 모듈은 다른 모듈을 사용 할 수 있게 해 준다.

1) 모듈 파일에서 import를 통해서 경로를 써 주고(import {대상} from '경로' )

2) 모듈 데코레이터 중간의 imports 부분에 해당 대상이름을 써준다.

3. 모듈은 자원을 공유 할 수 있게 해준다. * 차후 좀 더 알아보자.

1) 공유할 자원을 providers에 의해서 공급하면 된다.

 

가장 어려운 7번장을 끝내고, 8번장을 이해하였다면 이제 앱을 만드는 아주 기초중의 기초는 끝이 났다.

해당 내용을 외우지 않아도 흐름을 이해하고 반복숙달한다면 문제는 없다.

다음장에서는 이제 본격적으로 게시판을 만들어 보자.

 

게시판 이후에는 실제 데이터베이스와의 관계는 어떻게 해야되는지, 만들어진 파일을 실제 서버에 어떻게 배포하는지와 요즘(?) 핫한 파이어베이스 사용법까지 차근차근 알아보도록 하자.