Fetch API & CORS

Fetch API 란

자바스크립트에서 제공하는 네트워크 통신 API XMLHttpRequest(XMLHttp) 객체의 대안으로 사용된다.

const response = fetch('http://localhost:3000/products'); 
// → Promise 반환

const response = await fetch('http://localhost:3000/products'); 
// → Response 반환, response.body는 ReadableStream

const reader = response.body.getReader();

const chunk = await reader.read();
// → chunk.value는 Uint8Array 타입.
// → 원래는 chunk.done이 true일 때까지 반복해야 한다.
// Generator와 비슷한것 같다.

const body = new TextDecoder().decode(chunk.value);
// → 유니코드로 이루어져있으므로 decode를 사용하여 변환해줘야 한다.

const data = JSON.parse(body);
// → 최종적으로 자바스크립트 객체로 파싱

JSON을 기본적으로 지원하여 위 복잡한 단계 없이 응답 데이터를 받아 올 수 있다.

const response = await fetch('http://localhost:3000/products');
const data = await response.json(); 

XMLHttpRequest(XMLHttp)

AJAX에서 많이 사용되는 네트워크 통신 API

Fetch API는 다음 같은 이유로 XMLHttp를 대체 하였다.

• Promise 기반 비동기 처리

• CORS default로 지원

• HTTP/2 지원

• 더 직관적인 API, Response 객체 가공 및 사용성 용이

Promise

자바스크립트에서 비동기 처리를 다루는 객체

비동기 처리란 어떤 작업이 실행 중일 때 다른 작업을 동시에 처리할 수 있는 것을 의미한다.

Promise는 비동기 콜백 지옥에서 벗어나 비동기 처리를 직관적이고 간결하게 다룰 수 있도록 설계되었다.

Promise 객체는 비동기 작업의 결과 fulfilled(성공), rejected(실패)를 나타내는 객체로 결과 데이터를 사용하려면 then() 호출하여 처리한다.

자바스크립트 대부분의 비동기 처리 방식은 Promise 기반으로 이루어진다.

ReadableStream

웹 브라우저와 Node.js에서 사용 가능한 웹 API로 스트리밍 데이터 소스를 생성할 수 있는 객체이다. 큰 데이터 파일, 실시간 데이터 등을 처리할 때 유용하며, 데이터 소스를 스트리밍 방식으로 처리할 수 있다.

ReadableStream을 생성하면 데이터 소스가 여러 청크(chunk)로 나누어져 전달되는데 비동기로 동작한다. 즉, 전체 데이터를 한번에 읽어들이지 않고 필요한 만큼 청크 단위로 읽어들 수 있게된다.

Fetch API가 Response.body로 ReadableStream 인스턴스를 제공한다.

청크(chunk)란 데이터를 작은 단위로 쪼개어 나눈 조각들을 의미한다. 데이터를 처리할 때 청크를 사용하면 전체 데이터를 한 번에 처리하는 것보다 메모리 사용량이 적어 효율적

Unicode

유니코드(Unicode)는 전 세계의 모든 문자를 표현하기 위한 국제 표준 코드 아스키코드(ASCII)는 특정 언어나 문자 체계를 포함하지 않기 때문에 다양한 언어를 표현하는데 어려움이 있다.

CORS(Cross-Origin Resource Sharing)

브라우저에서 실행되는 자바스크립트가 다른 출처(origin)에 접근할 때 발생하는 보안 이슈

웹 브라우저는 보안상의 이유로 스크립트에서 다른 출처의 리소스를 직접 접근할 수 없도록 제안하고 있다.

출처는 포트번호까지 포함하여 비교한다.

CORS 이슈가 터져도 이미 서버에서 응답이 끝난 상태이다.

즉, 서버에 요청을 하고 응답을 받아오는 것까지 모두 진행됐지만 브라우저에서 출처가 달라 데이터를 못쓰게 막아 놓는것이다.

Express로 간단하게 CORS 해결하기

리소스를 주는 곳(서버)에서 브라우저에게 출처가 달라도 괜찮다고 알려야 해결 가능하다.

HTTP Header에 Access-Control-Allow-Origin 속성을 추가하면 된다.

Express는 CORS 미들웨어 추가하면 간단 해결

npm i cors
npm i -D @types/cors

import express from 'express';
import cors from 'cors';

const app = express();
 
app.use(cors()); // c로 작성했다가 동작을 안해서 한참 헤맴