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

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

lts0606.tistory.com/328

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

 

 

---

 

 

전시간에는 기본적인 환경 세팅에 대해 살펴 보았다.

뭐가뭔지 전부 알기에는 방대하므로 아직까지는 app.component.ts만 사용해서 차근차근 알아가도록 하자.

기존에는 window키와 R키를 누른뒤에 CMD를 입력해서 실행하였다면,

비쥬얼 스튜디오 코드에서는 Ctrl + ~ 키를 눌러서 cmd를 실행 할 수 있다.

 

명령어는 해당 프로젝트 디렉토리에서 ng serve를 입력하자.

요 ng serve 라는 명령어는 앵귤러를 개발할 때 필요한 테스트 서버를 동작시켜주는 역할을 한다.

일단..앵귤러를 개발하려면 ng serve를 입력해서 개발용 서버를 동작시켜주는 것으로 이해하자.

 

만약 위와 같은 화면을 만나지 못하였다면 걱정할 필요 없다.

비쥬얼 스튜디오코드를 실행한 뒤에 맨 위의 파일 - 폴더열기를 클릭하여주자.

아래 사진처럼 폴더열기를 클릭한 뒤에 이전시간에 만든 study 폴더까지만 선택하여주면 된다.

폴더 열기에서 study가 있는 곳 까지만 선택 하여야 한다!!!

 

실행이 되었다면 이제 자료형에 대해서 먼저 살펴보자.

Typescript 기반으로 만들어진 앵귤러는 Typescript언어의 자료형을 그대로 지원한다. 타입스크립트를 조금 살펴보려면 아래 링크에서 타입스크립트와 관련된 연습을 해 보아도 좋다.

https://lts0606.tistory.com/17

TypeScript 시작

 

이번에도 역시 constructor 내부에 코딩을 통해서 자료형의 종류를 살펴 보겠다.

앵귤러에서는 string, number, boolean 및 기타 배열 등 자바스크립트에서 사용되던 대부분의 자료형이 사용 가능하며,

자바처럼 접근제어자(private, public)의 기능도 지원한다.

예제코드를 살펴보자.

  constructor() {
    console.log('Working');  
    var number = 1;
    console.log('number -> ', number);  
    console.log(number * 10);
    var trueFalse = true;
    console.log(trueFalse);
  }

 

constructor부분만 보면 그리 어렵지가 않다. 콘솔 출력은 브라우저에서 볼 수 있다 http://localhost:4200/

문법적인 오류를 방지하기 위해서 자료형을 명시할 수 있게 지원해 준다.

아래 코드를 보자.

  constructor() {
    
    var num : number = 1;
    console.log(num);
    var text : string = 'text';
    console.log(text);

    var all : any = 'abcd';
    all = 1;
    
  }

 

"var 변수 : 자료형태 = 값" 이러한 규칙이 있다는게 놀라울 따름이다.

즉 해당 변수에 다른 자료형이 들어가면 오류가 나게 된다.

자세히 보면 any라는 녀석을 볼 수 있는데 해당 자료형은 모든지 받는, 즉 Object 개념을 지니고 있다.

swift가 생각나는건 뭘까..

다음 코드를 살펴보자.

  constructor() {
    
    var text : string = 'hello world';
    console.log(text);
    
    var num : number = 1234;
    console.log(num);
    
    var bool : boolean = false;
    console.log(bool);
    
    var method = (arg?) : void=>{ console.log(arg);}  //void로 선언
    //파라미터의 arg뒤에있는 ?(물음표)는 옵셔널이다. 있어도 되고 없어도 되는 값이다.
    // 당연히 var method : void는 안된다. 즉 함수에서 리턴값이 없을 때 붙인다.
    method('print');
    
    var data : any = null;  //객체값이 비어있음
    console.log(data);
    
    method();  //undefined 효과
  }

 

가운데 method 라는 녀석이 있다. 요녀석은 람다표현식으로 이루어 졌으며 자바스크립트로 비교하자면 아래처럼 표현 할 수 있다.

var method = function(arg){console.log(arg);}

method('print');

 

이미 눈치챘을지 모르겠지만 여태것 사용하던 constructor는 생성자를 의미한다.

즉, 해당 app.commponent.ts가 실행될 때 딱 한번만 최초에 무조건 같이 실행해 주는 역할을 한다.

굳이 왜 쓰는지는 나중에 알게 되므로 일단..무조건 딱 한번만 최초에 실행되는 함수라고 이해하자.

사용자가 어떠한 이벤트나 명령을 따로 주지 않아도 실행되는 함수라고 생각하면된다!!

 

그러면, 생성자에 전부 코딩을 할 수 없으니 다른 함수를 만들어 보겠다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'study';

  public printAll(arg){
    console.log(arg);
  }

  private print(arg){
    console.log(arg);
  }

  constructor() {
    var text : string = 'plain text';
    this.print(text);
    this.printAll(text);
  }
}

 

자바를 경험한 사람이라면 private와 public을 본 순간 이해했을 것이다.

public 이라는 접근 제어자는 외부 다른 곳에서도 해당 함수를 실행 할 수 있게 해주는 의미이며, private는 해당 app.component.ts 내부에서만 사용 가능하다는 의미이다.

뭔소리나면..

private가 붙은 함수는 다른 곳에서 호출을 못하고, public이 붙은 함수는 다른 곳에서 불러올 수 있다는 의미이다.

일반 자바스크립트에 비유하면..내가만든 function이 private가 붙으면 특정한 곳에서만 쓸 수있고, public이 붙으면 아무곳에서나 호출 가능하다고 보면 된다.

* 앵귤러 9.0이상의 버전에서는 private 접근 제어자가 붙을 경우 해당 컴포넌트에서만 접근이 가능하다.

* 다른 어떠한 곳에서도 private가 붙은 곳에는 접근이 불가능 하다   (2020-04-14 작성)

 

지금이야 파일 1개로 연습하지만 나중에 규모가 커지고 파일 갯수가 많아지게 된다면 private와 public의 의미가 잘 다가 올 것이다.

조금 특이한 것은 함수를 사용할 때 this를 붙여서 쓴 점이다.

this를 삭제하면 에러가 난다. 일종의 규칙이라 볼 수 있다.

모든 글로벌한 함수 및 변수는 반드시 this를 사용해 주어야 한다. (개발도구가 오류난다고 먼저 알려준다. ^^)

마찬가지로 멤버변수에게도 자료형과 접근제어자를 쓸 수 있다.

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

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

  private title : string = 'study';
  public num : number = 10;
  public all : any = new Array();

  public printAll(arg){
    console.log(arg);
  }

  private print(arg){
    console.log(arg);
  }

  constructor() {
    var text : string = 'plain text';
    this.print(text);  //규칙! this가 붙어야 한다!
    this.printAll(text);

    console.log(this.title, this.num, this.all);  //멤버들도 this를 써 주어야 한다.
  }
}

지금 것 살펴본 app.component.ts는 일종의 백그라운드(화면을 구성하는 이외의 기능)의 개념이라 볼 수 있다.

즉, 화면을 구성하는 기능은 따로 있고 데이터 처리 변수 정의 및 함수를 app.component.ts 곳에서 한다고 생각하면 된다.

음..Javascript로 치면 html파일에서 <script></script>의 역할을 하는 곳으로 생각하면 된다.

 

위 상단의 @Component라는 곳을 살펴 보면 내부에 templateUrl이라는 곳이 존재한다. 해당 파일 또한 src - app 폴더에 존재하는데 해당파일을 클릭해보자.

클릭하면 여태 껏 동작한 화면내용을 볼 수 있다.

여기있었군!!! html 파일내용이다.

 

자, 그럼 이 두개의 개념을 살펴보면 아래와 같은 정의를 낼 수 있다.

1. app.component.ts는 자바스크립트의 document.ready 이후 실행할 *.js 파일 같은 개념이다.

2. app.component.ts 내부 @Component안에 templateUrl은 화면을 구성하는 부분이다.

 

다음장에서는 이러한 app.component.html과 app.component.ts와의 관계에 대해서 살펴보도록 하자.

 

 

* 추가(2020-04-14)

 - private 와 관련된 속성이 해당 컴포넌트에서만 사용하도록 되어있습니다.

 - 앵귤러 버전을 9.0이상으로 사용중이신 분들은 외부에서 접근하는 변수나 함수에 대해서는 private부분을 제거하셔야 합니다.

private는 해당 컴포넌트에서만 접근하도록 바뀌었습니다.