Angular | Angular 시작하기...

권기현·2020년 7월 7일

목록 보기

1/4

angular를 to-do리스트를 만들면서 학습해보았다. 앵귤러의 큰 틀에 대한 포스팅을 할 예정이다. 따라서 전문적이지는 않을 것 같다.
하지만 리액트나 뷰를 사용하던 사용자가 앵귤러를 사용했을때 어떻게 개념을 대조해가면서 공부했는지에 대한 정보를 적어볼 계획이다.

Angular

- 각 프레임워크(라이브러리)와의 차이

앵귤러에서도 다른 방법이 있겠지만 일단 내가 공부한 것을 토대로 보자면 react 는 jsx를 사용하기에 다른 프레임워크에 비해 html, css, js를 한 파일에 사용하기 용이하다. Angular 은 이를 각기 다른 파일에 분리하여 사용한다(css/ scss 사용시).

프로젝트 구성요소 생성

그냥 파일을 만들고 확장자를 붙히는 방법을 쓰다가 앵귤러로 넘어오면 당황할 수 있다. 왜냐하면 앵귤러에서는 구성요소를 만들기 위해서

ng generate ~ (=ng g ~)

라는 명령어를 사용한다.

대표적으로,

컴포넌트 생성
ng generate component component-name
(= ng g c component-name)
서비스
ng generate service service-name
(ng g s service-name)
모듈
ng generate module module-name
(ng g m module-name)

등이 있다.

위의 명령어에서 경로를 추가하는 방법도 있다. 이는 추후에 정리하도록 하겠다.

Angular의 동작 흐름

아래의 흐름대로 코드가 동작한다고 생각하고 읽어보면 된다. 중간 중간에 필요한 개념에 대한 설명과 함께 작성하였다.

Angular Module

component, pipe, services 등과 같은 앵귤러 어플리케이션을 구성하는 주요부분을 기능 단위로 그룹핑(모듈화)해준다.

✅ 앵귤러에서의 Module 개념잡기

아무래도 처음 앵귤러를 배우는 것이 아니라면 react나 vue의 흐름에 익숙해져서 module을 통한 기능의 단위를 나누는 것이 익숙하지 않을 것이다.

앵귤러에서는 "모듈" 이라는 큰 틀안에 각 모듈의 기능을 담당하는 여러 컴포넌트와 그 컴포넌트들에서 동작하는 html,ts,spec.ts,css 가 포함된다.

리액트나 뷰를 쓰시던 분들은 "앵귤러의 모듈" 을 "기능의 최상위 컴포넌트" 정도의 개념으로 일단 생각하면 공부하기에 편할 것이다.

👉 index.html

: index.html 웹 브라우저가 가장 먼저 로딩하는 프로젝트 파일
: 프로젝트의 메인 진입점이라고 할 수 있는 main.ts로 main.js가 연결해준다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PracticeAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="module/main.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

👉 main.ts

main.ts 는 프로젝트의 메인 진입점이다.
Root Module 을 정해준다.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 작성된 코드를 컴파일 후에 실제 실행될 수 있는 자바스크립트 코드를 만든다. 
// 이것을 "브라우저에서 다이내믹 하게 동적으로 하겠다." 는 의미이다.
// AppModule은 루트모듈이다. react의 index.js 같은 건가보다...

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

❖ AppModule은 app.component.ts에서 AppModule로 export된 것!

✅ 데코레이터(@~)

데코레이터는 JavaScript 클래스를 변형하는 함수다. Angular는 클래스가 어떤 특징을 가지며 어떻게 동작해야 하는지 메타데이터를 여러개 구현해두고 있다.데코레이터 더 알아보기

👉 app.module.ts

app.modules.ts 는 루트 모듈이다.
모든 앵귤러 애플리케이션은 단 하나의 루트 모듈 을 갖는다. (feature module은 여러개를 가질 수 있다.)
재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 한다.(ex 메테리얼 디자인의 MdButtonModule, 부트스트랩의 ModalModule -> 이부분은 더 공부가 필요.)
루트 모듈에 의해 부트스트랩된다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {TodoModule} from './todo/todo.module'

// @NgModule => typescript에서 제공해 주는 기능 (데코레이터)
// AppModule이 그냥 class가 아니라 NgModule이라는 것을 말한다.

@NgModule({

  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TodoModule ],
  providers: [],
  // AppComponent를 부트스트랩 한다? 이 말은 AppComponent를 index.html에 넣어주겠다는 의미
  bootstrap: [AppComponent]
})
export class AppModule { }

✅ 앵귤러에서의 Module 시스템

1) 루트모듈 생성하기 ( =app.module.ts)

최상위(루트) 모듈로 단 하나이고, 처음 실행할 때 같이 실행되는 모듈이다.
NgModule 데코레이터(@NgModule)
: 여러가지 속성들을 통하여 모듈의 세부 내용들을 설정할 수 있다.
: 메타데이터 객체 하나를 사용하는 데코레이터 함수. 중요한 프로퍼티는 아래와 같다.
- declarations : 컴포넌트를 사용하기 위해서 선언하는 곳 (단, 컴포넌트가 여러 모듈에 선언될 수는 없다. 단 하나의 모듈에만 선언 가능 => 그래서 다른 곳에서 사용하려면 exports에 선언)
- imports : 해당 모듈에서 사용할 외부 모듈을 작성한다.
- exports : 외부 모듈에서 사용되어질 컴포넌트를 작성한다. (모듈이 아니라 컴포넌트를 넣어줘야 한다!)
- providers : 전역에서 사용되는 서비스를 해당 객체에서 사용할 수 있도록 생성하고 지정한다. provider은 앱의 모든 곳에서 접근할 수 있다.
- bootstrap
  : 루트 컴포넌트라고 하는 메인 어플리케이션의 뷰를 선언한다. 쉽게 말해 해당 모듈이 시작되었을 때 우선적으로 실행될 컴포넌트를 지정한다.
  :기본은 AppComponent이고 bootstrap속성은 루트 모듈에만 존재한다.
- ✅ 위 속성 중에서도 declartions 속성에 어떤 컴포넌트를 넣을 것인가를 고려하는 것이 Angular 모듈화의 핵심이다.

2) 사용자 정의 모듈 생성하기

ng generate module module-name or ng g m module-name
위의 커맨드를 통해 모듈 생성
다음은 위의 루트모듈와 같이 NgModule 데코레이터(@NgModule) 를 사용하고
- declarations
- imports
- exports
- 쓰임은 루트모듈과 같다.

👉 app.component.ts

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

//보통 클래스가 아닌 component클래스라는 의미이다.
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Hello Angular!!!';
}

: 모든 컴포넌트의 부모 역할을 하는 루트 컴포넌트이다.
:app.component.ts의 selector인 'app-root'가 있다. 이 샐럭터는 app.component.html에서 로 쓰이고 루트 컴포넌트의 뷰가 로드되어 의 컨텐츠가 브라우저에 표시된다.

=> 리액트나 뷰에서는 export된 class명을 태그로서 사용했을것이다. 하지만 앵귤러 에서는 @Component안의 selector안에 클래스의 태그명을 정의하여 해당 컴포넌트의 템플릿(html)에 사용한다.

✅ 앵귤러에서의 Component

웹 어플리케이션의 뷰를 담당한다. 뷰는 내용(content)과 구조(structure)를 담당하는 HTML과 스타일(디자인, 레이아웃)을 담당하는 CSS, 마지막으로 DOM과 이벤트를 관리하기 위한 JavaScript가 필요하다.

Component는 위의 "HTML, CSS,JS"를 하나의 단위로 묶은 것이다.

여기에서 W3C표준인 '웹 컴포넌트'의 개념도 알아야하지만....깊은건 일단 대략적인걸 다 알고나서 들어가자.

Component 예시

//임포트 영역
import { Component, OnInit } from '@angular/core';


//@Component 데코레이터 영역
@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.scss']
})

//컴포넌트 클래스 영역
export class TodosComponent implements OnInit {

  newText='';
  todos: {
    done:boolean,
    text: string
  }[]

  constructor() {
    this.todos = [
      { done:false, text:'운동하기'},
      { done: true, text: '공부하기'}
    ];
   }

  ngOnInit(): void {
  }

  toggleTodo(todo){
    todo.done = !todo.done
  }
  addTodo(newText: string){
    this.todos.push(
      {
        done:false,
        text: newText
      }
    );
    this.newText = '';
  }

}

임포트 영역
@Component 데코레이터 영역
: 메타데이터를 객체로 전달
: 메타데이터는 컴포넌트 생성에 필요한 정보(셀렉터, HTML템플릿, CSS 등)을 담는다.
: 각 프로퍼티의 해당 파일의 경로 값을 가지고 있다.
컴포넌트 클래스 영역
: 뷰 관리를 위한 로직을 담는 클래스를 정의한다.
: 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰 관리에 집중!
=> 🌟 애플리케이션 공통 관심사는 서비스로 분리해야한다. 🌟
: @Component 바로 아래에 위치해야한다. 데코레이터와 데코레이터가 장식하는 클래스 사이에는 어떤 것도 있어서는 안된다.
(why? @Component 데코레이터는 자신의 바로 아래에 위치한 클래스를 컴포넌트 클래스로 인식하기 때문이다.)

위의 내용을 간단하게 정리해보자면

index.html -> main.ts -> 루트모듈 -> 각 모듈 -> 각 모듈의 컴포넌트 이런 식으로 로드된다.
또 리액트나 뷰와는 다르게 컴포넌트를 selector라는 프로퍼티를 통해서 템플릿에 사용할 수 있고 사용자 정의 모듈은 모두 루트모듈에 등록해주어야한다.

다음은 앵귤러의 컴포넌트에 대해서 자세히 다뤄보도록 할 예정이다.

👍

권기현

함께 일하고 싶은 개발자를 목표로 매일을 노력하고, 옷을 좋아하는 권기현 입니다.

다음 포스트

Angular | Angular 시작하기...

Angular

Angular

- 각 프레임워크(라이브러리)와의 차이

프로젝트 구성요소 생성

Angular의 동작 흐름

Angular Module

✅ 앵귤러에서의 Module 개념잡기

👉 index.html

👉 main.ts

✅ 데코레이터(@~)

👉 app.module.ts

✅ 앵귤러에서의 Module 시스템

1) 루트모듈 생성하기 ( =app.module.ts)

2) 사용자 정의 모듈 생성하기

👉 app.component.ts

✅ 앵귤러에서의 Component

Component 예시

👍

Angular | Component

0개의 댓글