본문 바로가기

Today I Learn/Angular 기초

(8)
7. RxJS와 NgRx (2) 2020. 7. 18. 17:27 1. NgRx 동작 원리 NgRx는 리액트의 redux처럼 Reactive한 앵귤러 어플리케이션에서 상태관리를 위한 라이브러리입니다. redux의 flux 패턴을 이해하고 있다면 NgRx도 그 영향을 받았기 때문에 단방향으로 데이터가 흐르고 있다는 걸을 알 수 있습니다. flux 패턴은 여기에서 정확히 확인할 수 있습니다. flux 패턴은 MVC 패턴의 양방향 데이터 바인딩에서 앱 규모가 커짐에 따라 데이터 흐름을 추적하기 어려워지고 불필요한 업데이트가 발생할 수 있는 어려움을 해결하기 위해 중앙에 스토어를 두고 데이터를 액션에 의해서만 변경할 수 있는 순수 함수인 리듀서를 두어 데이터를 단방향으로 관리합니다. NgRx도 이러한 흐름을 그대로 적용하고 있기 때문에 flux 패턴을 먼저 이해한다면 큰 어려..
6. RxJs와 NgRx (1) 2020. 7. 8. 17:42 글쓴이는 리액티브X 공식 홈페이지와 RxJs 홈페이지를 많이 참고하였습니다. 1. Observable 옵저버블은 ES7 스펙으로 제안된 비동기 데이터 처리 표준으로 어떻게 동작하고 이점이 무엇인지 공부하였습니다. 일반적으로 동기적인 프로그래밍은 개발자가 작성한 코드가 한줄한줄 차례대로 실행되기를 기대하지만, 비동기 프로그래밍은 원하는 순간에 작성된 순서와 상관없이 실행하거나 보류됩니다. 비동기로 호출되는 이벤트를 옵저버블에 정의할 수 있으며 하나의 옵저버블에 다수의 비동기 이벤트로 이루어진 연속된 흐름(데이터 스트림)을 정의할 수도 있습니다. 즉 옵저버블 내부에 데이터를 처리하는 매커니즘이 있고, 옵저버블이 이벤트를 발생시키면 이 옵저버블을 관찰하고 있는 옵저버가 해당 이벤트를 감지하고 데이터를 받아 연..
5. 서비스와 의존성 주입 (2) 2020. 7. 4. 23:06 1. 싱글톤 서비스 4장 실습에서 MenuModule과 CartModule에 SharedModule을 각각 임포트하면 각각 다른 모듈 인젝터에 인스턴스가 생성되어 데이터가 공유되지 않는다는 것을 확인하였습니다. 주문 리스트 정보를 관리하는 OrderService는 어플리케이션에서 단 하나만 존재해야 합니다. 즉 데이터 통신을 전역에서 수행하도록 변경해야 합니다. 이렇게 전역에서 단 하나의 인스턴스만 생성되어 관리되는 인스턴스가 싱글톤 서비스입니다. 싱글톤 서비스를 만드는 방법은 간단합니다. 서비스를 루트 모듈에만 프로바이딩하면 싱글톤 서비스가 됩니다. 공식문서의 싱글톤 서비스에서 서비스를 루트 모듈에 프로바이딩하는 방법으로 세 가지를 소개합니다. @Injectable({ providedIn: "root"..
4. 서비스와 의존성 주입 (1) 2020. 6. 30. 22:52 0. 서비스 서비스란 어플리케이션에서 공통으로 사용하는 데이터나 기능을 묶어 정의한 단위입니다. 가령 여러 컴포넌트에서 공통으로 쓰이는 데이터는 서비스로 정의하여 접근할 수 있도록 한다면 모듈화와 코드의 재사용성이 높아질 것입니다. 일반적으로 뷰 컴포넌트에서는 뷰와 관련한 로직만을 남기고 그외의 서버와 관련한 로직 등은 서비스에 정의하는 것이 좋습니다. 서비스는 의존성 주입이 가능한 클래스로 @Injectable 데코레이터 하단에 클래스를 정의하면 이 클래스는 곧 의존성 주입이 가능한 클래스입을 명시하는 것입니다. @Injectable() export class MyService {} 앵귤러는 서비스 인스턴스를 의존성 주입을 사용하여 생성하는데 그 이유는 여기에서 찾을 수 있었습니다. 1. 의존성 주입을..
3. Modules 2020. 6. 26. 19:15 1. @NgModule 앵귤러에서 모듈은 자바스크립트의 모듈과는 다른 의미로 쓰입니다. 먼저, 자바스크립트의 모듈은 단일 파일에서 모든 멤버 클래스를 정의하지만 @NgModule은 declarations이라는 속성에서 선언 가능한 클래스*들의 리스트를 가지고 있습니다. 선언가능한 클래스*: 앵귤러에서는 컴포넌트, 디렉티브, 파이프, 서비스가 이에 해당합니다. 또한 @NgModule은 import문에 선언된 모듈과 자신의 선언가능한 클래스들만을 export할 수 있으며 그 외의 클래스는 불가능합니다. 공식문서에서 자세히 설명하고 있는 것처럼 앵귤러는 컴파일러에게 @NgModule의 메타데이터로 컴포넌트가 컴파일되는 시점의 컨텍스트를 제공합니다. 컴파일러는 해당 컨텍스트(작업 흐름)에 따라 컴포넌트를 컴파일..
2. Component와 Directive (2) 2020. 6. 20. 21:50 1. Content Projection Content Projection이란 부모 컴포넌트 셀렉터 태그 내부에 자식 컴포넌트 혹은 HTML 엘러먼트를 작성하여 특정 템플릿을 전달할 수 있는 기능입니다. 마치 리액트에서 props.children으로 내부에 작성된 엘리먼트를 props로 전달하는 것과 비슷합니다. 그렇다면 Content Projection은 왜 필요할까요? 그 이유를 여기에서 확인할수 있었는데 글에서 예제로 좌측에 아이콘이 달린 input 태그를 나타내는 fa-input 컴포넌트를 작성한다고 가정합니다. 글에서 제시한 Content Projection없이 작성한 fa-input 컴포넌트는 다음의 문제가 있습니다. input 태그에서 이용할 수 있는 31개나 되는 attribute를 일일히 ..
1. Component와 Directive (1) 2020. 6. 19. 14:58 0. Decorator 데코레이터란, 데코레이터 바로 하단의 클래스를 Angular가 어떤 타입으로 어떤 메타데이터를 가지고 사용할 것인가를 정의하는 장식자입니다. 데코레이터는 '@' 접두어로 표기됩니다. @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent {} 1. Component 컴포넌트(@Component()) : HTML 템플릿을 컴포넌트 데코레이터의 template으로 지정하면 해당 템플릿을 뷰로 지정하여 Angular 프레임워크가 제공하는 디렉티브와 데이터를 바인딩할 수 있는 마크업을 작성할 수 있습니다. 2. Directive 디렉티브(@Directive()) : ..
0. Angular 공부 목록 2020. 6. 15. 19:40 본 내용은 글쓴이가 회사에서 Angular 기초를 학습한 내용과 토이 프로젝트를 리팩토링하면서 진행한 과정 중 필요한 지식만을 담고 있습니다. 완전한 튜토리얼은 Angular 공식 문서 혹은 poiemaweb을 참고하시면 훨씬 도움이 될 것입니다. Angular 9를 기준으로 공부하였습니다. 1. Component와 Directive (1) 2. Component와 Directive (2) 3. Modules 4. 서비스와 의존성 주입 (1) 5. 서비스와 의존성 주입 (2) 6. RxJs와 NgRx (1) 7. RxJs와 NgRx (2) 8. 라우터 9. Reactive Form 1. Component와 Directive (1) 0. 데코레이터 1. 컴포넌트 2. 디렉티브 3. 데이터 바인딩 4. 컴포..