nalaolla

monolithic 아키텍쳐로 이루어진 시스템은 자원을 동적으로 할당하거나 해제하는 일이 빈번한 환경에서 유연하게 대처하기가 어렵습니다. 예를 들면 로드 밸런싱을 하거나 장애 복구 등이 빈번한 환경을 구축하려면 가용한 서비스 인스턴스에 대한 정보(host, port)를 누군가가 관리하고, 해당 정보를 동적으로 제공할 수 있어야 합니다. 그런데 monolithic 시스템은 처음부터 그러한 점을 고려하여 설계된 시스템이 아니기 때문에 위와 같은 기능을 도입하는데 비용이 많이 들고 효율적이지 못합니다. 클라우드에서는 위와 같은 서비스를 제공하는 시스템을 처음부터 고려하고 설계되었으며 통칭하여 Service Discovery라고 부릅니다. Service Discovery는 자신이 가지고 있는 호스트들의 정보를 ..

이번장에서는 Spring Cloud를 이용하여 Gateway(Routing & Filter)서버를 구축해 보도록 하겠습니다. SpringCloud에서 Gateway는 서로 분산되어있는 서비스들을 하나로 모아주는 관문같은 역할입니다. 기존의 로드밸런서, 리버스 프락시 기존의 리버스 프락시나 로드밸런서는 특정 요청 또는 URI에 대해 매핑될 서버의 ip나 도메인을 사전에 등록해놓아야 합니다. 등록이나 수정하는 과정에서 프로세스의 재시작이 필요할수도 있고 그에 따른 순단이 발생할수도 있습니다. 이러한 점은 시스템 운영을 위한 추가적인 인력이나 리소스가 필요하다는 것으로 해석할 수 있습니다. Spring Cloud Gateway의 차별점 Spring Cloud Gateway는 다수의 서비스 엔드포인트를 하나로 ..

과거에 분산시스템이란 개인이 접근할 수 없는 전문적인 분야로, 복잡하고 정교한 시스템으로 구성되어 있어 개인 개발자 혼자 구축하거나 운영할 수 없는 영역이었습니다. 그러나 Spring Cloud가 나오면서 가장 보편적인 분산 시스템 패턴에 대하여 간단하고 접근 가능한 프로그래밍 모델을 제공하게 되었고. 개발자가 복원력 있고 안정적인 분산 시스템을 구축할 수 있게 되었습니다. Spring Cloud는 Spring Boot 위에 구축되므로 기존의 Boot 개발자가 손쉽게 접근하여 시작하고 생산성을 높일 수 있게 되었습니다. 각설하고, Spring Cloud는 다음과 같은 Feature로 구성되어 있습니다. Configuration Server 시스템의 환경 설정을 중앙화 하고 실시간으로 설정을 변경하고 전파..

이번 장에는 페이지가 완전히 로딩되기전에 보여지는 로딩 스피너를 웹화면에 적용해 보겠습니다. 현재까지 개발된 화면들은 모두 가벼운 로직으로 이루어진 화면들이라 빠르게 로딩되지만 무거운 로직이 필요한 화면이나, 데이터 입력등 응답에 시간이 오래 걸리는 화면 작성시엔 더 나은 사용자 경험을 주기 위해 로딩 화면을 제공하는 것이 좋습니다. 로딩 화면 컴포넌트 생성 로딩 화면은 총 2개의 UI가 필요합니다. 첫번째는 빙글빙글 도는 로딩 스피너 화면 두번째는 로딩 스피너 배경을 회색으로 덮는 오버레이 화면입니다. 로딩 스피너는 오버레이 화면의 가운데에 표시됩니다. 로딩스피너는 html과 css를 이용해서 애니메이션을 그려야 하는데요. 이미 사용중인 스피너 애니메이션이 없다면 아래 사이트에서 다양한 스피너의 CSS..

이번장에서는 지금까지 개발한 내용에 대해서 개선사항을 적용해 보겠습니다. 첫번째로 현재 사용중인 시스템 alert 및 confirm 다이얼로그를 Material Dialog를 이용하여 커스텀 모달 다이얼로그로 변경해 보겠습니다. 두번째로는 resolve를 이용하여 ajax로 페이지 전환이 이뤄질때의 컨텐츠 깜박임 문제를 해결해보겠습니다. Material Dialog 모듈 추가 Material Dialog를 이용해야 하므로 기존에 추가하지 않았다면 다음과 같이 material.module.ts에 추가합니다. // material.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; ..

이번장에서는 Angular로 간단한 게시판을 만들어봄으로써 CRUD(Create/Read/Update/Delete) 실습을 해보겠습니다. 게시판의 기능은 총 4가지로 구성되며 각각 게시글 조회, 게시글 쓰기, 게시글 수정, 게시글 삭제로 이루어지며 하나씩 구현해보겠습니다. 게시글 리스트 조회 게시글 조회는 메뉴의 게시판을 눌렀을때 보여지는 화면입니다. 읽기 기능에 해당하며 인증이 필요없이 누구나 볼수 있는 페이지로 구성됩니다. 게시글 리스트 Component 생성 $ cd src/app/component $ ng g c board --spec false CREATE src/app/component/board/board.component.css (0 bytes) CREATE src/app/component..

이번 장에서는 로그인한 회원의 정보를 표시하는 내정보 화면을 구현해 보겠습니다. Interceptor를 이용하여 인증이 필요한 API의 Http Header 세팅을 공통화하고, 인증(로그인)이 필요한 페이지에 대한 접근을 처리하는 Guard에 대해서도 실습해 보겠습니다. 내정보 화면 생성 내 정보 화면 component를 생성합니다. $ cd src/app/component/member $ ng g c myinfo --spec false CREATE src/app/component/member/myinfo/myinfo.component.css CREATE src/app/component/member/myinfo/myinfo.component.html CREATE src/app/component/membe..

이번 장에서는 가입과 로그인 기능을 추가하여 Rest API와 연동하는 방법을 실습하겠습니다. 이번 실습 부터는 리소스를 제공할 rest api가 필요하므로 아래 내용을 참고하여 서버를 띄우고 실습하겠습니다. Rest api Git 프로젝트 아래 Git소스를 클론 받아 로컬에서 서버를 실행하고 실습을 진행합니다. 관련해서 필요한 내용은 아래의 포스트들을 참고 합니다. https://github.com/codej99/SpringRestApi.git REST API 설정 관련 포스트 Rest api 스펙 확인 Rest api 서버를 실행하면 다음 링크에서 API 목록 및 연동 방법을 확인 할 수 있습니다. http://localhost:8080/swagger-ui.html 로그인 기능 구현 본격적으로 웹 개..

Angular 프레임워크를 이용하여 Front 웹사이트를 만드는 실습을 해보겠습니다. Angular는 Front 웹을 만드는 프레임워크 이므로 데이터와 비즈니스 로직을 적용하려면 리소스를 제공하는 API서버가 따로 필요합니다. 리소스를 제공할 Backend API서버는 SpringBoot 기반의 Rest api를 사용할 것이며, 다음의 링크에서 확인할 수 있습니다. 어느정도 완성된 api 프로젝트로서 로그인/가입/게시판에 글쓰기 등의 기능을 제공하며 api를 이용하여 Angular 웹사이트를 구성할 예정입니다. 따라서 api에 대한 개발 내용은 다음 링크에서 자세히 확인하면 되고, 여기서는 api서버를 실행하고 웹사이트를 구축하는데 주력하여 설명하겠습니다. https://daddyprogrammer.or..

이번 장에서는 Spring2.0의 주요 feature중 하나인 reactor(reactive)가 spring-data-redis에 어떻게 적용되어 있는지 실습을 통해 확인해 보겠습니다. redis에서 reactive를 사용하면 대용량의 요청을 처리할때 non block으로 처리하므로 blocking 메서드로 처리할때보다 성능을 높일수 있습니다. 하지만 비동기 처리로 인하여 데이터 저장시 순서가 변경될수도 있으므로, 순서가 중요한 프로세스에 적용하려면 reactive redis를 신중히 사용해야 합니다. build.gradle reactive redis는 현재 spring-data-redis에 통합되어 있지 않고 지원하는 라이브러리가 별도로 존재합니다. 아래와 같이 spring-boot-starter-da..