시각화를 배우고 정리합니다

▶ [Angular2 Tutorial] 5. Service이번 글에서는 Angular.io 에서 제공하는 TUTORIAL 중 다섯 번째인 'Service'에 대한 내용을 정리해보고자 한다. Service여러 Component는 hero 데이터에 대한 Access를 필요로 한다. 그러나, 우리는 계속 같은 코드를 복사&붙여넣기를 하고 싶지 않다. 같은 코드를 복붙하는 대신에, 우리는 하나의 재사용가능한 Data Service 를 생성하고, 필요한 구성에 맞게 주입(Inject)하는 방법에 대해 이해할 필요가 있다. Refactoring Data Access는 서비스를 분리 유지하여 component가 view를 supporting 하는 데 초점을 맞출 수 있도록 했다. 이것은 또한 component와 mo..

▶[Angular2 COOKBOOK] @Injectable이번 글에서는 Angular를 하다보면 쉽게 마주치게되는 @Injectable 이라는 Decorator에 대해서 입문자의 관점에서 정리해보고자한다. @Injectable 이란? Angular에는 여러가지 Decorator가 있다.(@Component, @Input ...등등등.) @Injectable도 이 중 하나이다. 그런데 개인적으로는 (왜인지는 모르겠지만) 이 @Injectable 이라는 Decorator가 다른 Decorator보다 더 뭔가 두려운(?)느낌이든다. 발음도 뭔가 "인젝ㅌ..." 그래서 Angular API 에서 @Injectable를 쳤더니, 이것에 대한 친절한 한국어 Document가 나왔다!!! 라고 말하고 싶지만, Dep..

▶[Angular Guide] 2. Architecture - (3) Template우리는 template 를 활용하여 Component의 view를 정의할 수 있다. template 는 우리가 알고있는 HTML의 형태와 같고, Angular에게 어떻게 component를 렌더링할 지에 대해 알려주는 역할을 한다. Template는 기본적으로 HTML 처럼 보인다. 물론 맞다. 그런데 몇가지 다른점이 있다. 다음 코드를 살펴보자. app/hero-list.component.html Hero List Pick a hero from the list {{hero.name}} 비록 이 template 가 전형적인 HTML 요소를 사용하고 있지만, (예를들어 나 등) 이 외에 약간 다른부분을 어렵지 않게 찾을 수..

▶[Angular Guide] 2. Architecture - (2) Component 이 글에서는 [Angular Guide] Architecture 의 여덟 항목 중 Component에 대한 내용을 정리하고자 한다. Component Component는 'view'라고 불리는 화면 중 일부분을 컨트롤하는 역할을 한다. 예를들어, 다음과 같은 view 들이 component에 의해 컨트롤되는 것들이다.The app root with the navigation links.The list of heroes.The hero editor. 사용자가 화면을 통해서 보게될 'view' 영역을 컨트롤하는 것이 Component 라고 했을때. 사실, Application에서의 Component의 기능과 역할은 아래의..

▶[Angular Guide] 2. ArchitectureAngular2는 HTML또는 Javascript, 기타 다른 언어들(Dart, TypeScript)안에서, Client Application 을 구축하기위한 framework이며, Angular2 Syntax로 작성된 것들은 Javascript로 컴파일된다. Angular2 프레임워크에는 여러 library가 포함되어있는데, 이중에는 core library도 있고, optional한 library도 있다. 결국, 우리가 Angular2로 해야할(할수 있는) 것이라면우리는 Angularized markup 규칙에 따라, HTML 템플릿을 구성함으로써, 최종적으로 Angular Application을 만들 수 있다. Component class를 작..

▶[Angular Guide] 2. Architecture - (1) modules이 문서는 Angular.io에서 제공하는 DOC중, Guide - Architecture 부분에 대해 차근차근 정리하며 이해하고자 작성하였습니다. 글의 내용중 정확하지 않은 표현이나, 오류가 있다면, 댓글 또는 방명록을 통해 의견을 남겨주세요. MoudulesAngularApplication은 modular이며, 이 Angular는 자체적으로 NgModules 또는 Angular Module이라는 이름의 모듈시스템(Module System)을 가지고있다. 모듈(Module)의 사전적 정의 하나로 일괄되어 다른 프로그램으로도 재이용(reusable)할 수 있는 형으로 되어있는 것을 말하며, 복수의 모듈을 취급하기 쉽도록 하..