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
์ธ์คํด์ค๋ฅผ ์ ๊ณตํ๋ค.
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๋ก ์์ฑํ๋ค๊ฐ ๋์์ ์ํด์ ํ์ฐธ ํค๋งด
Last updated