IT 회사에서 즐겁게 지내기!

이번에는 Angular의 두 번째 Directive를 보겠습니다.

Attribute Directive는 DOM에 스타일과 동작을 부여했죠?

Structural Directive는 DOM 자체를 추가 제거합니다.

짧은 설명으로는 이해가 어려우니 예제를 살펴보겠습니다.

ngIf 라는 Directive를 사용해볼게요.

ngIf 를 이용하면 조건에 따라 DOM을 추가/제거할 수 있습니다.

<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: 
      <span *ngif="buget!==""">&#8361;</span>{{budget}}</h3>

'원'표시를 span 태그로 감싸주었습니다.

그리고 *ngIf 라는 directive를 안에 넣어주었죠.

그 안에는 조건문이 들어갑니다.

조건을 만족시키면 span을 보여주고, 아니면 제거하는 겁니다.

budget 값이 빈문자열이라면 가격표시가 사라집니다.

재미난 것은 span 태그가 숨겨지는게 아니라 실제로 사라집니다.

크롬의 개발자 도구에서 보면 정확히 보이는데요.

ngIf를 활용한 DOM의 생성과 삭제

위와 같이 필요에 따라 DOM의 생성, 제거를 제어할 수 있습니다.

Structural Directive의 활용은 다양할 수 있겠죠?

Validation Message를 띄워준다든지 하는 것들이요.

참고로 ngIf 앞의 *표시는 Structural Directive임을 나타내는 syntax 입니다.

대표적으로 *ngFor라는 녀석도 있습니다.

다음에 필요시 사용해보도록 할게요.

소스주소: https://github.com/jsrho1023/account-book

알게 모르게 계속 사용했던 Directive에 대해서 살펴보겠습니다.

Directive를 번역하자면 지시자 라고 할 수 있겠네요.

HTML에 Angular가 간섭할 부분을 표시한다라고 이해하면 쉽습니다.

Component 역시 template이 포함된 Directive로 정의하는데요.

<app-root> 기억하시죠?

이 부분에 app-component를 표출해달라는 표시였습니다.

Component는 별도로 치고, Directive에 2가지가 더 있습니다.

Structural Directive와 Attribute Directive입니다.

2가지 Directives의 차이는 DOM을 다루는 방식입니다.

Structural Directive는 DOM을 추가하거나 제거합니다.

Attribute Directive는 이미 있는 DOM에 스타일이나 동작을 부여합니다.

Angular가 간섭해야함을 표시한다는 걸 기억해주세요.

오늘은 먼저 Attribute Directive를 살펴볼게요.

Angular의 Directive는 마치 HTML에 존재하는 속성처럼 사용됩니다.

스스로 custom directive를 정의할 수도 있습니다.

하지만 이미 만들어진 ngStyle을 보며 directive를 이해해보죠.

<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: &#8361;{{budget}}</h3>

h3 태그에 ngStyle Directive를 추가하였습니다.

마치 html 속성에 property binding을 한 모양새죠.

ngStyle의 값으로 css와 같이 key, value 쌍을 넣었습니다.

그리고 조건문도 들어갔죠.

budget 값이 1000이하면 노란배경에 빨간글씨가 됩니다.

ngStyle 적용 화면

ngStyle이라는 건 원래 html에 정의되어있지 않습니다.

즉 태그에 ngStyle이라고 표시되면 Angular가 간섭을 한다는 의미죠.

ngStyle의 실제 코드를 대략 살펴보면 아래와 같습니다.

@Directive({ selector: '[ngStyle]' })
class NgStyle implements DoCheck {
  set ngStyle: {...}
  ngDoCheck()
}

마치 Component에서처럼 selector가 존재하죠.

Anguar는 저 selector를 찾아서 HTML에 스타일을 입히는 겁니다.

ngStyle 뿐 아니라 ngClass와 같이 정의된 directive가 더 있습니다.

기회가 되면 차차 사용하면서 배우구요.

다음에는 Structural Directive를 사용해보면서 익혀보겠습니다. 

소스주소: https://github.com/jsrho1023/account-book

서비스를 개발할 때 디자인에 대한 고민을 하게 됩니다.

각 요소의 컬러나 자잘한 인터랙션 등도 포함해서요.

이미 전문가가 고민한 디자인을 입힐 수 있다면 어떨까요?

그래서 Angular에 Material 디자인을 적용해보려합니다.

고맙게도 Angular 팀이 구글의 Material 디자인을 준비해두었어요. 

아래의 명령어를 통해 기본적인 설치를 진행합니다.

Material 디자인이 적용된 Module을 받는 거에요.

npm install --save @angular/material 
npm install --save @angular/cdk
npm install --save @angular/animations

Angular Module이기 때문에 사용하기 위한 설정이 필요합니다.

1. import

데이터바인딩을 위해 ngModel을 사용할 때 FormsModule을 썼죠?

동일하게 사용하고자 하는 component를 import해야 합니다.

현재 사용하고 있는 input과 button에 적용해보겠습니다.

import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    ...,
    imports: [
        BrowserAnimationsModule,
        MatInputModule,
        MatButtonModule
    ],
    ...
})
export class AppModule { }

위와 같이 해당하는 MatInput, MatButton 모듈을 import 해야합니다.

transition 효과를 위한 BrowserAnimation 모듈도 마찬가지죠.

@NgModule의 imports에 추가합니다.

그러면 첫 번째 설정이 완료됩니다.

2. style

디자인 관련하다보니 style 부분을 처음 이야기하게 되네요.

오늘 이야기할 부분은 src폴더 아래의 style.css 입니다.

angular-cli로 생성한 컴포넌트에도 css 파일이 있었죠?

그 파일에는 각 component에 적용될 디자인이 들어갑니다.

캡슐화되어 다른 component에는 적용되지 않죠.

그렇다면 component 전체적으로 적용할 디자인은 어디에 넣을까요?

바로 src폴더 아래에 style.css에 넣어줍니다.

Material 디자인 Theme과 같은 것들 말이지요.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

style.css에 위와 같이 추가해주면 material theme이 적용됩니다.

총 4가지 theme이 있어요. 맘에 드는 걸 고르시면 됩니다.

1) deeppurple-amber.css

2) indigo-pink.css

3) pink-bluegrey.css

4) purple-green.css

이름은 Primary-Accent 컬러의 조합으로 되어있습니다.

이미지로 보면 아래와 같아요. 

angular pre-built theme

마음에 드는 걸 사용하면 됩니다.

스스로 color를 정의할 수도 있어요.

Basic, Primary, Accent, Warn, Disabled, Link 컬러를 바꾸면되죠.

저는 아직 그쪽은 약하니 이미 정의된 걸 사용하겠습니다.

이제 Material 디자인을 사용하기 위한 설정은 마쳤습니다.

html코드에 적용해보도록 할까요?

<div class="mat-app-background">
    <h3>My Budget: &#8361;{{budget}}</h3>
    <mat-form-field>
        <input matInput 
               placeholder="budget" 
               type="text" 
               [(ngModel)]="budget"/>
    </mat-form-field>
    <button mat-raised-button 
            color="primary" 
            (click)="onAddIncome()">Add Income</button>
</div>

보기 쉽도록 줄바꿈을 좀 해봤습니다.

div 태그로 전체를 싸줬구요.

Theme의 배경색을 위해 mat-app-background 클래스를 추가합니다.

제가 고른 배경은 흰색이라 딱히 변화는 없어요.

그리고 input 태그는 mat-form-field 라는 태그로 싸줍니다.

Theme이 적용되기 위해서지요.

그리고 matInput 이라는 directive를 넣어주면 input은 완성입니다.

button의 경우 다른 별도의 태그가 필요없습니다.

mat-button이나 mat-raised-button directive를 넣으면 됩니다.

color는 라는 attribute를 사용하여 색을 입힙니다.

결과 화면은 아래와 같습니다.

angular-material theme 적용

Placeholder가 움직이는 마이크로인터랙션은 덤.

material angular에는 여러가지 component가 더 있습니다.

아래 출처에서 참고할 수 있어요.

저도 진행하면서 더 사용해보도록 하겠습니다.

소스주소: https://github.com/jsrho1023/account-book

출처:

Angular Material(https://material.angular.io/)

html과 ts파일 간 바인딩을 살펴보고 있는데요.

지금까지는 단방향의 바인딩을 사용해보았습니다.

요약하면 아래 3가지네요.

{}: String Interpolation 

[]: Property Binding 

(): Event Binding 

이번에는 양방향 데이터 바인딩을 보겠습니다.

ngModel 이라는 directive를 이용하는 건데요.

생소한 용어가 2가지 있습니다.

ngModel은 html과 ts가 양방향으로 묶여있다는 개념입니다.

사용 예시를 보면서 좀 더 설명하구요.

directive는 나중에 자세히 다뤄보겠습니다.

ngModel을 사용하기 위해서는 FormsModule이 필요합니다.

import { FormsModule } from '@angular/forms';

@NgModule({
    ...,
    imports: [ 
        FormsModule
    ],
    ...
})
export class AppModule { }

위와 같이 app.module.ts 파일에 이를 명시해주도록 하죠. 

(불필요한 코드는 생략하고 추가된 코드만 넣었습니다.)

그리고 html 파일에 ngModule을 이용하기 위한 코드를 추가하겠습니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [(ngModel)]="budget">
<button (click)="onAddIncome()">Add Income</button>

위 코드에서 중요한 부분은 [(ngModel)] 입니다.

일명 banana syntax 라고 하는 [()]로 ngModel을 감싸줍니다.

결과 화면은 아래와 같습니다.

ngModel을 활용한 바인딩

위와 같이 html의 input 값이 바뀌면 ts의 budget 값이 바뀝니다.

마치 html과 ts의 값이 바로 엮여있는 듯한 느낌이 들죠.

하지만 엄밀히 말하면 양방향 바인딩은 존재하지 않습니다.

내부적으로 프로퍼티 바인딩과 이벤트 바인딩을 쓰죠.

[(ngModel)]은 내부적으로 아래와 같이 동작합니다.

[ngModel]="budget", (ngModelChange)="budget =$event"

양방향 바인딩은 개발 편의를 위한 syntax라고 봐야겠죠.

진행하고 있는 코드는 github에서 자유롭게 볼 수 있습니다.

소스주소: https://github.com/jsrho1023/account-book

이번에는 이벤트 바인딩에 대해서 알아보겠습니다.

데이터 바인딩은 ts파일의 변수를 html 에서 이용하는 것이었죠.

이번 바인딩은 html의 이벤트를 ts파일의 메소드와 연결하는 것입니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button (click)="onAddIncome()">Add Income</button>

여기서 중요한 부분은 click 이벤트를 ( ): Event Binding 으로 감싼 것입니다.

click 이벤트를 ts의 onAddIncome() 라는 메소드와 연결해준 것이죠.

당연히 ts 파일에는 onAddIncome() 메소드가 있어야겠죠?

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

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 1000;
    ngOnInit(){ }
    onAddIncome(){
      this.budget += this.budget;
    }
}

자동으로 budget 이 올라가는 타이머 코드는 삭제하구요.

ts 파일에 onAddIncome() 메소드를 만들어줍니다.

input에 써있는 값 역시 budget이므로 그만큼 더해지도록 합니다.

이렇게하면 버튼을 클릭할 때마다 budget이 2배가 됩니다.

이벤트 바인딩 동작화면

아주 쉽게 ts 파일의 메소드를 html에서 호출하는 것을 볼 수 있습니다.

이벤트 발생시 활용해야하는 값이 있다면 $event를 변수로 받을 수 있는데요.

활용은 다음 기회로 남겨두도록 하겠습니다.

소스주소: https://github.com/jsrho1023/account-book

String이 바인딩이 되었다면 다른 것도 가능하겠죠??

오늘은 Property 바인딩에 대해서 보겠습니다.

html 태그의 속성과 ts 클래스의 변수를 연결합니다.

역시 말보다는 코드를 보는 게 더 쉽겠죠?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

지난 번 ts 코드의 template부분을 변경합니다.

template을 templateUrl 로 수정하구요.

지난번 지우지 않고 그대로 둔 html 파일 경로를 설정합니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button>Add Income</button>

budget.component.html에 Property Binding을 적용해보죠.

위의 코드에서 중요한 부분은 [value] 부분입니다.

대괄호 [ ]는 원래 html 코드에는 없는 내용이죠.

input 태그의 value 속성에 ts 코드의 값을 맵핑할 수 있습니다.

budget값은 ts 코드에 정의된 변수 이름입니다.

<h3> 태그에 있는 값과 동일하죠.

결과화면은 아래와 같습니다.

property binding 결과화면

Input의 값이 budget값과 동일하게 바뀌는 것을 볼 수 있습니다.

물론 아래와 같이 String Interpolation을 이용해도 동일합니다.

<input type="text" value="{{budget}}">

다음에는 Event Binding을 통해 Add Income 버튼을 동작시켜보죠.

소스주소: https://github.com/jsrho1023/account-book

Angular에는 Data를 표출하는 방법이 다양하게 있습니다.

그 중 가장 간단한 방법인 String Interpolation을 보도록 할게요.

ts 클래스의 변수를 template html에서 가져와 보여주는 것입니다.

이렇게 하는 것이 무슨 도움이 될까요?

먼저 비즈니스 로직과 보여주는 뷰를 분리할 수 있습니다.

html 화면을 변수들로 구성한 후 ts 파일에서 로직만 구현하면 되는거죠.

그리고 정적인 html이지만 data의 변화를 통해 동적으로 보일 수 있습니다.

말보다 예를 들어 설명하는 것이 빠르겠죠?

지난 번 만들었던 budget.component.ts 파일을 수정하겠습니다.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    template: `<h3>My Budget: ₩{{budget}}</h3>`,
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

Angular 관련 주목할 만한 부분이 2군데 입니다.

6번째줄의 template 속성과 {{ }} 괄호 입니다.

ECMA6에 등장하는 Template String ` (back-tick)도 있습니다만.. 

Angular에 집중하기 위해 생략하겠습니다.

지난번 CLI로 생성해준 ts 파일에는 templateUrl 속성이 있었습니다.

하지만 template이 간단한 경우 굳이 파일이 아니어도 됩니다.

위와 같이 template이라는 속성에 inline으로 html을 작성해도 되죠.

그럼 더이상 budget.component.html은 필요가 없습니다.

하지만 나중에 사용할 예정이니 놔두도록 하겠습니다.

오늘 더 중요한 부분은 {{ }} : String Interpolation 기능입니다.

ts 코드에서 사용하는 변수 budget을 html 코드에 출력할 수 있습니다.

위의 코드와 같이 중괄호 사이에 변수명을 넣어주면 됩니다.

간단히 코드를 설명하자면, 1초에 한번씩 budget 값을 1000씩 올립니다.

ts 코드의 budget 값이 변함에 따라 아래와 같이 화면의 금액이 변하죠.

저의 실제 예산도 1초에 1000원씩 증가하면 얼마나 좋을까요..?

String Interpolation을 이용한 화면

매우 쉽게 화면에 변화를 줄 수 있습니다.

JavaScript로 DOM을 제어하면 되지 않냐구요? 맞습니다. 

그러나 Angular의 장점들은 아직 많으니 천천히 보자구요.

소스주소: https://github.com/jsrho1023/account-book

Angular에 대해서 대략 훑어 본 것 같으니 이제 직접 코딩을 해보도록 하겠습니다.

지난 글에서 말씀드렸듯이 Component들을 추가하여 Application을 만들어갑니다.

바로 그 Component를 추가하는 2가지 방법에 대해서 공부해볼게요.

1. Angular CLI(Command-Line-Interface)

ng generate component (축약: ng g c) 라는 CLI명령어를 이용할 수 있습니다.

만약 budget이라는 컴포넌트를 만들고 싶다면 아래와 같이 사용합니다.

ng generate component budget (축약: ng g c budget)

이렇게 명령어를 입력하면 directory와 파일이 생성됩니다.

app.module.ts에 필요한 코드가 자동으로 추가되구요.

angular-cli (create component command)

2. Manual

물론 명령어를 사용하는 것은 편하고 좋은 방법입니다.

하지만 더 깊은 이해를 위해 하나,하나 손으로 만들어 보는 것도 좋겠죠?

새로운 Component를 추가하려면 당연히 먼저 파일을 만들어야합니다.

Component는 ts, html, css 3가지 파일로 이루어지게 됩니다.

일단 간단하게 Component당 하나의 폴더를 만드는 것으로 가정하죠.

(CLI를 사용하는 것과 동일하게 폴더 구조를 만들겠습니다.)

budget폴더를 생성하고 그 안에 3개의 파일을 생성합니다.

budget

- budget.component.html

- budget.component.css

- budget.component.ts

먼저 ts파일을 구성해보죠.

Angular의 Component를 사용하기 위해 import를 먼저 합니다.

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

지난 글의 @Component라는 Metadata를 넣어줍니다.

@Component 안에는 selector, templateUrl, styleUrls이 필요합니다.

selector는 templateUrl이 위차할 html 태그 이름이라고 보시면 됩니다.

자동 생성되는 규칙대로 'app-budget'이라고 넣어주겠습니다.

templateUrl은 새로 만든 html 파일 이름을 넣구요.

위 세가지를 구성해주고, class를 선언하면 ts 파일 구성이 완료됩니다.

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

위와 같이 구성해준다음 이 Component를 볼 수 있도록 노출시켜줍니다.

export class BudgetComponent{}

TypeScript에서 객체를 다른 객체에서 import하여 사용할 수 있도록 하는 문법입니다.

TypeScript에 대해서는 자세히 다루지 않을게요.

저도 자세히 알지는 못하고 Angular에서 쓸 때 필요한 만큼만 익혀 가고 있습니다.

css 파일은 그냥 두고(꾸미기는 생략!) html 파일을 편집해봅시다.

<h3>I made first component!!!</h3>

마지막으로 이 Component를 사용하겠다는 것을 Angular에 알려야합니다.

app.module.ts에 import하고 @NgModule의 declaration에 추가합니다.

NgModule에 대해서는 추후에 더 자세히 다루도록 하겠습니다.

import { BudgetComponent } from '@./budget/buget.component';

@NgModule({
  declaration: [
    BudgteComponent,
    ...
  ], 
  ...
})

위 두 가지 방법을 통해 새로운 컴포넌트를 추가할 수 있습니다.

그리고 그 컴포넌트를 화면에 출력해봅시다.

app.component.html에 우리가 지정한 selector (app-budget) 태그를 넣습니다.

<div style="text-align:center">
  <app-budget></app-budget>
</div>

ng serve를 통해 화면을 실행하면 아래와 같은 화면이 뜹니다.

새로운 Component가 추가된 angular 첫 페이지

Anuglar의 가장 중요한 요소라고 말씀드렸던 Component에 대해 더 자세히 보겠습니다.

Angular Web Application의 핵심 부품인 Component는 3개의 파일로 구성됩니다.

타입스크립트 파일인 ts 파일과 템플릿 html 파일, 스타일 css 파일 입니다.

이미 만들어져있는 app.component.{ts,html,css} 파일들을 보겠습니다.

(app.component에는 spec.ts파일이 하나 더 있는데 테스트를 위한 파일 입니다.)

먼저 app.component.ts 파일은 아래와 같이 생겼습니다.

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

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

export class AppComponent { }

import는 이미 만들어진 Module에 대한 의존성이라고 보시면 됩니다.

오늘 살펴볼 부분은 @Component라고 쓰여진 Metadata 입니다.

AppComponent는 타입스크립트 Class입니다.

@Component는 Angular가 Compile될 때, 이 Class가 Component임을 표시해줍니다.

그리고 또 Component로서 어느 곳에 무엇을 어떻게 표시할지 속성을 가지고 있죠.

속성이 3가지 있습니다.

1. 어느 곳에(Selector)

2. 무엇을(TemplateUrl)

3. 어떤 스타일로(StyleUrls)

Selector는 Component가 들어갈 html tag라고 보시면 됩니다.

index.html의 <app-root></app-root>태그 기억하시나요?

TemplatUrl은 Component에 들어가는 html 문서의 골격입니다.

첫 화면에 보여지는 Welcome화면의 태그들이 다 app.component.html에 있죠.

StyleUrls는 html의 스타일을 지정해주는 css파일들입니다.

JavaScript Array 형태로 여러 파일이 선택될 수 있습니다.

물론 다른 속성들도 있습니다만, 그건 하나하나 해보면서 익혀가겠습니다.

다음에는 새로운 Component를 직접 추가해보도록 하겠습니다.

Angular CLI를 통해 Angular 프로젝트를 생성하는 것까지 진행했습니다.

그럼 이제 Angular 첫 페이지가 어떻게 만들어 지는가에 대해 알아보겠습니다.

자동으로 생성되는 많은 파일들이 있습니다.

그 중 지금 우리가 집중해서 볼 것은 3개의 파일과 1개의 Set입니다.

1. main.ts

2. app.module.ts

3. index.html

4. app.component. files (Set)

1. main.ts

Angular는 스크립트 언어인 JavaScript로 작성이 되지만, Compile되어 사용됩니다.

설정에 따라 JIT(Just-In-Time), 또는 AOT(Ahead-Of-Time) Compiler를 사용할 수 있습니다.

Compiler에 대해서는 자세히 다루지 않구요. (자세히 모르기도 합니다.)

이러한 빌드 작업의 시작점이 main.ts입니다.

마치 C의 main.c, C++의 main.cpp와 같은 느낌이죠?

main.ts는 Application의 진입점으로 사용할 시작 Module을 설정(AppModule)해줍니다.

main.ts

앞으로 수정할 일은 거의 없어보여요.

2. app.module.ts

가장 중요한 파일이라고 볼 수 있는데요.

main.ts에서 시작 Module로 설정한 그 Module입니다.

Angular Application을 어떻게 조립할지 결정하는 파일입니다.

어떤 Component들이 들어가고 어떤 Module들을 참조할지에 대한 정보를 담고 있어요.

app.module.ts

3. index.html

이 파일이 브라우저로 접속했을 때 보이는 화면입니다.

화면에서 봤던 것 만큼 많은 코드가 들어있지 않죠?

사실 <app-root></app-root>라는 자리에 Component가 들어가서 보여지기 때문입니다.

index.html

이 파일 또한 직접 편집할 일은 거의 없습니다.

Angular가 빌드시 필요한 js와 css파일들을 알아서 추가해주기 때문입니다.

필요한 js와 css파일들은 사실 Component에 담겨져 있습니다.

4. app.component.{ ts, html, css, spec.ts }

우리가 만들어 갈 Application의 root(뿌리)가 되는 Component입니다.

Application이 개발되어가면서 많은 Component들이 추가됩니다.

이 Component들을 사용하여 Application을 구성하는 Main Component라고 보시면 됩니다.

app.component.ts

전체 적으로 요약하면 아래와 같은 구조입니다.

전체 소스 구조