[Angular2 with TypeScript] 2. 서버 실행과정

npm start 명령어를 실행해서 서버를 가동시킬때 어떠한 과정을 거쳐 실행 되는것일까?

이제 막 6개월차 프로그래밍 공부를 하고 있는 나로서는 구체적인 동작은 설명할 수는 없으나 개략적으로 

어떤 파일이 어떻게 사용되어지는지 알아보겠다.

src 디렉토리 내부에있는 파일들이 실제 가동할때 쓰이는 것들인데 서버가 가동되기 시작하면 가장 먼저 바라보는 것이 main.ts 파일이다. 

비쥬얼 스튜디오 코드를 통해 해당 파일 내부를 들여다 본다.

이것이 타입스크립트를 적용된 가장 첫번째로 살펴본 파일이다.

문법에 대해 설명하자면 

import {} from '' ; 는 외부 라이브러리로 부터 중괄호 안에 있는 이름의 

엘리먼트를 가져오겠다는 의미이다. 

12번째 줄을 보면 platformBrowserDynamic().bootstrapModule(AppModule); 이 있다.

가장 먼저 실행되는 모듈로서 AppModule 이라는 것을 임포트해와서 부팅하겠다는 의미이다.

AppModule은 위 임포트 구문에서보면 어디로부터 온것인지 알 수 있다. app/app.module

app 디렉토리에 안에 app.module 이라는 이름의 파일로부터 가져온것을 알수가 있다. 모듈을 살펴보자.

원래 파일의 이름은 확장자가 ts인 app.module.ts 이다. 타입스크립트에서 임포트 구문에 쓸때는 확장자는 무시해도 상관없다고 한다. 

1~4 : 아직은 알수 없지만 어떤 모듈들을 임포트 하고있다.

6: 실제 우리가 실행한 컴포넌트인 AppComponent를 가져온다. 컴포넌트에 대해서는 따로 설명할테니 지금은 그냥 넘어간다.

8~19: @NgModule() 은 이 파일이 모듈임을 명시적으로 알리고 그안에 설정할 메타데이터를 기록할 수 있는 곳이다. Json의 형태로 설정값들을 넣어주는데 마지막 속성으로 bootstrap이 있고, AppComponent 를 넣어주었다. 우리가 앞서 보았던 Main.ts와 비슷한 환경이다. 컴포넌트는 여러개 부팅시킬수 있다.

20: export는 해당 클래스를 클래스명으로 노출시킨다는 의미이다. 이 과정을 거치지 않으면 타입스크립트에서는 import를 할수가 없다. 실제로 위에 import 되고있는 모듈과 컴포넌트들은 전부 이 과정을 거친 상태이다. 해당 경로를 따라 들어가서 내부를 살펴보면 export로 선언되어 있음을 알 수 있다.

main.ts->AppModule 까지 왔고, 이 모듈은 또다시 AppComponent를 부팅시키고 있다 역시 따라가보자.

1: Component는 나중에 설명할 장식자 중의 하나인데, 3번째 줄의 @와 함께 이것이 컴포넌트임을 명시적으로 알려주고 그에 맞는 메타데이터를 설정할 JSON 객체를 넣을수 있는 공간을 마련한다.

3~7 :컴포넌트에 대해서는 다음 포스트에서 설명하고자 하니 지금은 흐름만 대충 보자.

컴포넌트 설정값중 selector라는 속성이 있는데 'app-root'라는 이름으로 지정해두었다. 이 이름을 잘 기억하고 있도록 한다.

8~10 : 마찬가지로 export를 함으로써 외부에 노출시키고 있다. 

이러한 과정을 통해 실행에 필요한 로딩과정을 알아두었다. 로딩한다는 것은 처음에 클라이언트가 서버에 요청했을때 설정되어있는 값들을 부팅시키는 과정이라고 보면 된다.

우리가 지금까지 본것들은 전부 ts 파일들이었다. 타입스크립트는 결국 자바스크립트로 컴파일 되어지는 언어이기때문에 현재는 자바스크립트 언어만 다룬 셈이다. 

 웹에 어떤 정보를 요청한다는 것은 브라우저가 해석할 html 문서를 요청한다는 것인데 우리가 localhost:4200을 통해 요청해서 받아본 화면은 무엇을 해석한 것일까? 바로 index.html 이다. 

친숙한 html 문서가 열렸다. 

별다를 것 없어보이는데 , 태그하나가 눈에 띈다.

<app-root>Loading...</app-root>

우리가 컴포넌트에서 보았던 그 단어이다. 실제로 컴포넌트가 해석단계를 거치고나서 

html 문서상의 지정된 태그에 정보가 표시되어진다. 

결국 우리가 클라이언트에게 보내주는 페이지는 이 index.html 한장이고 그 내부 동작은 앵귤러 프레임워크를 통해 우리가 개발할 수가 있다. 

이런 어플리케이션을 SIngle Page Application, 약자로 SPA라고 하는데 요즈음 웹개발의 트렌드이다. 

단일페이지만 로딩하고 나면 그 후부터는 페이지를 계속해서 갱신하는 것이 아니라 요청이 이뤄질대 해당되는 부분만 데이터를 바꿔줌으로써 동적인 환경을 만들어 준다는 것이다. 

우리가 앞으로 살펴볼 앵귤러 2는 이런 SPA개발에 특화되어 있는 프레임워크이다.

실제 배포가 된다면 어떤 형태로 만들어질까? 빌드를 해보자.

전에는 없던 dist라는 디렉토리가 생겨났다. 그 안에는 .js 와 .map 파일이 가득하다.

inline.bundle.js나 main, style등등을 index.html이 참조하고 있는 구조이다.

빌드되기전과 빌드 후의 index.html 파일의 다른점이 생겨났다. 16~18번째 줄의 <script> 태그들이다.

앞서도 이야기했듯이 우리가 작성하는 것은 동적 환경을 위한 자바스크립트이다.  앵귤러 프레임워크와 타입스크립트 언어를 통해 기존의 자바스크립트를 쓰는 것보다 훨씬 쉽고 생산성있게 개발을 할수 있음을 알수 있다. 컴파일되고 재구성된 .js 파일은 알아보기에 힘들지만 그런 파일들을 직접 작성하는 것보다 다른 선배 개발자들이 만들어놓은 도구를 쓰면서 그 효율성에 감탄을 금치 못하고 있다. 

다음 포스트에서는 좀더 이론적인 부분에서 우리가 태그를 만들어내고 어떤식으로 표현되는지를 알아본다.