Proxy, CORS ์๋ฌ๋ฅผ ํด๊ฒฐ์ ๋ํด ํ์ตํ๊ณ ์ค์ต์ ์งํํ๋ค.
๋ค๋ฅธ ๋๋ฉ์ธ์์ API๋ฅผ ์์ฒญํด์ ์ฌ์ฉํ ์ ์๊ฒ ํด ์ฃผ๋ ค๋ฉด CORS ์ค์ ์ด ํ์ํ๋ค.
์ค์ ์๋น์ค๊ฐ ๋๋ ์์ฉ ์ฑ์ ์ด์ ์ค์ธ ๊ฒฝ์ฐ, ๊ตฌ์ถํ ํด๋ผ์ด์ธํธ ๋ค์ ์๋ฒ์ ์ฐ๊ฒฐ๋์ด ์๋ DB์๋ ๋ผ์ด๋ธ ๋ฐ์ดํฐ(live data)๊ฐ ์์ผ ๊ฒ์ด๋ค.
๋ผ์ด๋ธ ๋ฐ์ดํฐ๋ ๋ฏผ๊ฐ์ฑ์ด ๋์ ๋ฐ์ดํฐ๋ค์ด ์์ฃผ์ด๊ธฐ ๋๋ฌธ์ ๋ณด์์ด ๋ฌด์๋ณด๋ค ์ค์ํ๋ค.
์๋น์ค ๋ฐ ํ๋ก์ ํธ๊ฐ ๋ชจ๋ ์ถ์ฒ์ ์ ๊ทผ์ ํ๋ฝํ๊ฒ ๋ ๊ฒฝ์ฐ ๋ณด์์ฑ์ด ๋ฎ์์ง๊ณ , ํดํน์ ์ํ์ ๊ทธ๋๋ก ๋
ธ์ถํ๊ฒ ๋๋ค.
์ฆ, ๋ชจ๋ ๋๋ฉ์ธ์ ํ์ฉํด์๋ ์ ๋๊ณ , ํน์ ๋๋ฉ์ธ์ ํ์ฉํ๋๋ก ๊ตฌํํด์ผ ํ๋ค.
์๋ฒ์์ ์ ์ ํ ์๋ต ํค๋๋ฅผ ๋ฐ์ง ๋ชปํ๋ฉด ๋ธ๋ผ์ฐ์ ์์ ์๋ฌ๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ด๋ค.
CORS
- ๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ (Cross-Origin Resource Sharing)
- ์ถ๊ฐ HTTP ํค๋๋ฅผ ์ฌ์ฉํด ํ ์ถ์ฒ์์ ์คํ ์ค์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ์ถ์ฒ์ ์ ํํ ์์์ ์ ๊ทผํ ์ ์๋ ๊ถํ์ ๋ถ์ฌํ๋๋ก ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ฃผ๋ ์ฒด์
์ถ์ฒ(origin)
- ์ ๊ทผํ ๋ ์ฌ์ฉํ๋ URL์ ์คํด(ํ๋กํ ์ฝ), ํธ์คํธ(๋๋ฉ์ธ), ํฌํธ๋ก ์ ์๋๋ค.
- ๋ ๊ฐ์ฒด์ ์คํด, ํธ์คํธ, ํฌํธ๊ฐ ๋ชจ๋ ์ผ์นํ๋ ๊ฒฝ์ฐ ๊ฐ์ ์ถ์ฒ๋ฅผ ๊ฐ์ก๋ค๊ณ ๋งํ๋ค.
- ์ผ๋ถ ์์ ์ ๋์ผ ์ถ์ฒ ์ฝํ ์ธ ๋ก ์ ํ๋์ง๋ง, CORS๋ฅผ ํตํด ์ ํ์ ํด์ ํ ์ ์๋ค.
๋ผ์ด๋ธ ๋ฐ์ดํฐ(live data)
- ์ค์ ์๋น์ค๋๊ณ ์๋ ์ฑ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค(Data Base, DB)์ ์ ์ฌ๋๊ณ ์๋ ๋ฐ์ดํฐ
- ์ ์ ๋ฐ ์ํ, ๊ฒฐ์ ๋ฑ ๋ค์ํ ์ ๋ณด๋ค์ ์๋ก ๋ค ์ ์๋ค.
[proxy ์ ์ฉ ์ ํ๋ฆ.png]
[proxy ์ ์ฉ ์ ํ๋ฆ.png]์ ๋ณด๋ฉด proxy๋ฅผ ์ ์ฉํด ๋ธ๋ผ์ฐ์ ๋ฅผ ์์ด๊ธฐ ์ ํ๋ฆ์ด๋ค.
[proxy ์ ์ฉ ํ ํ๋ฆ.png]
[proxy ์ ์ฉ ํ ํ๋ฆ.png]๋ฅผ ๋ณด๋ฉด proxy๋ฅผ ์ ์ฉํด ๋ธ๋ผ์ฐ์ ๋ฅผ ์์ธ ํ ํ๋ฆ์ด๋ค.
์ด๋ฐ ๊ฒฝ์ฐ ์ถ์ฒ๊ฐ ๊ฐ์์ง๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ๋ ์ด ์ฌ์ค์ ๋์น์ฑ์ง ๋ชปํ๊ณ ํ์ฉํ๊ฒ ๋๋ค.
webpack dev server์์ ์ ๊ณตํ๋ proxy ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋ค.
์นํฉ ๊ฐ๋ฐ์๋ฒ์ proxy ์ค์ ์ ์๋ ์นํฉ ์ค์ ์ ํตํด์ ์ ์ฉ์ ํ์ง๋ง, CRA๋ฅผ ํตํด ๋ง๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ์์๋ package.json
์์ "proxy" ๊ฐ์ ์ค์ ํด ์ฝ๊ฒ ์ ์ฉํ ์ ์๋๋ก ๊ตฌ์ฑ ๋์ด ์๋ค.
...
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
//proxy๋ ๋ณดํต ๋งจ ๋ฐ์ ์์ฑ์ ํด ๊ธ๋ฐฉ ์ฐพ์ ์ ์๋๋ก ํ๋ค.
"proxy" : "์ฐํํ API ์ฃผ์"
}
//๊ธฐ์กด์ fetch, ํน์ axios๋ฅผ ํตํด ์์ฒญํ๋ ๋ถ๋ถ์์ ๋๋ฉ์ธ ๋ถ๋ถ์ ์ ๊ฑฐ
export async function getAllfetch() {
const response = await fetch('์ฐํํ api์ฃผ์/params');
.then(() => {
...
})
}
.
.
.
export async function getAllfetch() {
const response = await fetch('/params');
.then(() => {
...
})
}
webpack dev server์์ ์ ๊ณตํ๋ proxy๋ ์ ์ญ์ ์ธ ์ค์ ์ด๊ธฐ ๋๋ฌธ์, ์ข ์ข ํด๋น ๋ฐฉ๋ฒ์ด ์ถฉ๋ถํ ์ ์ฉ๋์ง ์๋ ๊ฒฝ์ฐ๊ฐ ์๊ธฐ๊ธฐ๋ ํ๋ค.
๊ทธ๋ฐ ๊ฒฝ์ฐ ์๋์ผ๋ก proxy๋ฅผ ์ ์ฉํด์ค์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
(http-proxy-middleware ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉ)
npm install http-proxy-middleware --save
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', //proxy๊ฐ ํ์ํ path prameter๋ฅผ ์
๋ ฅ
createProxyMiddleware({
target: 'http://localhost:5000', //ํ๊ฒ์ด ๋๋ api url๋ฅผ ์
๋ ฅ
changeOrigin: true, //๋์ ์๋ฒ ๊ตฌ์ฑ์ ๋ฐ๋ผ ํธ์คํธ ํค๋๊ฐ ๋ณ๊ฒฝ๋๋๋ก ์ค์ ํ๋ ๋ถ๋ถ
})
);
};
webpack dev server proxy, React Proxy ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์ค์ต์ ์งํํ๋ค.
webpack dev server proxy์ ๊ธฐ์กด ๋ฐฐ์ ๋ ๋ด์ฉ๊ณผ ๋์ผํ๋ค.
React Proxy๋ client์์ ์์
ํด ์ฃผ๋ฉด๋๋ค.
2๊ฐ์ง ์๋ฒ์ ์ฐ๊ฒฐ๋์ด์ผ ํด์ ์ด๋ถ๋ถ์ ์ด๋ป๊ฒ ์์ฑํด์ผ ํ๋์ง ํค๋งธ์๋ค.
์ ๋ง ๋จ์ํ๊ฒ ๋์ผํ๊ฒ ์์ฑ ํด ๊ฒฝ๋ก, ๋๋ฉ์ธ ๋ถ๋ถ๋ง ๋ณ๊ฒฝํด ์ฃผ๋ฉด๋๋ค.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:3080',
changeOrigin: true,
})
);
app.use(
'/api2',
createProxyMiddleware({
target: 'http://localhost:3070',
changeOrigin: true,
})
);
};
์ดํ ์ปดํฌ๋ํธ ์์
ํ ์๋ฒ๋ฅผ api, api2๊ฒฝ๋ก๋ก ๊ฐ์
npm run dev
๋ก ์คํํด ์ฃผ๋ฉด ๋๋ค.
http://localhost:3080
์ books์
http://localhost:3070
์ todos๊ฐ ์ ๋์ค๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
(์ค๊ฐ ์ค๊ฐ ๋ด์ฉ์ ํ
์คํธ ํ๋๋ผ... ์ ๋ ๊ฒ ๋๋ค)
CORS ์๋ฌ๋ฅผ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ํด ํ์ตํ๊ณ ์ค์ตํ๋ ์๊ฐ์ ๊ฐ์ก๋ค.
์ proxy๋ฅผ ์ฌ์ฉํด์ผํ๊ณ ์ด๋ค์์ผ๋ก ์์ฑ์ ํด์ผํ๋์ง ์ ์ ์์๋ค.
๊ธ๋ก ๊ณต๋ถํ๋๊ฑฐ ๋ณด๋ค ์ค์ต์ ํตํด ์งํํ๋ ๋ ์ ์ดํด ํ ์ ์์๋ค.