Frontend/Angular

Angular ngx-pagination 구현하기 Angular ngx-pagination을 이용하여 페이징을 구현하는 방법에 대해 알아보겠습니다. ngx-pagination은 페이징 처리를 위해 만들어진 Angular 라이브러리입니다. Angular5+ 이상에서 동작하며 보다 자세한 내용과 live demo는 아래 링크를 통해 확인할 수 있습니다. ngx-pagination Pagination for Angular www.npmjs.com angular-e1f9hq - StackBlitz ngx-pagination demo / bug reproduction starter. stackblitz.com 구현 환경은 다음의 버전을 기준으로 구성하였습니다. Node.js v12.13.1 MySQL v5.7.3..

Angular + MySQL + Node.js CRUD Application 구현하기 Angular, MySQL, Node.js를 이용하여 CRUD Application을 구현하는 방법에 대해 알아보겠습니다. 구현 환경은 다음의 버전을 기준으로 구성하였습니다. Node.js v12.13.1 MySQL v5.7.3 Angular v11.2.4 구현에 앞서 다음 포스팅을 참고하여 서버를 먼저 구성해주어야 합니다. Node.js + MySQL CRUD API 구성하기 Node.js + MySQL CRUD API 구성하기 Node.js, Express, Sequelize를 이용하여 MySQL CRUD RESTful API를 구성하는 방법에 대해 알아보겠습니다. Sequelize는 MySQL, Postgres, ..

Angular 모듈(Module) Angular의 모듈(Module)에 대해 알아보겠습니다. 1. 모듈 (Modue) Angular의 모듈은 Angular의 컴포넌트, 디렉티브, 파이프, 서비스 등과 같이 관련이 있는 요소를 모은 하나의 단위를 의미합니다. 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하여 하나의 애플리케이션을 구성합니다. 또한 모듈은 다른 모듈을 import 할 수 있습니다. Angular에서 제공하는 라이브러리 모듈이나 서드 파티 라이브러리도 import 하여 사용할 수 있습니다. 이러한 모듈성(Modularity)은 애플리케이션 개발에 있어서 중요한 의미를 갖습니다. 애플리케이션에 대한 요구사항이 많아지면서 코드의 복잡도가 높아짐에 따라 루트 모듈, 기능 모..

Angular 생명주기(Lifecycle)와 훅(Hook) 메소드 Angular의 생명주기(Life cycle)와 훅(Hook) 메소드에 대해 알아보겠습니다. 1. 생명주기 Angular의 컴포넌트와 디렉티브는 생명주기(Lifecycle)를 갖는데, 생명주기는 Angular가 컴포넌트와 디렉티브를 생성하여 소멸하기까지의 과정을 관리하는 것을 의미합니다. 이와 관련하여 생명주기 이름 앞에 ng가 붙은 훅(Hook) 메소드를 제공하는데 이를 구현하여 생명주기의 각 단계에서 처리해야하는 내용을 정의할 수 있습니다. Angular는 다음의 순서대로 생명주기를 관리합니다. ※ 디렉티브 생명주기 훅 메소드디렉티브도 컴포넌트와 동일한 생명주기 훅 메소드를 사용합니다. 하지만 디렉티브에는 뷰가 없기 때문에 뷰와 관련된..

Angular 파일 구조와 처리 흐름 Angular 프로젝트의 파일 구조와 처리 흐름에 대해 알아보겠습니다. 1. Angular CLI Angular CLI는 간단한 명령어를 사용하여 Angular 프로젝트의 스캐폴딩(Scaffolding, 프레임워크의 기본 골격)을 생성, 실행, 빌드 할 수 있도록 지원해주는 Command Line Interface 입니다. Angular CLI는 Angular 프로젝트의 스캐폴딩을 간단한 명령어로 생성해주어 개발환경 구축에 소요되는 시간을 최소화해줍니다. Angular CLI가 지원하는 기능은 다음과 같습니다. Angular 프로젝트 스캐폴딩(Scaffolding) 생성 Angular 프로젝트에 component, directive, service, class, in..

Angular 소개와 특징 Angular는 SPA(Single Page Application) 개발을 위해 구글에서 만들어진 오픈 소스 JavaScript Framework 입니다. 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있으며, TypeScript 를 주력 언어로 채택하여 대규모 어플리케이션 개발에 적합한 환경을 제공합니다. 1. Angular 소개 Angular 는 이전 버전인 AngularJS 의 후속 버전으로 2014년 처음 소개되었고 이후 지속적인 개선을 거치며 새로운 버전이 release 되고 있습니다. Angular는 AngularJS의 후속 버전이기는 하지만 호환성이 없는 새로운 프레임워크로 보는 것이 좋습니다. Angular는 AngularJS보다 학습이 쉽고 성능은 향상되었으며..