본문 바로가기

프로그래밍124

앵귤러 기초(Angular basic) 24. Http서비스 만들기2 지난 포스트에 이어 Http 서비스에 에러 핸들링을 추가한 뒤 Observerble을 구독함으로써 Http 통신을 해보겠습니다. 이번 포스트에서는 아래의 내용을 다루고 있습니다. 예외처리 Error handling pipe연산자(tap, catchError) 옵저버블 구독하기(Subscribe Observable) 예외처리 Error handling http통신을 할 때는 적절한 예외처리가 이루어져야 합니다. 지난 포스트에서 만들었던 MovieService는 아래와 같습니다. 소스를 수정해 보겠습니다. 두 가지 연산자를 사용하여 소스를 수정하였습니다. tap 연산자를 사용하기 위해서는 Observable의 pipe메서드를 사용해야 합니다. tap은 Observable 스트림에서 방출된 값을 볼 수 있도록.. 2022. 2. 2.
앵귤러 기초(Angular basic) 23. Http서비스 만들기1 앵귤러에서 http 통신을 하는 서비스를 만들어 보겠습니다. 지난 포스트에서 다뤘던 Observable의 개념을 잘 염두하고 따라와 주세요. 이번 포스트에서는 아래의 내용을 다루고 있습니다. 앵귤러 http 통신 흐름 http get을 호출하는 서비스 만들기 HttpClientModule 앵귤러 Http 통신 흐름 Angular는 HTTP 요청 및 응답 프로토콜을 사용하여 백엔드 웹 서버와 통신할 수 있는 HttpClient 서비스를 제공합니다. 위 그림의 MovieService는 예제에서 작성하고 있는 서비스입니다. MovieService의 역할은 웹서버에서 데이터를 가져오는 것입니다. 서버와 통신을 하기 위해 MovieService에서 Observable을 반환하는 HttpClientService의 .. 2022. 2. 1.
앵귤러 기초(Angular basic) 22. RxJS, Observable 앵귤러의 HTTP코드를 이해하려면 RxJS 및 Observable의 기본 사항을 이해하는 것이 중요합니다. 이번 포스트에서는 기술적인 부분과 그 의미하는 바를 알아보도록 하겠습니다. 이번 포스트에서는 아래의 내용을 다루고 있습니다. RxJS 란 동기, 비동기 차이 Observable 이란 Observable Pipe RxJS란 Reactive Extensions for Javascript(RxJS)는 Observable시퀀스를 사용하여 데이터를 구성하고 일련의 연산자를 사용하여 해당 데이터를 변환하기 위한 라이브러리입니다. . NET에 익숙하다면 이들은 LINQ 연산자와 유사합니다. Angular는 데이터, 특히 HTTP 요청과 같은 비동기 데이터 작업을 위해 RxJS를 사용합니다. 하나씩 풀어서 비동기.. 2022. 1. 31.
앵귤러 기초(Angular basic) 21. 서비스 만들기 서비스를 만들고 이용해 보겠습니다. 이번 포스트에서는 아래의 내용을 다루고 있습니다. 앵귤러 서비스를 만드는 과정 인젝터에 서비스 등록하는 방법 루트 인젝터, 컴포넌트 인젝터 서비스를 위존성 주입(Dependency Injection)하는 방법 현재 앵귤러 기초 포스트에서 만들고 있는 영화 목록 화면을 잠시 살펴보겠습니다. 영화 목록 화면에서 테이블에 표시하고 있는 영화 데이터는 현재 컴포넌트 클래스의 프로퍼티로 하드코딩되어있는 상태입니다. 지금부터 영화 목록 데이터를 서비스를 통해 얻어오도록 개선해 보겠습니다. 앵귤러 서비스 만들기 서비스 만드는 단계를 간단히 정리해 보면 아래와 같습니다. 1. 서비스 클래스 만들기 2. 데코레이터를 이용해서 메타데이터 정의하기 3. 필요한 것 Import하기 4. 서.. 2022. 1. 30.