본문 바로가기

분류 전체보기179

[실전 어플리케이션 만들기] 1. 프로젝트 구조 및 생성 이 글에서는 Angular 실전 애플리케이션을 작성하며 아래 목록의 기능들을 사용, 구현해 보겠습니다. Feature Modules ReactiveFormsModule(FormBuilder, FormGroup, Validators) Routing(라우팅), Lazy Loading(지연 로딩) Authentication(인증), State Management(상태 관리 - ngrx/store, ngrx/effects) Directive(사용자 정의 디렉티브) SPA에서 필수적인 라우팅 기능과 각 컴포넌트별 접근권한을 로그인(인증)정보로 체크하며, 인증정보 상태 관리를 할 수 있는 ngrx를 이용해 보겠습니다. Prerequisite Angular Tutorial - Tour of Heroes Feature.. 2020. 10. 20.
6. React의 이벤트 처리 이 글에서는 React에서의 이벤트를 다루는 방법에 대해서 알아보도록 하겠습니다. 본 글의 내용을 이해하기 위해서는 아래와 같은 사전 지식이 필요합니다. 캡처링 및 버블링 Introduction to events Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that a developer.mozilla.org .. 2020. 10. 19.
5. 컴포넌트 라이프사이클 이벤트 전 글에서 전반적인 컴포넌트에 대한 내용과 생성 방법을 살펴보았습니다. 이 글에서는 컴포넌트를 좀 더 세밀하게 제어할 수 있도록 React 컴포넌트의 라이프사이클 이벤트에 대해 알아보도록 하겠습니다. 1. 라이프사이클 이벤트의 분류 컴포넌트는 각 프로세스가 진행되는 시점에 따라 라이프사이클 이벤트로 불리는 특별한 함수가 실행됩니다. 개발자는 이 라이프 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있습니다. 라이프사이클 이벤트는 크게 세 가지로 분류됩니다. 마운팅(mounting) 이벤트 : 페이지에 컴포넌트를 나타내는 이벤트로, React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가하는 시점에 발생. 1회만 실행. 갱신(updating) 이벤트 : 컴포넌트 정보.. 2020. 10. 19.
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.

티스토리툴바