[Angular] 모듈의 이해

---

모듈이란?

---

프로그램은 단순하것에서 부터 복잡한것으로 진화를 한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 존재한다. (아주 좋으 부품을 만들어서 사용한다고 생각하면 된다.)

그 중 하나가 코드를 여러개의 파일로 분리하는 것. 

분리시켜놓으니 => 원하는 코드 재활용이 가능하다. 필요한 로직을 빠르게 찾을 수 있다. 코드 개선시 이 코드를 사용한 모든 애플리케이션의 동작이 개선된다.

 

순수 자바스크립트에서 모듈이란 개념은 존재 하지 않는다고 한다. 

개발하는 애플리케이션의 크기가 커지면 확장성과 유지보수 측면에서 파일을 여러 개로 분리하는 시점이온다.

이때 분리된 파일 각각을 '모듈'이라고 부른다. 

 

내가 생각하는 모듈이란. 결국 코드의 묶음집 , 여러개의 파일로 분리하여 묶어놓은 코드의 묶음집

 

1. 자바스크립트에서 모듈은 특수한 지시자 export와 import를 통해 불러오고 내보내진다.

2. 모듈은 자신만의 스코프가있다.

3. 모듈 최상위 레벨의 this 는 undefined

4. 실제 애플리케이션을 출시할 때는 성능 개선 등의 이점 때문에 웹팩과 같은 번들러를 사용하여 모듈을 한 데 묶어(번들링) 프로덕션 서버에 올리는 방식을 사용.

 

 

recap  웹팩?

 

웹팩이란 모듈번들링을 의미한다.

html에 들어가는 자바스크립트파일을 => 하나의! 자바스크립트 파일로 만들어주는것

자바스크립트 파일 자바스크립트 파일 자바스크립트파일 겁나많음

얘네를 묶어서

 ------------------------> 모듈번들링 해줌

             ------------------------------------------> 하나로 뿅!

 

 

그래서 why. 하나로 묶어주는가

 

1. 하나로 묶으면 성능이 최적화된다.

2. 관리가쉽다.!!! 이유 : 오늘날 많이 쓰는 SPA (vue, react, angular)에서는 하나의 html파일에 여러개의 자바스크립트파일을 포함중이다. 연관되어있는 종속성파일들을 하나로 묶으면 관리하기가 쉽다. 

3. 여러개의 모듈읽으면 시간이 오래걸리지만 하나로묶은걸 읽으면? 더 빠르다!

 

 

---

앵귤러의 모듈

---

앵귤러 ts는 적어도 하나 이상의 모듈을 가지게 되어있다.

 

root module은 가장 처음 실행되는 모듈이다.

 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SectionComponent } from './section/section.component';
import { TimeDisplayComponent } from './section/time-display/time-display.component';
import { ButtonsComponent } from './section/buttons/buttons.component';

@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent, SectionComponent, TimeDisplayComponent, ButtonsComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

NgModule을 통해 클래스를 꾸며주게되면 모듈이 생성되게 된다.

 

앵귤러의 모듈은 자바스크립트의 모듈에서 더 발전한 상태다.

 

앵귤러 모듈에서의 exports는 자바스크립트의 exports와 같은 기능을 한다.

 

 

cli 명령어를 통하여 모듈 또한 생성을 할 수 있다.

 

ng g m layout

ng g c layout/test 를 통하여 만들어졌다.

 

 

import와 export?

 

export를 추가해보자!

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [TestComponent],
  exports: [TestComponent],

  imports: [CommonModule],
})
export class LayoutModule {}

이렇게 만들어진 LayoutModule을 

app module에서 import 를 해보자

 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SectionComponent } from './section/section.component';
import { TimeDisplayComponent } from './section/time-display/time-display.component';
import { ButtonsComponent } from './section/buttons/buttons.component';
import { LayoutModule } from './layout/layout.module';

@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent, SectionComponent, TimeDisplayComponent, ButtonsComponent],
  imports: [BrowserModule, AppRoutingModule, LayoutModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

결국 자바스크립트로 따지면 이것과 같은 흐름이다.

 

실제로 <app-test>를 사용할 수 가 있다.

LayoutModule을 Import하는데 testcomponent를 export를 하고있기에 사용 할 수 있다.

 

 

 

declaration?

 

말그대로 선언이다.

컴포넌트가 사용되어지려면 모듈에 하나정도는 등록이 되어 있어야한다.

 

 

의존관리를 앵귤러 모듈이 관리해주고있다. (의존성 주입) 

 

---

모듈화 방식 - 리팩토링

---

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SectionComponent } from './section/section.component';
import { TimeDisplayComponent } from './section/time-display/time-display.component';
import { ButtonsComponent } from './section/buttons/buttons.component';
import { LayoutModule } from './layout/layout.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    SectionComponent,
    TimeDisplayComponent,
    ButtonsComponent,
  ],
  imports: [BrowserModule, AppRoutingModule, LayoutModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

만들엇던 컴포넌트 중 

header와 footer는 레이아웃을 담당하고있다.

 

 

모듈은 두개이상의 등록이 될 수 없기때문에. app module에서 우선 header, footer를 삭제해줘야한다.

레이아웃모듈을 Import하고있으니 그곳으로 옮겨주자!

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HammerModule } from '@angular/platform-browser';
import { HeaderComponent } from '../header/header.component';
import { FooterComponent } from '../footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent],

  imports: [CommonModule],
})
export class LayoutModule {}

 

섹션도 ng g m section을 통하여 모듈을 만들어준다.

모두 이동!!

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SectionComponent } from './section/section.component';
import { TimeDisplayComponent } from './section/time-display/time-display.component';
import { ButtonsComponent } from './section/buttons/buttons.component';
import { LayoutModule } from './layout/layout.module';
import { SectionModule } from './section/section.module';

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from './section.component';
import { TimeDisplayComponent } from './time-display/time-display.component';
import { ButtonsComponent } from './buttons/buttons.component';

@NgModule({
  declarations: [SectionComponent, TimeDisplayComponent, ButtonsComponent],
  exports: [SectionComponent],
  imports: [CommonModule],
})
export class SectionModule {}

 

 

이제 의존성이 생겼다.

layoutmodule, sectionmodule없이는 app이 안돌아갈것이다.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LayoutModule } from './layout/layout.module';
import { SectionModule } from './section/section.module';

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