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..
웹 애플리케이션 파일 업로드는 크게 두가지의 방식이 있다. multipart/form-data FormData 객체를 사용하여 요소로 부터 취득한 file 정보를 append하여 서버로 전송하는 방식이다. applecation/x-www-urlencoded 클라이언트는 바이너리 파일을 Base64 인코딩하여 문자열화한 후, 서버로 전송하고 서버는 Base64 인코딩된 문자열을 디코딩하여 저장하는 방식이다. 인코딩으로 인한 성능 이슈가 발생할 수 있다. applecation/x-www-urlencoded 방식은 인코딩으로 인한 성능 이슈가 발생할 수 있다. multipart/form-data 방식을 사용하여 파일을 전송하는 예제를 작성하여 보자. view 이미지 추가 2. component onFileCh..
- Total
- Today
- Yesterday
- MySQL
- localStorage
- Python
- react
- 페이스북 로그인
- 파이썬
- data component module
- JSON
- React-router
- 파이썬3
- Angular
- mobx
- data grid component
- facebook login
- python3
- JPA
- Spring
- Router
- Redux
- https://www.tistory.com/auth/logout/
- Java
- JavaScript
- jQuery
- data gird component
- angular router
- data component
- data table component
- Spring Boot
- CSS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |