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

[Angular2 notebook] property binding이 문서는 ng2에 대한 내용을 다루고 있지만, 전체적으로 디테일하게 다룬다기보다는, ng2의 개념들을 이해해나가면서 조각조각 관련 개념들을 정리하는 데 목적을 둡니다. 따라서, 이 카테고리의 글들은 전체적으로 완결적이지 않을 수 있고, 글의 순서에따라 내용이 이어지지 않을 수 있음을 먼저 알려드립니다. 여기서 다룰 내용은 angular.io(공식홈페이지)의 tutorial에 등작하는 property binding에 대한 내용이다. 개괄적인 내용 여기서는 heroes라는 array안에 들어있는 hero객체를 *ngFor 라는 ng2의 template syntax를 활용해리스트를 만든다.만들어진 요소들을 사용자가 마우스로 클릭하면, 클릭한 요..

▶ [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)할 수 있는 형으로 되어있는 것을 말하며, 복수의 모듈을 취급하기 쉽도록 하..

▶[Angular Guide] 4. User Input 우리는 사용자들이 링크를 클릭 하거나, 버튼을 누를때, 또는 텍스트를 입력할 때. 이 것에 대해 알고싶다. 이러한 사용자의 작업은 모두 DOM 이벤트를 발생시킨다. 이번 챕터에서는 Angular의 이벤트 바인딩 구문을 사용하여 해당 이벤트에 바인딩하는 방법에 대해 정리하고자한다. [Angular2 Basic - User Input LIVE EXAMPLE] User input event에 바인딩하기 Binding to user input events우리는 종류에 관계없이, 모든 DOM event에 대한 응답을 위해 Angular의 event binding을 사용할 수 있다. 구문(Syntax)은 간단하다. - 괄호안에 DOM 이벤트를 감싸 넣고, 인용..

EventEmitter의 기본개념 및 간단예제이번 글에서는 Angular2의 기본 개념중, 'EventEmitter'에 대해서 간단히 정리해보고자한다. EventEmitter의 기본개념EventEmitter 는 Angular2에서 directives와 custom event를 emit하는 component에서 사용된다. 여기서 emit이라는 단어의 사전적정의를 살펴보면 '발산, 방출하다.'이다. 이를 '호출하다'라고 이해하면 혼란스럽기 때문에, 이벤트 호출과는 다른 개념이라는 것을 먼저 알아두면 좋다. Class OverView EventEmitter의 기본적인 구성은 다음과 같다. class EventEmitter { constructor(isAsync?: boolean) emit(value?: T) ..

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