[DEV] App Dev ∕ Web Front/Framework ∕ Angular 검색 결과
31 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[라이브러리]Gridjs : Typescript 기반 게시판 모듈

import { Grid } from 'gridjs'; ngOnInit(): void { this.grid = new Grid({ search: true, //client-side searh (옵션) sort: true, //client-side sort (옵션) pagination: true, //client-side pagenation (옵션) fixedHeader: true,//height와 함께 사용시 fixed header 사용 가능 // height: '400px', //height 지정 // pagination: { // limit: 1 //페이지별 상한 숫자 // }, columns: ["Id", "Name","Phone"], // columns: ["Name", { // name: 'Im..

2020. 8. 24. 14:13
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[라이브러리]Akita : JS 어플리케이션을 위한 State관리

# 개요Akita 라이브러리란 Javascript Application을 위한 State 관리 라이브러리이다.Rxjs 위에 만들어진 state 관리 패턴이라고 할 수 있다.여러개의 Data Store를 만들고, 실시간으로 Data 갱신을 받기 위한 용도이다. Data Store Model은 Observable 형식으로 제공된다.Akita는 함수적프로그래밍 대신에 객체 중심 디자인으로 진행된다.프로젝트는 아래와 같은 구조로 Data의 State를 저장하고, 동작하게 된다. # 상태관리란? # 구성요소- 이전1. .service.ts Backend API(DB CRUD)2. component.ts > service.ts - component.ts 는 CRUD와 관련된 Action Event 발생시, Serv..

2020. 8. 20. 11:02
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

Angular 핵심 요약(미완)

# Angular Framework의 정의- Single Page Application을 만드는 것을 지원하는 Web Front-end Framework이다.- Component(재활용 가능) 기반으로, Web을 구성할 수 있도록 여러가지 Angular 구성요소들을 제공한다.- 각각의 Angular 구성요소들은 TypeScript 언어(Annotation이 사용됨)를 기반으로 설계되어 있다. # Angular 구성요소- Module / @NgModule / (모듈이름).module.ts - Component / @Component / (컴포넌트이름).component.ts | (컴포넌트이름).component.html | (컴포넌트이름).component.scss View(html)과 Logic(clas..

2020. 8. 19. 17:03
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[라이브러리]cdk/drag-and-drop : 드래그&드롭 기능

# 개요@angular/cdk/drag-drop 라이브러리란, material.angular.io 에서 공식적으로 제공하는 드래그&드롭 Angular Module이다. # 설치방법npm install --save @angular/cdk # 사용법1. DragDropModule을 NgModule 내에 import2. X.component.html 상에서 적용 Dragging starts after one second drop(event: CdkDragDrop) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else..

2020. 8. 19. 16:26
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[라이브러리]ng-zorro : Augular를 위한 UI Framework(Ant 디자인 철학)

# 개요ng-zorro-antd란? Angular 프로젝트 상에서 사용가능한 Ant Design 기반 UI Framework이다.nz로 시작하는 속성, 태그는 ng-zorro 모듈 내 정의된 구성요소임을 의미 # 설치Q. Ant Design이란?- Admin 페이지를 더 쉽게 만들 수 있도록 하기 위해 만들어진 React / Angular 기반의 UI Framework이다.- 디자이너 없이, 완성도 높은 UI 프레임워크를 쓰고 싶고, 좋은 UX를 만들고 싶은 욕구에서 나온 결과이다. - 요즘은 디자이너 없이도, Bootstrap과 같은 UI 프레임워크를 사용할 경우, 쉽게 수준높은 UI를 만들어낼 수 있다.- Ant Design이란 10가지 디자인 원칙에 입각하여, 훌륭한 디자인의 UX를 제공하는 UI ..

2020. 8. 19. 16:15
[DEV] App Dev ∕ Web Front/Framework ∕ Angular

[라이브러리]ngx-quill : 텍스트 에디터 Angular Module

# 개요Angular Version 2 이상을 지원하는 Rich Text Editor의 모든 기능을 가진 Component( 정의)를 포함한 Angular Module이다.1.2k 이상의 github star # 기본 셋팅1. npm install --save ngx-quill (Version 5 이상) npm install ngx-quill@1.6.0 (Version 5 미만)2. ngx-quill 내에 Dependency가 존재하는 Angular Module들을 설치[자동으로 설치될 듯?]- @angular/core : 기본 Angular 구성요소들을 정의하는 Angular Framework 핵심 모듈- @angular/common : Angular Framework 중 기본 기능과 관련된 모듈- @..

2020. 8. 19. 15:27