[Angular] 06. 서버와 데이터 주고받기

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter06. 서버와 데이터 주고받기

학습목표 : 

1. 프로미스의 단점에 대해 설명할 수 있다.

→프로미스의 단점은 다음과 같다.

- 서버로 보낸 요청을 취소할 수 없다.

- 프로미스의 작업이 성공하면 결과 데이터를 받고, 작업이 실패하면 에러 객체를 받겠지만, 두 경우 모두 데이터 하나를 처리한다. 

프로미스에서는 연속적인 데이터를 처리하는 방법이 없다.

학습내용  : 

이번 차시에서는 서버와 데이터 주고받기에 대해 학습합니다.

6차시 학습에서 중요한 키워드는 [Http 클래스], [TypeScript 패키지], [웹 소켓 프로토콜]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[Http 클래스]

Http 클래스는 @angular/http 패키지로 제공되며, Http 객체 외에도 몇 가지 클래스와 인터페이스들이 정의되어 있다.

[TypeScript 패키지]

TypeScript 패키지는 Node.js 서버 코드를 컴파일할 때 사용하지만, 클라이언트 코드를 브라우저에서 컴파일할 때도 사용하기 때문에 일반 의존성으로 설치한다.

[웹 소켓 프로토콜]

웹소켓 프로토콜은 데이터가 동시에 양쪽으로 전달되는 전이중(full-duplex) 방식이다.

학습요약 : 

 

• 웹 애플리케이션은 HTTP 요청을 비동기로 처리하기 때문에 HTTP 요청을 보낸 후에도 사용자가 하던 작업을 계속할 수 있고, 서버의 응답이 도착했을 때 데이터를 처리하거나 화면을 동적을 갱신할 수 있다.

• 비동기 HTTP 요청은 콜백 함수나 프로미스, 옵저버블로 구현할 수 있으며, 콜백 함수를 쓰는 것보다는 프로미스를 쓰는 것이 더 좋지만, 프로미스는 다음과 같은 단점이 있다.

 서버로 보낸 요청을 취소할 수 없다.

 프로미스의 작업이 성공하면 결과 데이터를 받고, 작업이 실패하면 에러 객체를 받겠지만, 두 경우 모두 데이터 하나를 처리한다. 프로미스에서는 연속적인 데이터를 처리하는 방법이 없다. 

• Http 클래스는 @angular/http 패키지로 제공되며, Http 객체 외에도 몇 가지 클래스와 인터페이스들이 정의되어 있다.

• TypeScript 패키지는 Node.js 서버 코드를 컴파일할 때 사용하지만, 클라이언트 코드를 브라우저에서 컴파일할 때도 사용하기 때문에 일반 의존성으로 설치한다.

yarn add typescript

• TypeScript 패키지가 전역에 설치되어 있거나, 로컬에 설치되어 있어도 yarn을 사용한다면 커맨드 창에서 다음과 같이 실행한다

tsc -w

npm을 사용하면 위와 같이 사용하기 위해 TypeScript 컴파일러를 전역에 설치하려면 다음 명령을 실행하면 된다.

npm i -g typescript

• 간단한 HTTP GET 요청을 보내는 방법을 알아보면, Http 객체의 get() API는 다음 코드처럼 사용할 수 있다.

constructor (private http : Http) {

     this.http.get(‘/products’).subscribe(…);

}

• 웹에서 리소스를 가져오는 과정을 효율적으로 개선하기 위한 시도가 계속되고 있다. 그 중 Fetch API는 XMLHttpRequest 객체를 대신하는 용도로 제안된 표준이다. 

Fetch에서는 Request와 Response 객체를 제네릭으로 정의하기 때문에, HTTP뿐 아니라 최근에 만들어진 서비스 워커나 Cache API에도 적용할 수 있다.

• HTTP 요청은 전역 fetch() 함수를 사용한다.

fetch(‘https://www.google.com/search?q=fetch+api’)  … ①

    .then(response => response.text())  … ②

    .then(result => console.log(result));  … ③

① : fetch() 함수에는 접근하려는 리소스의 URL만 입력한다.

② : fetch() 함수는 프로미스를 반환하는데, HTTP 응답 코드와 관계없이 통신에 성공한 경우라면 Response 객체를 Promise.resolve()로 전달한다. 이 코드에서는 서버 응답을 일반 텍스트로 변환한다.

③ : 서버에서 받아온 데이터는 애플리케이션에서 처리할 수 있으며, 이 코드에서는 콘솔이 출력한다. 

• Angular가 제공하는 AsyncPipe는 템플릿에서 async로 사용하며, 프로미스나 옵저버블을 자동으로 구독한다. 

• 웹소켓은 간단한 바이너리 프로토콜이며 최근 브라우저에서 모두 지원한다. HTTP 방식에서는 데이터가 필요할 때마다 서버로 요청을 보내고 응답이 돌아올 때까지 기다려야 하는데, 이런 방식을 반이중(half-duplex) 방식이라고 한다.

• 웹소켓 프로토콜은 데이터가 동시에 양쪽으로 전달되는 전이중(full-duplex) 방식이다.

• 웹소켓은 서버와 클라이언트가 연결된 채로 유지되기 때문에 데이터를 주고 받을 때 좀 더 빠르다.

• 일반적으로 HTML 문서, 이미지, CSS, JavaScript 코드는 서버에서 정적 리소스로 제공한다. 이 리소스들은 서버에서 처리되지 않고 브라우저가 내려받아 실행하는데, Angular 애플리케이션 코드는 TypeScript로 작성되고 브라우저에서 SystemJS를 통해 JavaScript로 변환되기 때문에 다른 리소스와 마찬가지로 정적으로 제공되는 것이 바람직하다. 

• Angular가 제공하는 AsyncPipe는 템플릿에서 async로 사용되며, 프로미스나 옵저버블을 자동으로 구독한다. 

• 웹소켓을 옵저버블로 랩핑할 때 new 키워드 대신 Observable.create() 함수를 사용하는 방법도 있고, RxJS의 Observable 모듈에서 제공하는 webSocket() 함수를 바로 사용하는 방법도 있다.

• Angular와 RxJS를 함께 사용하면 서버에서 받은 데이터를 일관된 방식으로 처리할 수 있는데, HTTP 요청이나 웹소켓 연결을 옵저버블로 변환해서 데이터를 받아오고, 필요한 곳에서 이 옵저버블 스트림을 구독해서 처리하면 된다.

• Angular가 제공하는 Http 객체를 사용해서 웹 서버와 HTTP 통신을 할 수 있다. 

• HTTP 서비스 프로바이더는 HttpModule에 정의되어 있다. 애플리케이션에서 HTTP 모듈을 사용한다면 @NgModule 어노테이션에 HttpModule을 추가하는 것을 잊지 말자.

• Http 모듈에 정의되어 있는 함수는 Observable 객체를 반환하는데, 이 객체를 구독하는 시점에 실제 Http 요청이 발생한다.

• 웹소켓은 HTTP보다 좀 더 간결하고 휴율적인 프로토콜이다. 웹소켓은 양방향 프로토콜이기 때문에, 클라이언트와 서버 양쪽에서 데이터를 자유롭게 보낼 수 있다.

• Angular 클라이언트는 어떠한 웹 서버와도 통신할 수 있지만, Node.js와 Express를 사용해서 웹 서버를 만드는 것이 비교적 간단하다.