Mudule & Component

앵귤러는 모듈 - 컴포넌트만 익히면 끝난다는 말이 있을 정도로 중요하다고 한다.
(구글 & 책 & GPT가 ㅎ)

• 모듈
  모듈은 애플리케이션의 부분적인 기능을 정의하고 관련된
  컴포넌트, 서비스, 디렉티드 등을 그룹화한다.
  여기에는 @NgModule 데코레이터를 사용하여
  모듈을 정의하는 코드가 포함된다.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

위의 코드에서 AppModule은 애플리케이션의 주요 모듈로 ,
"declarations" 배열에는 이 모듈에서 사용되는 컴포넌트('AppComponent')를 등록한다.
"imports" 배열에는 다른 모듈을 가져오는데 사용된다.
"bootstrap" 배열에는 애플리케이션의 시작 컴포넌트를 지정한다.

• 컴포넌트
  컴포넌트는 사용자 인터페이스를 구성하고 해당 부분의 동작을 제어하는 역할을 수행한다.
  각 컴포넌트는 TypeScript 클래스로 정의되며, @Component 데코레이터를 사용하여
  메타데이터를 추가한다.

// app.component.ts

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

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

위의 코드에서 AppComponent는 애플리케이션의 주요 컴포넌트로 ,
HTML 템플릿과 컴포넌트 클래스가 정의되어 있다.
이 컴포넌트 클래스는 "title" 속성을 가지고 있으며, 이 속성은 템플릿에서 사용된다.

요약하자면,
모듈 은 애플리케이션의 기능을 그룹화하고 구성
컴포넌트 는 사용자 인터페이스를 저의하고 해당 동작을 제어