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

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

[ 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:Http ] Firebase 파이어베이스 데이타베이스

Angular 2 는 Observable 을 이용해서 데이타베이스에 접근한다. Firebase 는 실시간으로 업데이트 되는 데이타베이스로 Angular 2의 Observable 과 궁합이 잘 맞는 듯 하다. 혹자는 복잡하고 세밀한 기능이 필요한 경우에 Firebase 데이타베이스를 사용하지 말 것을 권하기도 하니, 아직 Firebase 데이타베이스가 보완이 필요한 단계일 수도 있다. 편의성 때문에 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: 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 ] 템플릿 기반의 폼

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

[ 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: Directives ] 지시자의 개념과 종류

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

[ Angular 2 : Lifecycle Hook ] 라이프 사이클

실행순서 ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked 각 라이프 사이클 설명 1. ngOnChanges Data-bound Property 값이 변할 때. 2. ngOnInit ngOnChanges가 처음 실행되고 나서, 컴포넌트가 시작될 때. ( ngOnChanges 가 Data-bound Property 값이 변경될 때마다 실행되는 반면, ngOnInit는 첫번째 ngOnChanges 실행 이후 단 한번만 실행된다. ) 3. ngDoCheck Angular 2 Change Detection Cycle 이 …