[ Angular2 ] 이미지 파일 Input 및 preview

file input 필드에 이미지를 선택하여 입력하면, 이미지 preview 를 출력하는 방법을 간략히 적어본다. 바로 해보자. //Angular Cli 를 이용하여 새 프로젝트를 생성한다. $ ng new img-input   src/app/app.component.html <h1> {{title}} </h1> <input type=’file’ accept=”image/*” (change)=”readUrl($event)” multiple> <img *ngFor=”let u of dataUrl” [src]=”u” width=”300px”>   src/app/app.component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: …

Angular cli 에서 scss sass 사용하는 법

angular cli 프로젝트를 생성하면 기본 style 형식이 css 로 설정된다. scss 나 sass 를 사용하려면, 프로젝트 생성단계에서 style옵션을 추가해주어야한다. 기존 프로젝트에서 scss 또는 sass를 사용하려면 node-sass 를 설치하고 angular-cli.json 파일을 수정해주면 된다. 새 프로젝트 생성 //SASS 사용시 $ ng new project –style=sass //SCSS 사용시 $ ng new project –style=scss   기존프로젝트에 sass / scss 추가하기 …

[ Angular2 Tips ] jquery-datetimepicker 를 사용해보자.

angular2 datetimepicker 를 검색해보면 ng2-datetime-picker ng2-eonasdan-datetimepicker 등 여러가지 모듈을 찾을 수 있다. 링크된 페이지에 설명된 대로 설정하면 Angular2에서 쉽게 사용할 수 있지만, 왠지 부족하게 느껴진다. 디자인이나 사용성이 내가 원하는 것과는 거리가 있다. jquery datetimepicker 가 사용성이 가장 좋다고 생각했는데, 이건 angular2 에서 바로 npm install, import 해서 사용할 수 있게 만들어져있지가 않다. angular cli 에서 …

[ 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 …