CheolCheol Dev Note

요즘에 프로젝트를 진행하는 도중에 data grid module를 맡아서 개발을 진행하고 있다. SWIMLANE 샘플이나 데브익스트림 처럼 data가 있으면 자동으로 table을 만들어 주는 모듈을 만드는 것이다. 그 전에는 퍼플리셔 디자이너 분이 페이지 퍼플리싱을 해주시면 그 페이지를 복사해서 angular로 바꾸는 작업을 해왔었는데 이번 프로젝트에서는 그 작업 대신 예제 샘플처럼 데이타가 주어지면 모듈을 이용해 자동으로 생성되게 하는 작업을 맡게 된 것 이다. 어떻게 해야할지 감이 안잡혀서 일단 SWIMLANE 소스를 다운받아 분석 하기로 했다. 다음과 같은 component를 이용하면 다음의 table이 만들어진다. 안에 이라는 directive를 줘서 column을 설정하는 것 같다. compon..

Angular를 사용하면서 ng-template와 ng-container를 쓰는일이 있습니다.그러다 문뜩 구체적으로 어떤 의미와 목적이 있는지 궁금해 공식 홈페이지에서 찾아봤습니다. ng-template는 HTML 랜더링을 하기위한 Angular 엘리먼트라고 합니다. 그리고 직접적으로 표현되지 않는다 하며, view에 랜더링 되기전에 와 내용에 대해서 주석처리 한다고 하는데 어떤 의미인지 살펴봐야겠습니다. 공식 홈페이지에 있는 예제는 다음과 같이 설명합니다. ng-template에 감싸진 부분이 structural directive 가 없으면 그 부분은 해당 엘리먼트가 사라집니다. structural directive 는 ngFor, ngIF, ngSwitch 등이 있습니다. Hip! Hip! Hoora..

Angular 4.3부터 추가된 HttpClientModule에는 http 요청에 인터셉터를 적용할 수 있다. 인터셉터를 간단히 설명하면 api나 특정 data를 요청 할 때 그 요청을 가로채는 역할을 한다. 인터셉터를 사용하기 위해서는 HttpInterceptor를 구현해야 한다. interface HttpInterceptor { // intercept의 첫번째 인자는 처리할 요청을 받고, 두번째는 다음 인터셉터를 가리키는 HTTP 핸들러다. intercept(req: HttpRequest, next: HttpHandler): Observable } ex) 서버에서 보내준 헤더 받기 export class HeaderInterceptor implements HttpInterceptor { interce..

Angular를 사용하다가 Data Chart를 표현해야할 때가 있었다. Google에서 Angular Data Chrart를 찾다가 좋은것을 찾아 공유한다. 모듈명은 NGX-CHARTS이다. 예제 여러가지 차트 및 스킨 옵션등을 제공한다. 기본적인 사용법은 NPM에서 모듈 추가 후에 임포트 해서 사용하는 것이다. npm install @swimlane/ngx-charts --save추가 후에 moudle.ts에 추가를 해준다. import { NgxChartsModule } from '@swimlane/ngx-charts'; @NgModule({ imports: [ RouterModule.forChild(routes), FormsModule, CommonModule, NgxChartsModule ], ..

EO는 Search Engine Optimization(검색 엔진 최적화)의 약어로 사이트를 구글, 네이버, 다음 등등의 검색엔진에 검색이 잘 되도록, 상위에 노출이 되도록 사이트를 수정하는 것을 말합니다. 사이트를 검색엔진에 등록해서 접속자를 늘려야 하는 경우에 필요하며, 그렇지 않는 경우에는 신경쓰지 않아도 됩니다.그런데 Angular사이트는 사이트의 컨탠츠가 검색엔진에서 아예 검색되지 않습니다. 그 이유는Angular가 SPA로 되어 있어 서버는index.html만 전달할 뿐 모든 컨탠츠가 사이트에 접속한 다음 생성되기 때문입니다. 검색엔진들은 서버에서 생성되는 파일을 수집하기 때문에Angular 사이트는 기본적으로SEO가 아예 불가능합니다. 그래서 해결책 => Server Side Renderin..