[Chapter 3] Angular 2 의 프로젝트 폴더구조
챕터 3 에서는 Angular 2 의 프로젝트 폴더구조에 대해 알아보겠습니다.
우선 1장에서 설치한 Vscode를 실행해 미리 생성해둔 MY-FIRST-APP 프로젝트를 열어봅시다.
알 수 없는 파일들과 폴더가 많이 있습니다.
차례대로 살펴보겠습니다.
e2e 폴더는 end to end 테스트를 위한 설정 파일이 들어있는 폴더입니다.
프로젝트를 테스트하기 위한 방법으로 단위테스트 와 통합테스트 가 있습니다.
단위테스트는 작성한 코드가 정상적으로 돌아가는지 단위적으로 테스트 하는 것 입니다.
통합테스트는 프로젝트에서 작성한 프로세스 대로 제대로 프로그램이 돌아가는지 테스트 하는 것 입니다.
로그인 - 게시물 작성 - 로그아웃 등의 일련의 행동을 자동화 하여 테스트 하는 방법으로
e2e 폴더는 통합테스트 관련 설정파일이 들어있습니다.
node_modules 폴더는 현재 프로젝트를 실행하고 구성하기 위한 모듈이 들어있는 폴더입니다.
다음으로 src 폴더를 열어보면 app, assets, environments 폴더가 있습니다.
src 폴더는 angular 2 에서 실질적으로 사용할 파일들이 들어있는 폴더입니다.
app 폴더에는 기본적으로 app.component 가 만들어져 있습니다.
이 컴포넌트는 현재 프로젝트에서 가장 먼저만나는 root 컴포넌트 역할을 합니다.
assets 폴더는 보통 정적파일 (이미지 등 고정적으로 사용될 파일들) 들을 저장하는 폴더이고
environments 폴더는 해당 프로젝트를 빌드 할 때 제품용과 개발용 빌드에 관한 옵션을 설정하는 파일들이 들어있습니다.
여기서 src 폴더의 중요한 파일들을 살펴보겠습니다.
index.html 은 최상위 html 파일이며, 이곳으로 컴포넌트들이 조립되어 나타나게 됩니다.
아래 내용은 index.html 의 코드입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
body 태그 안에 <app-root> 태그가 컴포넌트의 selector 를 가져와서 보여주는 부분입니다.
다시 /src/app 폴더 안의 app.component.ts 파일을 보겠습니다.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
selector 에 app-root 라는 문구가 보입니다.
여기까지 설명했다면 어떤 느낌인지 아실겁니다.
selector가 컴포넌트의 이름이라고 생각하고, 해당 이름을 html 에서 태그형식으로 불러오는 방식입니다.
그전에 angular 의 설정파일을 봐야합니다.
app 폴더 내부의 app.module.ts 파일을 살펴보겠습니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
NgModule 은 공통으로 사용 할 Component, Module, Service 를 등록하는 설정파일입니다.
현재 코드의 상단을 보면 AppComponent 를 불러왔고, declaration 에는 AppComponent 가 등록되어 있습니다.
그리고 imports 는 Angular 에서 사용 할 주요 모듈들이 등록되어 있고
providers 에는 공통으로 사용할 Service 를 등록하는 곳 입니다.
bootstrap 은 최상위 컴포넌트, 즉 프로젝트를 실행 했을 때 가장먼저 실행 할 컴포넌트를 등록합니다.
현재는 AppComponent 가 등록되어 있습니다.
( 이해가 되지 않아도 차근차근 따라가다 보면 알아서 이해가 될 것입니다. )
마지막으로 AppModule 이라는 이름으로 export 시켜서 외부에서 해당 파일을 참조할 수 있도록 했습니다.
다음으로 src 폴더의 main.ts 파일을 보겠습니다.
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
여기에서는 app.module.ts 에서 export 한 AppModule 을 import 시키고 platformBrowserDynamic 을 등록시킵니다.
platformBrowserDynamic 은 브라우저에서 Angular 를 사용하기 위해
Angular 의 이런 기능을 사용할 것 이라고 알려주는 것 이라고 생각하시면 됩니다.
Angular 에는 platformBrowser 와 platformBrowserDynamic 의 두 종류가 있는데
둘의 가장 큰 차이점은 컴파일 방식입니다.
AOT 와 JIT로 나뉘는데 이 부분은 나중에 따로 설명하도록 하겠습니다.
이어서 polyfills.ts 파일은 브라우저에서 es6 문법을 사용하기 위한 모듈들을 모아놓은 파일이고
tsconfig.json 은 Typescript 컴파일 옵션을 정의하는 파일입니다.
현재 건드릴 일이 없으니 이런게 있다 라고만 알고 넘어가겠습니다.
그리고 최상위 폴더에 있는 Karma.conf.js 파일은 jasmine 을 이용한 단위테스트를 위한 설정파일이고
package.json 은 해당 프로젝트를 위한 모듈 관리 파일입니다.
간단하게 테스트를 해보기 위해 src/app/ 폴더의 app.component.ts 파일로 들어가봅시다.
title='app works!' 이 부분을 원하는 문자로 변경해봅시다.
그리고 cmd를 실행해서 서버를 실행해보면 문자가 바뀌어 있는 것을 확인할 수 있습니다.
해당 title 이 어디로 들어가는지 알고 싶다면 app.component.ts 파일에서 templateUrl 로 지정된
app.component.html 파일을 봅시다.
간단한 코드가 있는데 그냥 보아도 title 이 어디로 바인딩 되는지 알 수 있습니다.
이것으로 설정파일과 프로젝트 구조에 대한 설명을 마치겠습니다.
다음장으로 넘어가겠습니다!
REFERENCE
http://alexband.tistory.com/
'Javascript > Angular' 카테고리의 다른 글
| [Chapter 6] Angular 2 Tutorial - The Hero editor 3 (0) | 2017.06.14 |
|---|---|
| [Chapter 5] Angular 2 Tutorial - The Hero Editor 2 (0) | 2017.06.12 |
| [Chapter 4] Angular 2 Tutorial - The Hero Editor 1 (3) | 2017.06.09 |
| [Chapter 2] Angular 2 의 작동방식 (0) | 2017.06.02 |
| [Chapter 1] Angular 2 개발 환경설정 (1) | 2017.05.31 |
