3장) Angular 2 프로젝트 폴더구조 살펴보기

이번 장에서는 간단하게 프로젝트의 폴더구조와 이놈들이 뭘 하는 놈인지 알아보겠습니다. 

먼저 만들어진 폴더 구조를 살펴봅시다. 

프레임워크 답게 뭔가 폴더와 파일들이 많습니다. 

차례대로 살펴봅시다. 

e2e 는 end to end 테스트를 위한 설정파일이 들어있는 폴더 입니다. 

프로젝트를 테스트 하기 위한 방법으로 단위테스트 와 통합테스트 가 있는데 단위테스트는 

말그래도 내가 작성한 코드가 정상적으로 돌아가는지 단위적으로 테스트 하는 것 이고 

통합테스트는 프로젝트에서 작성한 프로세스 대로 제대로 돌아가는지 테스트 하는 것 입니다. 

예를 들면 로그인 -> 게시물작성 -> 로그아웃  이런식으로 일련의 행동을 자동화하여 

테스트 하는 방법으로 e2e 폴더는 통합테스트 관련 설정파일이 있는 폴더 입니다. 

그 다음 node_modules 폴더는 당연히 현재 프로젝트를 실행하고 구성하기 위한 모듈이 

들어있는 폴더입니다. 

그 다음 src 폴더에는 내부에 app , assets , environments 폴더가 있습니다. 

src 폴더는 angular 2 에서 실질적으로 사용할 파일들이 들어있는 폴더로서 

app 폴더에는 app.component 가 하나 기본적으로 만들어져 있습니다. 

이 컴포넌트는 현재 프로젝트에서 가장 먼저 만나는 컴포넌트로서 root 컴포넌트의 

역활을 합니다. 

assets 폴더는 보통 정적파일들, 예를 들면 이미지나 고정적으로 사용될 파일들을 저장하는 

폴더이고, 마지막으로 environments 폴더는 해당 프로젝트를 빌드 할시 제품용과 개발용 빌드에 

관한 옵션을 설정 하는 파일이 들어있습니다. 

그리고 src 폴더의 중요파일들을 살펴봅시다. 

index.html 은 가장 최상위 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 를 불러왔고, declarations 에는 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 , 2종류가 있는데 둘의 

가장 큰 차이점은 컴파일 방식 입니다.

AOT 와 JIT 로 나뉘는데 이 부분은 나중에 따로 글을 적도록 해보겠습니다. 

계속 이어서 살펴보면 그외 polyfills.ts 파일은 브라우저에서 es6 문법을 사용하기 위한 모듈들을

모아 놓은 파일이며, tsconfig.json 은 Typescript 컴파일 옵션을 정의하는 파일입니다. 

현재로선 건드릴 일이 없으니 일단은 어떤 것 인지만 알고 넘어갑시다. 

그리고 최상위 폴더에있는 Karma.conf.js 파일은 jasmine 을 이용한 단위테스트를 위한 설정파일이고 

package.json 은 해당 프로젝트를 위한 모듈 관리 파일입니다. 

이제 대략적으로 설정파일과 프로젝트 구조에 대한 설명은 끝이 났습니다. 헉헉

이번장은 여기서 끝? 내기엔 조금 아쉬워서 /src/app/ 폴더의 app.component.ts 파일로 들어갑시다. 

거기서 title = 'app works!' 부분을 아무 문자로 바꿔봅시다. 

그리고 커맨드창에서 ng serve 를 실행해서 접속해보면 문자가 바뀌어 있는 것을 확인 할 수 있습니다. 

해당 title 이 어디로 들어가는지 보고 싶다면 app.component.ts 파일에서 templateUrl 로 지정된 

app.component.html 파일을 봅시다.

아주 심플하게 코드가 들어있는데  딱 봐도 title 이 어디로 바인딩 되는지 예상 할 수 있을 겁니다. 

그럼 끝 ~ 

***  코드 부분은 좀 더 보기좋도록 수정이 필요 ㅜ