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

▶ [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의 기능과 역할은 아래의..

▶ [Angular2 Tutorial] 4. Multiple Component이 글에서는 angular2 공식페이지의 튜토리얼 중 Multiple Components 에 대한 내용을 정리해보려고한다. 이것은 앞서 정리했던 튜토리얼 3 - Master/detail 에 이어서 진행된다. 이 글의 작업 환경 및 이전까지의 코드에 대한 설명이 궁금하다면, AngularJS2 - Tutorial 페이지를 참고하는 것을 추천한다. (튜토리얼3. Master/Detail에 이어) 우리의 app은 발전하고 있다. 본격적으로 내용을 살피기에앞서 다음과 같은 디렉토리 구조를 확인하고, 지금현재 이와 다른 경우라면 이전 글에서 예시내용과 다른 부분에 대해서 다시 탐색해보도록한다. [ 사진 : angular2 공식홈페이지, ..