๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กaxios์ธ์Šคํ„ด์Šค (1)

Hi-๋žŒ๐Ÿ‘‹ High-๋žŒโ˜€๏ธ

[React] API ์„ค์ • ๊ณตํ†ตํ™” - ํ™˜๊ฒฝ๋ณ€์ˆ˜, axios ์ธ์Šคํ„ด์Šค ์‚ฌ์šฉํ•˜๊ธฐ

๊ธฐ์กด์—๋Š” API ์—ฐ๊ฒฐ์„ ์œ„ํ•ด์„œ proxy์„ค์ •์„ ํ•˜๊ณ  ํ˜ธ์ถœํ•  ๋•Œ endpoint ๊ฒฝ๋กœ๋ฅผ ์ ์–ด์ฃผ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ CORS์„ค์ •์ด ์™„๋ฃŒ๋˜๊ณ  ๋” ์ด์ƒ proxy๊ฐ€ ํ•„์š” ์—†๊ฒŒ ๋˜์–ด ์‚ญ์ œํ–ˆ๋”๋‹ˆ ๋งค ํ˜ธ์ถœ๋งˆ๋‹ค ์ „์ฒด ์ฃผ์†Œ๋ฅผ ์ ์–ด์•ผ ํ–ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํ™˜๊ฒฝ๋ณ€์ˆ˜์™€ axios ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณตํ†ต์ ์ธ ๋ถ€๋ถ„๋“ค์„ ๊ด€๋ฆฌํ•˜๊ณ ์ž ํ–ˆ๋‹ค. 1. ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์„ค์ • ๋จผ์ € ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์„ธํŒ…ํ•ด์คฌ๋‹ค. ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ง€๊ธˆ์˜ ๊ฒฝ์šฐ์ฒ˜๋Ÿผ ํ•˜๋“œ์ฝ”๋”ฉ๋œ ๊ฐ’๋“ค์„ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ๋„ ์žˆ๊ณ , ์ด ์™ธ์—๋„ ์—ฌ๋Ÿฌ ์žฅ์ ์ด ์žˆ๋‹ค. ์˜คํ”ˆ ์†Œ์Šค์— ์˜ฌ๋ฆฌ๋ฉด ์•ˆ ๋˜๋Š” ๊ฐ’๋“ค์„ .envํŒŒ์ผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ ๋ณด์•ˆ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ๊ณ , ๋กœ์ปฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์‹ค์ œ ๋ฐฐํฌ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์„ค์ •๋„ ๋ถ„๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ž‘์„ฑ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ๋จผ์ € ํ”„๋กœ์ ํŠธ์˜ ์ตœ์ƒ์œ„ ๋ฃจํŠธ์— .envํŒŒ์ผ์„ ๋งŒ..

React 2023. 5. 8. 21:25