Practical Accumulation

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..

1. Generic은 자바 언어처럼 하나의 클래스를 다양한 목적의 타입에 활용할 수 있도록 해주는 기능을 제공한다. 2. 두가지 용도가 있으며 class에 활용하는 것과 function에 적용할 수 있다. 3. 첫번째 예시는 class generic이다. class ValueHolder { value: any } const numberHolder: ValueHolder = new ValueHolder(); numberHolder.value = 10 const stringHolder: ValueHolder = new ValueHolder(); stringHolder.value = "Hello" console.log(numberHolder.value); console.log(stringHolder.value..

1. 이 포스트는 tsc의 옵션을 설정하는 tsconfig.json파일에 관한 내용이다. 2. 컴파일시에 옵션과 프로젝트 세팅에 사용된다. 3. 프로젝트의 root 디렉터리에 위치한다. 4. tsc --init 으로 default 파일을 생성할 수 있다. 4-1 이와 유사하게 npx typescript --init 명령어로도 동일하게 default파일을 생성할 수 있다. 4-2 아래와 같은 tsconfig.json 파일이 생성되는데 여기에는 target은 설정되어 있지만 noEmitOnError는 없다. 4-3 아래처럼 noEmitOnError option을 추가해준다. 5. 옵션을 보면 strict가 있는데, 원래 tsc의 기본값은 false이다. --init으로 tsconfg가 생성되면 기본값이 tr..

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..

1. 이 포스트는 헤더배열과 데이터배열을 전달하면 자동으로 컬럼 만큼의 테이블을 생성해주는 컴포넌트 작성이다. 2. table 컴포넌트를 생성한다. 2-0 데이터 구조는 다음과 같이 전달한다. 2-0-1 헤더는 키와 표출될 구문을 분리한다. 테이블은 헤더의 속성 순서대로 표출되도로 할 것이다. 2-0-2 데이터는 모든 키값을 포함하는 데이터를 작성한다. 데이터의 순서는 상관없다. headers = [ { key: 'name', label: 'Name' }, { key: 'age', label: 'Age' }, { key: 'status', label: 'Employed' }, { key: 'job', label: 'Job' }, ] data = [ { name: 'Pilseong', age: 41, jo..

0. 이 포스트는 semantic ui의 segment를 사용하여 설명한다. 0-1 semantic ui의 segment 항목에 가면 아래와 같은 부분이 있다. 1. ng-content는 컴포넌트에서 테크의 속성이 아닌 내부 영역에 입력한 경우 받아서 처리한다. 1-1 이렇게 하면 속성을 굳이 외울 필요없이 본문에 넣어주면 되기 때문에 상당히 편리하다. 2. 상위 모듈에서 사용할 segment를 받아서 보여줄 segment 컴포넌트를 하나 생성한다. 2-1 컴포넌트 view에 다음과 같이 붙여 넣는다. 2-1-1 위의 이미지에 있는 소스코드를 아래처럼 2개의 ng-content로 구분하고 2-1-2 첫번째 ng-content는 select 속성으로 지정된 header라는 테그를 찾아서 매핑하고 2-1-3..