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

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

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

▶ AngularJS 2.0 :: 처음부터 시작하기 :: 1. 전체적인 구조 및 개념이 글에서는 AngularJS 2.0에 대한 개념에 대하여, 부족하지만 하나하나 세부적으로 살펴보려고한다. 이 글은 다음과 같이 구성되어 있다. AngularJS 2.0 전체적인 기술 개념 1. AngularJS란 무엇인가 2. 왜 AngularJS 인가 3. 왜 AngularJS 2 인가 4. AngularJS 2의 구조 4-2. (1) Component의 사전적 정의 4-2. (2) Angular JS 에서의 Component란? 1. AngularJS란 무엇인가서점에 책도 깔리고, 여기저기서 AngularJS 개발자를 찾는다. 도대체 AngularJS가 뭘까. - 기본적으로 AngularJS 2 는 자바스크립트 Fr..

[AngularJS 2.0] #기초 :: *ngFor 이해하기이번 글에서는, AngularJS 기초 개념 중 *ngFor에 대해서 공식페이지에서 제공하는 내용을 바탕으로 살펴보려고 한다. ＿ *ngFor 를 활용하여 배열의 속성을 보여주기 [Showing an array property with *ngFor] - 목적 또는 상황 : 한 명의 hero 정보가 아닌, 여러 hero 의 정보가 배열 형태로 담겨있는 hero list 의 내용을 화면에 표현하고자 한다. (예제 작성을 위해서) 임의의 hero name이 들어있는 배열을 Component 에 추가한다. 임의의 heroes 이름이 들어있는 배열의위치는 myHero 의 바로 위 이며, myHero 도 hero 이름 배열의 첫 번째 원소로 지정 해준다...