Spring Rest api + Angular framework로 웹사이트 만들기(6) – 개선사항 적용 (loading spinner)

이번 장에는 페이지가 완전히 로딩되기전에 보여지는 로딩 스피너를 웹화면에 적용해 보겠습니다. 현재까지 개발된 화면들은 모두 가벼운 로직으로 이루어진 화면들이라 빠르게 로딩되지만 무거운 로직이 필요한 화면이나,…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(6) – 개선사항 적용 (loading spinner)

Spring Rest api + Angular framework로 웹사이트 만들기(5) – 개선사항 적용 (custom alert/confirm dialog, resolve, 404page)

이번장에서는 지금까지 개발한 내용에 대해서 개선사항을 적용해 보겠습니다. 첫번째로 현재 사용중인 시스템 alert 및 confirm 다이얼로그를 Material Dialog를 이용하여 커스텀 모달 다이얼로그로 변경해 보겠습니다. 두번째로는…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(5) – 개선사항 적용 (custom alert/confirm dialog, resolve, 404page)

Spring Rest api + Angular framework로 웹사이트 만들기(4) – 게시판(CRUD)

이번장에서는 Angular로 간단한 게시판을 만들어봄으로써 CRUD(Create/Read/Update/Delete) 실습을 해보겠습니다. 게시판의 기능은 총 4가지로 구성되며 각각 게시글 조회, 게시글 쓰기, 게시글 수정, 게시글 삭제로 이루어지며 하나씩 구현해보겠습니다.…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(4) – 게시판(CRUD)

Spring Rest api + Angular framework로 웹사이트 만들기(3) – 내정보(Interceptor, Router Guard)

이번 장에서는 로그인한 회원의 정보를 표시하는 내정보 화면을 구현해 보겠습니다. Interceptor를 이용하여 인증이 필요한 API의 Http Header 세팅을 공통화하고, 인증(로그인)이 필요한 페이지에 대한 접근을 처리하는…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(3) – 내정보(Interceptor, Router Guard)

Spring Rest api + Angular framework로 웹사이트 만들기(2) – 로그인/가입(HttpClient, Proxy, Validation)

이번 장에서는 가입과 로그인 기능을 추가하여 Rest API와 연동하는 방법을 실습하겠습니다. 이번 실습 부터는 리소스를 제공할 rest api가 필요하므로 아래 내용을 참고하여 서버를 띄우고 실습하겠습니다.…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(2) – 로그인/가입(HttpClient, Proxy, Validation)

Spring Rest api + Angular framework로 웹사이트 만들기(1) – 프로젝트 구성 및 반응형 레이아웃 구현

Angular 프레임워크를 이용하여 Front 웹사이트를 만드는 실습을 해보겠습니다. Angular는 Front 웹을 만드는 프레임워크 이므로 데이터와 비즈니스 로직을 적용하려면 리소스를 제공하는 API서버가 따로 필요합니다. 리소스를 제공할…

Continue Reading Spring Rest api + Angular framework로 웹사이트 만들기(1) – 프로젝트 구성 및 반응형 레이아웃 구현

Angular2 정리(6) – HttpClient, Proxy

이번장에서는 외부 리소스를 처리하는 방법에 대해 살펴보겠습니다. Angular는 통신을 위한 HttpClient 모듈을 제공하며, 이를 통해 외부 Rest 서버와 통신하여 리소스를 처리 할 수 있습니다. 외부…

Continue Reading Angular2 정리(6) – HttpClient, Proxy

Angular2 정리(5) – Validations

이번 장에서는 폼에 입력된 값의 유효성을 체크하는 방법에 대해 실습하겠습니다. Input 필드의 값 유효성 체크 ngModel을 사용해야 하므로 FormsModule을 app.module.ts에 선언합니다. // app.module.ts import {…

Continue Reading Angular2 정리(5) – Validations

Angular2 정리(4) – Routing, layout component

Angular 프레임웍에서 웹페이지는 컴포넌트의 집합으로 표시됩니다. 또한 웹페이지를 브라우저에서 출력하기 위해서는 유일한 URL이 필요합니다. Angular에서는 이렇게 유일한 URL과 컴포넌트 사이를 맵핑하는 기능을 제공하는데 이것을 Routing이라고…

Continue Reading Angular2 정리(4) – Routing, layout component

Angular2 정리(3) – 컴포넌트간 데이터 전달( @Input, @Output, Observable )

Angular는 화면을 구성하는 최소 단위가 컴포넌트입니다. 클라이언트에게 보이는 최종 화면은 하나의 html로 보이지만, 내부적으로는 여러 개의 컴포넌트들로 이루어져 있을 수 있습니다. 따라서 컴포넌트 간에 데이터를 교환해야 하는 이슈가 발생할 수 있습니다.  이번 장에서는 컴포넌트간에 데이터를 교환하는 방법에 대해 알아보겠습니다. 부모 -> 자식 컴포넌트로의 데이터 전달 parent, child 컴포넌트 2개를 생성합니다. $ ng…

Continue Reading Angular2 정리(3) – 컴포넌트간 데이터 전달( @Input, @Output, Observable )

Angular2 정리(2) – Hello Angular 및 기본개념설명

앞서 환경이 구축되었다는 가정하에 Angular 프로젝트를 생성합니다. 터미널에서 ng명령어를 통해 Angular 프로젝트를 생성하고 아래와 같이 서버를 실행합니다. // ng new 프로젝트명(소문자와 '-'만 이용하여 생성) $…

Continue Reading Angular2 정리(2) – Hello Angular 및 기본개념설명

Angular2 정리(1) – 설치 및 개발환경 구축

Angular란? Node기반의 완전하고 독립적인 웹 프런트 프레임워크로서, 체계적이고 구조화된 개발 방법 및 환경을 제공합니다. 기존의 웹 개발은 백엔드 서버와 강 결합된 상태의 템플릿 엔진 기반의 개발 방법이 주류였습니다. 웹 개발 환경은 꾸준히 발전해 왔지만 이러한 백엔드 서버의 부가적인 요소로서의 웹 개발은 비효율 적이고, 백엔드 서버의 바운더리 안에서는 더 이상 발전하기 힘든 상황에 직면하였습니다.  Angular를 비롯한 여러 가지 프런트 프레임워크의 주요 목표 중 하나는 html, javascript, css를 통한 웹 개발 시 백엔드 개발 이상의 개발 생산성을 확보하는 것입니다. Angular를 사용하면 개발면에서 상당히 논리적이고 편리한 개발환경을 제공한다는 것을 알 수 있습니다.  뭐가 다른가? 웹 개발을 위한 전용 프레임워크로서, node 기반으로 서버가 실행되며 별도의 백엔드 서버의 부가 요소로서 개발환경을 구성하지 않습니다.(ex. Spring-Freemarker-tomcat) npm명령을 제공하여 쉽게 개발 환경을 구축할 수 있어 기존의 환경보다 놀라운 접근성을 제공합니다.  html, css, typescript 파일로 구성되는 컴포넌트 생성을 통해 기능에 따라 웹 화면을 완전히 독립되어 실행되는 모듈로 만들 수 있습니다.  Typescript의 사용을 통해 여러 가지 이점을 가지고 개발할 수 있습니다. ( 컴파일을 통한 실행 전 오류 검출, 클래스, 인터페이스, 상속 등 객체지향 프로그래밍 지원, 타입 지정을 통해 데이터의 타입에 따른 오류 처리가 필요 없고, 타입 유추가 가능하여 컴파일 단 오류 검출이 가능.) 막강한 자동완성 기능을 제공하여 웹 개발 시 생산성을 향상할…

Continue Reading Angular2 정리(1) – 설치 및 개발환경 구축