Practical Accumulation

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

1. 기본 모듈단위 라우팅 설정은 아래 포스트를 참고한다. Angular : 모듈단위 라우팅 설정하기 0. Angular의 라우팅 설정은 모듈이름-routing.module.ts파일에서 지정할 수 있다. 1. 설정방법 1-1 모듈을 생성한다. 1-2 routing.module.ts에 매핑할 경로와 컴포넌트를 설정한다. 1-3 app.module.ts에 생성한.. kogle.tistory.com 2. Lazy Loading으로 모듈의 라우팅을 설정하는 이유는 2-1 첫화면에서 모든 클라이언트 자료를 받으면 로딩이 지연되기 때문이다. 2-2 그래서 화면에 보이는 부분만 받고 사용자가 다른 페이지로 이동할 때 추가로 필요한 모듈을 다운로드 받는다. 3. 설정 순서 3-0 app.module.ts에 lazy l..

0. Angular의 라우팅 설정은 모듈이름-routing.module.ts파일에서 지정할 수 있다. 1. 설정방법 1-1 모듈을 생성한다. 1-2 ~routing.module.ts에 매핑할 경로와 컴포넌트를 설정한다. 1-3 app.module.ts에 생성한 모듈을 import한다. 1-4 app.component.html에 을 작성한다. 2. 모듈 생성이 이전 포스트를 참조하고 매핑하는 방법은 아래와 같다. 2개의 모듈을 생성했다고 가정한다. 2-1 elements-routing.module.ts 2-1-1 localhost:4200/elements가 경로가 설정될 때 ElementsHomeComponent가 실행된다. import { NgModule } from '@angular/core'; imp..

1. Angular의 모듈은 하나의 목적을 달성하기 위해서 만들어진 덩어리이다. 2. 모듈의 타입은 다양한데 Domain, Routed, Routing, Service, Widget 정도로 구분할 수 있다. 2-1 Domin 타입은 한 가지 기능을 담고 있는 모듈이다. 2-2 Routed는 하나의 URL에 매핑되는 기능을 담고 있는 모듈이다. 2-3 Routing은 라우팅 테이블을 가지고 컴포넌트와 매핑하는 모듈이다. 2-4 Service는 앱의 여러 부분에서 사용될 서비스를 정의한다. 2-5 widget은 앱의 여러 부분에서 반복적으로 사용할 컴포넌트를 정의한다. 3. 타입에 따른 구분은 유용성이 떨어지고 그냥 용어처럼 사용되기 때문에 필요한 구분이다. 4. 보통 모듈은 기능 카테고리로 묶을 수 있는 ..

1. 이 포스트는 structural directive를 생성하는 방법에 대한 내용이다. 2. 설명은 ngFor 처럼 반복하는 구문이지만 특정한 횟수를 단순히 반복하는 기능의 directive를 구현한다. 2-0 개발 하다 보면 이 기능이 필요한 경우가 상당히 많다. 2-1 하지만, 단순히 n회 반복하는 구문을 작성하려면 컴포넌트 클래스에 배열까지 생성해야 해서 귀찮다. 2-2 바로 이전에 구현한 pagenation 역시 총 자료의 갯수만큼 반복하여 숫자를 나열하는 로직을 가지고 있다. 3. 예제는 아래 pagenation 포스트를 가지고 설명한다. Angular : Pagenation 구현하기 1. 이 포스트는 bootstrap을 이용하여 수동으로 pagenation을 구현하는 내용이다. 1-1 사실 ..

1. 이 포스트는 property directive를 생성하는 방법에 대한 내용이다. 2. 설명은 ngClass directive와 동일한 기능을 가진 custom directive를 구현한다. 2-1 ngClass는 객체를 받아 값이 true일 경우 key가 class에 추가되는 directive이다. 3. 예제는 아래 pagenation 포스트의 내용을 가지고 설명한다. 4. 순서 4-1 directive 파일을 생성한다. 4-2 app.module.ts에 등록한다. 4-3 directive.ts파일을 작성한다. 4-4 사용한다. 5. directive 생성 5-1 아래 코드를 실행하면 class.directive.ts파일이 생성되고 빈 ClassDirective 클래스가 만들어진다. $ ng gen..

1. StackOverflow에서 다 나오지만 나중에 참고하기 쉽게 붙여 놓는다. 2. ngSwitch - 특정한 값에 따른 분기만 가능하다. First Number Second Number Third Number Other Number Daniel String David String Alex String Other String 4. 멀티플 if - 가장 일반적으로 많이 사용하는 구조이다. Template for foo between 1 and 3 Template for foo between 4 and 6 Template for foo greater than 7 First Number Second Number Third Number Alex String David String Daniel String 출..