[Angular2] 환경구성

---

 

_Overview

Angular의 구조는 Component/Service 아키텍처를 기반으로 한다. AngularJS(Angular1)는 ModelView Controller 기반으로 했다. 

_TypeScript

• ES6 언어(Ecma Script)

• Javascript는 ES5 이하 언어이며, Typescript는 Javascript를 포함한다.

• TypeScript는 Javascript로 변환(trans compile)해야하며, type 유효성을 검사한다.

• Node.jsㄹ르 사용해서 angular2를 javascript로 변환하는 작업을 한다.

■ Interpereter

프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다.

Javascript Engine은 Javascript로 작성된 코드를 해석하고 실행하는 인터프리터.

 

■ JIT Compile

JIT 컴파일(Just-In-Time compilation) 또는 동적 번역(dynamic translation)은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법.

실행 시점에서 기계어 코드를 생성하면서 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지. Javascrpt 엔진은 JIT Compile 유형의 인터프리터이다.

 

■ Engine vs Runtime

- Engine   : Javascript로 작성된 스크립트를 기계 실행 가능하게 변경. 구문 분석 및 JIT 컴파일

- Runtime : 실행 중 프로그램에서 사용할 수 있는 기본 라이브러리를  

 

Chrome 브라우저에서 f12키를 누르고 console 창에 alert("hi!") 라고 입력하면 알림창이 뜬다.

사실 window.alert("hi!")이 정확한 표현이다. Chrome의 runtime이 제공하는 라이브러리에 window라는 객체가 있고, 이안에는 alert이라는 함수가 있기 때문에 가능하다.

 

Node.js에서 console.log(_dirname)을 입력하면, 현재 디렉토리 경로를 리턴한다.

사실 global._dirname이 정확한 표현이다. Node.js의 runtime이 제공하는 라이브러리에 global이라는 객체가 있고, 이 안에는 _dirname이라는 객체가 있기 때문에 가능하다.

 

Chrome과 Node.js 모두 같은 V8엔진으로 자바스크립트 코드를 해석, 실행하지만, runtime이 다르기 때문에 실행 중 기본으로 사용할 수 있는 라이브러리가 다른 것이다.

alert()은 Chrome만 가능하고 Node.js는 불가하다. 반대로, ._dirname은 Node.js만 가능하고 Chorme은 불가하다.

 

console.log 함수는 Chrome, Node.js 모두 제공하는 라이브러리기 때문에 모두 사용할 수 있다.

 

---

_환경 구성

Angular 5를 설치하기 위해서,  다음이 필요하다.

• Node.js
  • Node.js는 구글의 크롬  v8 자바스크립트 엔진을 기반으로 한, 고성능 네트워크 서버
  • Single Thread 기반의 Event Loop를 기반으로 하고 있으며 File, Network 등에 대해서 비동기 IO 처리를 하는 서버 미들웨어
  • Javascript 구문 서버 측 스크립트언어

• Npm

• Angular CLI

• IDE for writing your code

---

1. npm & node install

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ sudo npm install -g @angular/cli@1.6.7

2. 프로젝트 생성 및 web Open

$ ng new portal-app
$ cd portal-app
$ ng serve -o --host 0.0.0.0 

3. component생성

 $ ng generate component {component명}
 ex) ng generate component main