본문 바로가기

분류 전체보기176

4. 컴포넌트 이 글에서는 컴포넌트에 대해 다루어보겠습니다. 컴포넌트와 속성(state, props)에 대한 내용으로 구성됩니다. 1. 컴포넌트 대부분의 UI는 여러 개의 HTML 요소로 이루어져 있습니다. 계층적으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것입니다. 그런데 엘리먼트를 중첩하다 보면, 곧 입력할 엘리먼트가 굉장히 많다는 문제를 발견하게 될 것입니다. 그래서 React는 컴포넌트 기반 아키텍처를 활용합니다. 컴포넌트 클래스를 이용하면 기능을 느슨하게 결합된 부분으로 분리하여 코드를 재사용할 수 있습니다. 여기서 컴포넌트 클래스는 컴포넌트라고 부르기도 합니다. (웹 컴포넌트와 혼동하지 말아야 합니다) 이 컴포넌트 클래스의 인스턴스인 사용자 정의 엘리먼트를 생성하면, 이식 가능한 클래스(구성할 .. 2020. 10. 19.
3. 리액트의 문법 (+JSX) 이 장에서는 React의 문법과 JSX의 문법에 대해서 알아보도록 하겠습니다. 1. React의 문법 앞의 글에서 보았던 hello world 예제를 다시 보도록 하겠습니다. [App.js] import React, { Component } from 'react'; class App extends Component { render() { return ( Hello,world! ); } } export default App; 위 예제에서 사용한 몇 가지 키워드에 대해 살펴보도록 하겠습니다. (1) import, export 모듈을 불러올 때는 import를 사용하여야 하고, 모듈을 다른 파일로 보내려면(다른 모듈에서 import 하여 사용하도록 하게 하려면) export라고 명시해주어야 합니다. 위 예제에.. 2020. 10. 19.
2. React 개발 설정 이 글에서는 React 개발을 위한 설정을 진행하도록 하겠습니다. hello world의 출력까지 확인해 볼 것이며, 어떤 환경으로 구성되어야 하는지 살펴보겠습니다. 1. Create React App React로 개발하기 위해서는 단순히 React의 문법만 알아서 되는 것이 아니라, 개발환경을 구축해주어야 합니다. 이전 장에서 언급했듯이 우리의 React 프로젝트는 ECMAscript 6 (2015)/ECMAscript 7 (2016)와 JSX를 사용하여 개발됩니다. 그러나 모던 브라우저는 대부분 ES5 기반으로 동작하며 ES6/ES7, JSX를 온전히 지원하지 못합니다. 그러므로 작성한 코드가 브라우저에서 제대로 동작할 수 있도록 ES5로 변환해 주는 트랜스파일러, Babel이 필요하게 됩니다. 또한.. 2020. 10. 19.
1. React? React는 페이스북에서 개발한 자바스크립트 라이브러리입니다. 이 글에서는 React의 개요에 대해 다루겠습니다. React에 대한 내용을 이해하기 위해서는 다음과 같은 사전 지식이 필요합니다. HTML CSS Javascript 함수형 자바스크립트 패러다임 화살표 함수 표현식 (arrow function expression) SPA(Single Page Application) Restful 1. React 란? React는 조합형 인터페이스를 제작하기 위한 오픈소스 라이브러리로서, 페이스북이 개발하고 관리하고 있습니다. 정식 명칭은 React이나 ReactJS라고도 합니다. "React는 UI를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리" "지속해서 데이터가 변화하는 대규모 어플.. 2020. 10. 19.
4. Service Gateway AS-IS TO-BE 지금은 Client(Angular app)에서 접근하는 서비스가 AuthService 하나지만, 비즈니스가 추가되면 Service가 100개 이상이 될 수도 있습니다. 따라서 Client는 모든 Service의 도메인을 알아야 한다는 불편함이 있습니다. 이를 보완하기 위해 일반적으로 Api Gateway를 이용합니다. 여기서는 Api Gateway를 지원하는 여러 라이브러리 중 Netflix의 zuul을 사용하기로 결정했습니다. zuul은 Websocket을 지원하지 않기 때문에 NotiService에 대한 요청은 그대로 두고, AuthService와 UserService에 대한 요청만 게이트웨이를 타도록 변경했습니다. 1. API Gateway Service 앵귤러에서 들어오는 모.. 2020. 10. 19.
3. Auth Service 구현 및 Spring Session 설정 AS-IS TO-BE User Service는 User Repository에 직접 접근하는 서비스로, 클라이언트가 곧바로 User Service와 통신하는 것은 보안상 좋지 않습니다. 그러므로 클라이언트와 User Service 사이에 Auth Service를 만들어서 인증 및 권한 처리를 수행하도록 해야 합니다. 1. AuthService API User Service는 깊은 마이크로서비스로서 저장소에 접근하는 작업만 수행하고, Auth Service가 사용자에 대한 인증과 권한에 대한 작업을 수행합니다. 현재 인증에 대한 기능만 필요하므로 Spring Session만 추가하여 작업하고, 추후에 권한에 대한 기능을 추가할 예정입니다. WebClient vs RestTemplate WebClient와 R.. 2020. 10. 19.
2. 실시간 데이터 동기화 AS-IS TO-BE 페이스북에서 친구들에 의해 피드가 추가된다면, 'N개의 새로운 피드가 있습니다. 끌어서 당겨오기'라는 문구를 보게 됩니다. 이처럼 정적인 웹페이지에서 데이터가 실시간으로 변경되었다는 것을 알리거나, 자동으로 업데이트되는 기능이 필요한 경우가 있습니다. MSA Prototype에는 유저의 정보가 업데이트 될 때, 웹페이지에서 페이지의 이동 없이 유저의 정보가 변경되는 기능을 추가하고자 했습니다. 이를 위해 크게 3가지의 작업을 했습니다. UserService의 update가 성공적인 결과를 반환했을 때, RabbitMQ의 exchange에 변경된 User 정보를 push 합니다. NotiService는 exchange가 보내는 데이터를 보관할 임시 Queue를 만들고, Queue에 데.. 2020. 10. 16.
1. UserService 구현 이 글은 Angular 카테고리의 ""에서 구현했던 Angular 애플리케이션을 토대로 MSA prototype architecture를 구성하는 내용을 담고 있습니다. 실제 구현 방법을 공유하려는 목적보다는 아키텍쳐아키텍처 구성을 공유하고자 하는 목적이므로, 아키텍처의 변화나 이슈 사항에 초점을 맞춰 읽으시길 바랍니다. 따라서 Angular에서 사용했던 어플리케이션을 가져와 사용할 것이나, 구조는 변경될 것입니다. AS-IS TO-BE AS-IS에서는 User정보를 저장하는 방법으로 Angular가 제공하는 inmemoryDB를 사용하고 있었습니다. TO-BE에서는 이를 제거하고 MongoDB를 사용하기 위해 UserService를 구현했습니다. 1. UserService API UserService에.. 2020. 10. 15.
Request between resource servers 각 Resource Server는 Access Token을 필요로 합니다. 따라서 하나의 Resource Server에서 또 다른 Resource Server로 요청을 보내려면 그 요청의 Header에 Authorization을 추가해주어야 합니다. MSA에서는 Resource Server 간 요청이 빈번한데, 개발자가 매번 이 작업을 해주는 것은 비효율적인 일이므로 air-common-lib에서 이를 처리하려 합니다. 이하 본문에서는 Resource Server → Resource Server 요청을 서비스간 요청이라고 하고, Client → Resource Server를 클라이언트 요청이라고 칭하겠습니다. 이를 위해 필요한 작업을 크게 두 가지로 나누면, 클라이언트 요청이 들어오면, 요청의 Heade.. 2020. 10. 14.
Resource Server Setting at Prototype app Authentication을 통해 발급받은 Access Token을 가지고, Resource Server에 접근하고자 하는 프로토타입 애플리케이션을 작성해보겠습니다. 1.Resource Server Config @Configuration @EnableResourceServer class ResourceServerConfig : ResourceServerConfigurerAdapter() { val signingKey: String = "signingKey!" override fun configure(http: HttpSecurity) { http.headers().frameOptions().disable() http.authorizeRequests() .antMatchers("/**").authentic.. 2020. 10. 14.

티스토리툴바