Angular Universal (앵귤라 유니버살) – 서버사이드 렌더링 SEO 구현

[경고] 이 포스트는 Server Side Rendering 을 구현하려고 시도하는 중에 개인적인 노트로 작성된 것 입니다. 완성도가 있는 것도 아니고 바로 프로덕션에 쓸 수도 없습니다. 참고하세요. angular4 만으로는 아직 검색 엔진에 대응하는 seo 를 구현하기 어렵다. rendering 이 client side 에서 실행되기 때문에, 검색엔진이 해당 페이지를 접속하면, 내용이 입력되지 않은 간단한 html  프레임만 건지게 된다. 이런 … Angular Universal (앵귤라 유니버살) – 서버사이드 렌더링 SEO 구현 더보기

[ 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: … [ Angular2 ] 이미지 파일 Input 및 preview 더보기

[ Angular 2: Horizon ] rethinkdb 맛보기

angular2, horizon, rethinkdb 를 사용해보자. 프로젝트 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 를 실행하면, 다음과 같이 표시된다. 에러없이 horizon 이 잘 시작되는 … [ Angular 2: Horizon ] rethinkdb 맛보기 더보기

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

프로젝트 설정 프로젝트 생성 $ ng new auth $ cd auth  컴포넌트 및 인터페이스 생성 $ cd src/app $ mkdir protected $ cd protected $ ng g c protected –flat -is -it $ cd .. $ mkdir unprotected $ cd unprotected $ ng g c signin –flat -is -it $ ng g c signup –flat … [ Angular 2: Authentication ] firebase 사용자 인증 활용 더보기

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

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

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

Pipes 는 데이타를 출력할 때 시각적인 형식을 변형하여 나타낼 수 있도록 해준다. Built-in Pipes 는 이미 Angular 2 에서 지정해놓은 것들인 반면, 필요에 따라 우리가 Custom Pipes 를 만들어 사용할 수도 있다. Pipes Example   myValue = ‘lowercase’; <p>{{lowercas}}</p> ‘lowercase’라고 출력된다. myValue = ‘lowercase’; <p>{{ myValue | uppercase }}</p> ‘LOWERCASE’ 라고 출력된다. ‘|’ 다음에 나오는 … [ Angular 2: Pipes ] 파이프 개념 및 활용 더보기

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

Angular 2 에서 폼을 처리하는 방식은 템플릿 기반과 데이터 기반으로 나뉜다. 앞선 포스트에서 템플릿 기반을 다루었고, 이번 포스트는 그에 이어 데이타 기반의 폼을 살펴보려고 한다. 프로젝트 설정 부분은 이전 (템플릿 기반의 폼) 글의 초반부를 참고하자. 설정 DataDrivenComoponent 가 초기 화면에  나타날 수 있도록 selector를 포함시키자. app.component.html <div class=”container”> <div class=”row”> <div class=”col-md-6 col-md-offset-3″> <h1>Forms</h1> <app-data-driven></app-data-driven> … [ Angular 2: Forms ] 데이터 기반의 폼 (Reactive Form) 더보기

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

폼은 사소해보인다. Form 만을 위한 모듈이 존재할 필요가 있겠나 싶다. 데이타바인딩과 Input을 사용하면 그만일 것도 같다. 하지만, Form은 그 이상의 기능을 가지고 있다. Data Validation, 향상된 UX, Form 상태 확인 등 차원높은 기능을 구사하기 위해서는 Form과 관련된 Angular 2 모듈이 꼭 필요하다. HTML vs Angular 2 Forms HTML 로 간단한 폼을 만들어보자. <form> <input type=”text”> … [ Angular 2: Forms ] 템플릿 기반의 폼 더보기

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

네비게이션을 담당하는 라우트 기능을 구현해본다. Angular 2 Routes Basic Setting 처음에는 할 때마다 Route 설정이 헤깔린다. 코더가 누구냐에 따라 코딩패턴이 조금씩 다르기 때문에 이것저것 참고하다보면 자꾸만 더 헤깔리게 된다. 일단, 한가지 패턴을 완전히 습득해서 외우고 나면, 약간 변형된 코딩들도 이해가 쉬워진다. 먼저, 새 프로젝트를 만든다. $ ng new routes-study –prefix rt –directory routes-study routes-study/src/app/components 폴더를 … [ Angular 2: Routes ] 네비게이션을 위한 라우트 더보기

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

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