[ Angular 2: Horizon ] rethinkdb 맛보기

angular2, horizon, rethinkdb 를 사용해보자. Contents1 프로젝트 Setup2 horizon.service.ts 생성3 horizonService 적용4  실행해보기 프로젝트 Setup $ ng new myproject $ cd myproject $ npm install @horizon/client –save $ hz init myproject 폴더안에  .hz 폴더가 생성되었다. .hz/config.toml 을 열고 가장 마지막에 다음을 추가한다. connect = “localhost:28015” myproject 밑에서 cmd 창을 열고 $ hz serve –dev 를 실행하면, 다음과 …

[ Angular 2: Authentication ] firebase 사용자 인증 활용

Contents1 프로젝트 설정1.1 프로젝트 생성1.2  컴포넌트 및 인터페이스 생성2 자동 생성된 파일 수정3 라우터 설정4 Firebase 백앤드 설정5 새 사용자 추가6 로그인 확인7 로그아웃 기능 구현8 비회원 접근 막기9 마무리 프로젝트 설정 프로젝트 생성 $ ng new auth $ cd auth  컴포넌트 및 인터페이스 생성 $ cd src/app $ mkdir protected $ cd protected $ …

[ Angular 2:Http ] Firebase 파이어베이스 데이타베이스

Angular 2 는 Observable 을 이용해서 데이타베이스에 접근한다. Firebase 는 실시간으로 업데이트 되는 데이타베이스로 Angular 2의 Observable 과 궁합이 잘 맞는 듯 하다. 혹자는 복잡하고 세밀한 기능이 필요한 경우에 Firebase 데이타베이스를 사용하지 말 것을 권하기도 하니, 아직 Firebase 데이타베이스가 보완이 필요한 단계일 수도 있다. 편의성 때문에 Firebase 데이타베이스를 사용했다가 나중에 특정 기능의 구현이 어려워서 다른 …

[ Angular 2: Pipes ] 파이프 개념 및 활용

Pipes 는 데이타를 출력할 때 시각적인 형식을 변형하여 나타낼 수 있도록 해준다. Built-in Pipes 는 이미 Angular 2 에서 지정해놓은 것들인 반면, 필요에 따라 우리가 Custom Pipes 를 만들어 사용할 수도 있다. Contents1 Pipes Example2 다양한 Built-in Pipes  살펴보기3 Custom Pipes Example 14 Impure Pipe5 Async Pipe Pipes Example   myValue = ‘lowercase’; <p>{{lowercas}}</p> ‘lowercase’라고 …

[ Angular 2: Forms ] 데이터 기반의 폼 (Reactive Form)

Angular 2 에서 폼을 처리하는 방식은 템플릿 기반과 데이터 기반으로 나뉜다. 앞선 포스트에서 템플릿 기반을 다루었고, 이번 포스트는 그에 이어 데이타 기반의 폼을 살펴보려고 한다. 프로젝트 설정 부분은 이전 (템플릿 기반의 폼) 글의 초반부를 참고하자. Contents1 설정2 Angular 2 Form3  Form 동기화 : HTML form 과 Angular 2 form4 데이타 유효성 검사: Validation4.0.1 Email 유효성 검사4.0.2 …

[ Angular 2: Forms ] 템플릿 기반의 폼

폼은 사소해보인다. Form 만을 위한 모듈이 존재할 필요가 있겠나 싶다. 데이타바인딩과 Input을 사용하면 그만일 것도 같다. 하지만, Form은 그 이상의 기능을 가지고 있다. Data Validation, 향상된 UX, Form 상태 확인 등 차원높은 기능을 구사하기 위해서는 Form과 관련된 Angular 2 모듈이 꼭 필요하다. Contents1 HTML vs Angular 2 Forms2 Template-driven vs Data-driven Approach3 예제 프로젝트 생성4 …

[ WP-REST_API ] 특성 이미지 주소 참조 추가

/** * REGISTER REST FIELD : post.feartured_image_src */ //Get image URL function get_thumbnail_url($post){ if(has_post_thumbnail($post[‘id’])){ $imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post[‘id’] ), ‘full’ ); // replace ‘full’ with ‘thumbnail’ to get a thumbnail $imgURL = $imgArray[0]; return $imgURL; } else { return false; } } //integrate with WP-REST-API function insert_thumbnail_url() { register_rest_field( ‘post’, ‘featured_image_src’, //key-name in json …

[ Angular 2: Routes ] 네비게이션을 위한 라우트

네비게이션을 담당하는 라우트 기능을 구현해본다. Contents1 Angular 2 Routes Basic Setting2 Absolute vs Relative Path3 Imperitive Routing4 Routing Parameter5 Query Parameter6 Child Routes7 Redirecting Request8 Styling Active routerLink9 Guards – canActivate10 Guards – CanDeactivate Angular 2 Routes Basic Setting 처음에는 할 때마다 Route 설정이 헤깔린다. 코더가 누구냐에 따라 코딩패턴이 조금씩 다르기 때문에 이것저것 참고하다보면 자꾸만 …

[javascript] array 에 array를 push 하는 법

for loop을 사용하지 않고 간단하게 array 에 array를 push 하는 법이 있어 적어둔다. import {Ingredient} from ‘../shared/ingredient’; export class ShoppingListService { private items:Ingredient[]=[]; constructor() { } getItems(){ return this.items; } addItems(items:Ingredient[]){ Array.prototype.push.apply(this.items,items); } }  

[ Angular 2: Directives ] 지시자의 개념과 종류

Component 는 일종의 Directive 이다. 따라서, 결국 Directive 가 각 애플리케이션의 핵심인 셈이다. Directive 는 Angular2가 각 부분에서 어떤 일을 해야하는지에 대한 Instruction이다. 예를 들어, ‘<app-root></app-root>’ 와 같은 selector 를 이용한 tag는 Angular2에게 해당 컴포넌트를 표시하도록 하는 Directive 또는 Instruction 이다. Directive는 View와 Content가 표시되도록 할 뿐만 아니라, Dom이 표현되는 방식이나 구조를 바꾸는 일도 한다. …