Practical Accumulation

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 0-0 이 포스트에서는 ngx-mask를 사용하여 입력을 정의하는 내용을 다룬다. 0-1 ngx-mask는 사용자가 입력을 제대로 할 수 있도록 도와주는 기능을 한다. 0-2 예제와 기능은 아래 링크를 참조한다. 1. 작성 순서 1-1 화면이 만들어졌으니 이제 ngx-mask를 사용하여 입력 패턴을 설정한다. 1-2 먼저 ngx-mask를 사용하기 위해 app.module.ts에 import 한다. 1-3 신용카드 컴포넌트 template에 사용자 입력 제약 설정을 한다. 2. ngx-mask import하기 2-1 다른 라이브러리와 마찬가지로 import 해야 한다. 2-1-0 초기화에 대한 부분으 ngx-mask ..

1. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리이다. 내용이 길어질 것 같아 시리즈로 작성한다. 1-1 Angular는 Reactive Forms와 Template Forms을 지원하고 있다. 2. Credit Card를 입력하는 Form을 가지고 설명한다. 2-1 프로젝트를 생성한다. 이름을 creditcard로 하였다. 2-2 카드 컴포넌트에 입력 form 구조를 생성한다. 3. 프로젝트 생성하기 3-0 나는 상상력이 부족해 이름을 다 똑같이 해버렸다. 3-1 credit-card-form은 credit card form을 보여주는 컴포넌트이다. 3-2 validator 컴포넌트는 각 form control의 검증을 담당하고 화면에 에러를 표출해 준다. 3-3 validat..

1. 이 포스트는 RxJS와 XSS와 관련된 시리즈의 연속이다. 설명을 위한 예제를 공유하기 때문에 시리즈로 만들었다. 2. 시리즈의 2번 포스트를 보면 결과 값이 html 그대로 화면에 나오는 것을 볼 수 있다. 보통은 원하지 않는 결과이다. 3. 이렇게 되는 이유는 Angular 내부적으로 XSS 공격을 차단하기 위한 필터(escaper)를 가동하고 있기 때문이다. 3-1 >는 >

1. 이 포스트는 RxJS와 XSS와 관련된 시리즈의 연속포스트이다. 2. RxJS는 Angular와는 완전히 별도의 프로젝트로 비동기식 데이터 처리에 사용되는 함수형 라이브러리이다. 2-1 java 베이스로 Reactive 프로그램에 익숙하면 쉽게 이해할 수 있다. 개념이 동일하다. 3. RxJS에는 4가지의 주요 요소들이 있다. 3-1 데이터 소스인 Observable - Subject 클래스나 HttpClient의 메소드 호출로 반환 3-2 데이터를 흘려보내는 Pipe - Observable 객체의 메소드로 실행한다. 개념적인 내용이다. 3-3 pipe내에서 데이터를 가공하는 operators - pipe 메소드에 인자로 들어가며 순서대로 실행된다. 3-4 데이터를 받아서 사용하는 Observer ..

1. 이 포스트는 RxJS와 XSS와 관련된 시리즈의 연속포스트이다. 이전 포스트를 봐야 이해될 거다 Angular RxJS, XSS 관련 예제 - 1. 환경설정 1. 포스트는 RxJS와 XSS 공격관련하여 몇 가지를 정리한 시리즈이다. 2. 순서 2-1 프로젝트 환경설정 2-2 RxJS 2-3 XSS 3 환경설정 3-1 wikipedia api를 사용하여 검색하는 간단한 예제이다. 3-1-1 위키피디아 검 kogle.tistory.com 2. wki 서비스를 작성한다. 2-1 지난 포스트에 아주 간단한 껍데기를 만들었으니 이제 데이터를 가져와야 한다. 2-2 순서는 다음과 같다. 2-2-1 HttpClientModule을 app.module.ts에 import 한다. 2-2-2 wiki.service...

1. 포스트는 RxJS와 XSS 공격관련하여 몇 가지를 정리한 시리즈이다. 2. 순서 2-1 프로젝트 환경설정 2-2 RxJS 2-3 XSS 3 환경설정 3-1 wikipedia api를 사용하여 검색하는 간단한 예제이다. 3-1-1 위키피디아 검색을 사용할 거니 아래 페이지를 참고한다. API:Search - MediaWiki The following documentation is the output of Special:ApiHelp/query+search, automatically generated by the pre-release version of MediaWiki that is running on this site (MediaWiki.org). This module requires read ri..

0. 이 포스트는 Modal 사용에 대한 semantic ui를 활용한 설명이다. 1. Modal은 자바스크립트 기반의 client 언어들이 가지는 공통적인 난제이다. 2. Modal은 브라우저 화면 전체를 불투명한 검정색으로 칠해 배경을 희미하게 처리하고 화면 중앙에 박스를 표출한다. 2-1 이렇게 하려면 index.html 페이지의 body에 바로 붙어야 가능하다. 그렇지 않으면 상위레이어에 간섭을 받는다. 3. modal 컴포넌트를 생성하고 다음과 같이 설정한다. 3-1 modal 컴포넌트 template ui 3-1-1 modal이라는 컴포넌트를 만들었고 컴포넌트 template은 다음과 같다. 3-1-2 위의 캡처 이미지의 내용이다. modal을 감싸는 검은 색 배경을 div로 작성한 것에 주의..

1. 이 포스트는 모듈 내에서 또 다른 라우터를 설정하는 방법에 관한 내용이다. 2. Semantic UI의 가로 Tab을 작성하는 것으로 설명한다. 3. 작성 순서 3-1 Tab 컴포넌트를 작성한다. 3-2 tab ui를 작성한다. 3-3 각 tab 메뉴를 선택했을 때 보여질 컴포넌트를 생성한다. 3-4 routing-module.ts에 라이팅 테이블을 작성한다. 4. Tab 컴포넌트 생성 및 ui 작성하기 4-1 Tab 컴포넌트를 작성한다. 4-2 컴포넌트 template을 작성한다. 4-2-1 첫번째 부분은 메뉴로 4개의 컬럼 크기로 구성되어 있고 3개의 메뉴 항목이 있다. 4-2-2 각 메뉴는 각기 다른 url로 이동시킨다. 4-2-3 여기서 주의해야할 점이 있는데, routerLink는 linu..