앵귤러 튜토리얼(Angular tutorial) - 3 : 기본 구조

저번시간까지는 앵귤러 개발에 대한 환경구성, 그리고 사용하는 목적과 이유등에 대해서 살펴보았습니다.
이번시간에는 처음 설치한 firstStudy 프로젝트를 기반으로 앵귤러의 기본 구조에 대해 단계적으로 살펴보려 합니다.

앵귤러는 타입스크립트 기반으로 구성되어있습니다.
타입스크립트는 자바스크립트와 거의 동일하며, 큰 특징으로는 데이터의 형태(type)가 존재하여 조금 더 엄격한 코드관리가 이루어 질 수 있게 합니다.
타입스크립트에 대한 내용을 살펴보시려면 아래 사이트에서 연습을 해보시는 것도 좋습니다.

https://lts0606.tistory.com/17

TypeScript 시작

 

가장 먼저 살펴볼 것은 모듈(Module) - 컴포넌트(Component)의 관계입니다.
앵귤러에서 "모듈과 컴포넌트만 익히면 앵귤러는 끝!" 이라고 할 정도로 두 기능이 매우 중요합니다.
여기서 모듈이란, 각종 설정과 관련된 내용이 존재하는 파일입니다.
컴포넌트는 모듈이 만들어준 환경에서 동작하여 실제 화면에 관한 내용을 직접적으로 수행하는 파일 입니다.

우리가 일반적으로 자바스크립트로 작업을하면 html 파일에 <script/> 테그를 선언한 뒤에 다양한 함수, 객체등을 활용해서 html테그의 이벤트를 처리합니다.
그러나 앵귤러에서는,
모듈이라는 파일을 활용하여 각종 기능에 대한 규칙, 필요한 라이브러리 및 정보등을 관리하도록 합니다.
컴포넌트라는 파일에서는 html파일에서의 각종 이벤트에 대한 내용, 데이터에 대한 처리를 실시 합니다.
html파일에서의 <script/>에 기록된 다양한 함수, 객체등을 앵귤러에서 역할과 종류를 분리해 놓은 개념이 바로 모듈과 컴포넌트라고 생각하시면 되겠습니다.

 

이에 대해 먼저 알아볼 내용이 바로 컴포넌트입니다.
컴포넌트는 앵귤러에서 화면구성 및 각종 이벤트에 대해서 일을 수행하는 일꾼입니다.
컴포넌트를 찾아보려면 프로젝트 firstStudy에서 src - app 탭까지 이동한 뒤에 app.componnt.ts 파일을 선택하면 볼 수 있습니다.
해당 파일은 첫 번째 시간에서 constructor라는 함수를 붙여넣어 주었던 파일입니다.

Component라는 문구가 보이시나요?

우리는 app.componnt.ts 파일에서 @Component 라는 부분을 살펴볼 필요가 있습니다.
앵귤러에서의 컴포넌트는 class 파일에 @Component라는 꾸밈말(데코레이터)이 붙여진 파일을 의미합니다.
데코레이터는, 앵귤러에서 사용되는 일종의 명령어(예약어)이며, 해당 파일이 앵귤러에서 특수한 기능으로 사용되는 파일임을 알려줍니다.

 * class형태는 앵귤러의 기능이라고 하기 보다 ES6의 클래스 개념 or 타입스크립트의 클래스 개념이라 할 수 있습니다. ^^
 * class가 무엇인지 처음 보시는 분들은 아까 알려드린 링크 또는 Javascript class라고 검색하신뒤 연습해 보시는게 좋습니다!

 

그러므로 @Component 기호는 "컴포넌트 데코레이터" 라고 합니다.

다시 정리를하면 @Component 기호가 붙어있는 class파일은 앵귤러에서 컴포넌트를 의미합니다.
해당 파일이 어떻게 화면을 구성하는지 살펴보겠습니다.
"Ctrl + ~" 단축키를 누른뒤에 firstStudy 디렉토리로 이동합니다.
그리고 예전에 보았던 ng serve라는 명령어를 입력 합니다.

구동하는데 역시 시간이 좀 걸리는군요! 차분하게 기다려주세요 ^^

 

app.component.ts파일에서 title이라는 값 부분을 원하는 값 아무렇게 입력하여봅니다.
그리고 웹 주소 http://127.0.0.1:4200/ 를 입력하여 브라우저에서 실행하여 보면 아래 사진과같이 내용이 바뀌어서 출력됨을 볼 수 있습니다.

title이라는 곳의 값을 바꾸었는데 html 내용이 바뀌었습니다!!

 

html파일을 만진 것도 아닌데 내용이 바뀌어서 출력되는 것을 볼 수 있습니다.
바꾸고 싶은 값을 계속해서 입력해 보면, 입력한 내용이 상단에 출력됨을 알 수 있습니다.
이해를 위해 button테그를 만든 뒤에 이벤트를 부여하여 보겠습니다.
먼저 버튼이 눌릴경우 console을 통해서 내용이 출력되는 함수를 만들어 보겠습니다.

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

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

  constructor (){
    console.log('동작');
  }

  public clickAfterPrint () : void{
    console.log('출력');
  }
}

 

조금 익숙하지 않는 void라는 기호와 public이라는 기호가 나타났습니다.
public은 접근 제어자의 의미로 해당 함수가 어느 파일에서든지간에 사용 할 수 있음을 의미합니다.
void라는 타입은 해당 함수는 아무런 값을 반환하지 않는 것을 의미합니다.
접근제어자, 타입에 대한 내용은 다음시간에 다루어 보겠습니다.
일단 중요한 것은, click이벤트를 만들었다는 점 입니다.

 

그러면 src - app 탭안에 존재하는 app.component.html 이라는 파일을 더블클릭하여 봅니다.
그리고 html파일 내용을 전부지우고 아래처럼 바꾸어 줍니다. 

<button (click)='clickAfterPrint()'>{{title}} <-당신이 입력한 변수 title </button>

 

click이라는 기능은 아마도 클릭했을 때 이벤트를 의미하는 것 같습니다.
마치 html에서의 onclick처럼 기능으로 보입니다.
그리고 저장한 뒤 화면에서 버튼을 클릭하면 개발도구 콘솔에 정상적으로 "출력" 이라는 단어가 나오는 것을 볼 수 있습니다.

"출력" 이라는 단어가 잘 나오고 있습니다.

내용이 조금 어렵지만 핵심 부분은 "컴포넌트를 변경하니 웹 화면이 바뀌었다" 라는 점 입니다.

그러면, 다시 이제 app.component.ts 파일로 되돌아 가 보겠습니다.
컴포넌트 데코레이터 안에 내용을 자세히 살펴보면 templateUrl 이라는 문구가 보입니다.

 

아까 우리가 button 테그로 변경한 html 파일과 이름이 같습니다!
Component 데코레이터가 존재하는 파일에는 화면에서 보여줄 html 파일의 위치를 지정 할 수 있습니다.
이와 같이 화면구성에 사용할 html파일이 무엇인지, css는 무엇인지, 또는 사용되어질 데이터는 무엇인지 등등 다양한 내용등을 관리 하도록 기능을 부여한 것이 바로 컴포넌트입니다.

여기까지! 컴포넌트에 대해서 간단하게 알아보았습니다.
내용이 역시 쉽지가 않습니다..ㅠ
그래도 이번장에서 반드시 이해해야될 점은, "컴포넌트의 역할" 입니다.
화면구성과 관련된 내용은 컴포넌트라는점을 꼭 이해하여야 합니다.

다음시간에는 접근제어자, 타입에대한 설명을 컴포넌트를 통해서 이어나가보도록 하겠습니다.
궁금한점, 이해가 되지 않는부분은 언제든 연락주세요!

 

 

* 컴포넌트 파일(app.component.ts)

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

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

  constructor (){
    console.log('동작');
  }

  public clickAfterPrint () : void{
    console.log('출력');
  }
}

 

* Html 파일(app.component.html)

<button (click)='clickAfterPrint()'>{{title}} <-당신이 입력한 변수 title </button>

 

* 이번장의 파일모음입니다. 필요하시면 다운받아 적용해 보셔도 됩니다. ^^

app.7z

0.00MB

 

* 추가

앵귤러, 리엑트, 뷰js 등 프론트 프레임워크(라이브러리)는 대체적으로 버전이 자주 올라갑니다.

이에 따라 기존에 사용되었던 기능이 버전업에 따라 동작을 하지 않을수도 있습니다.

만약 동작을 원활하게 되지 않는다면 아래 package.json 내용에서의 의존성(dependencies) 버전을 맞추어 주세요.

  "dependencies": {
    "@angular/animations": "~9.1.4",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/forms": "~9.1.4",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "~9.1.4",
    "@angular/compiler-cli": "~9.1.4",
    "@angular/language-service": "~9.1.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }