Axios
Node.js์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ HTTP ๋น๋๊ธฐ ํต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก์, Promise ํ์ ์ ๋๋ค.
BackEnd ↔ FrontEnd ์ฌ์ด์ ํต์ ํ๋ ์๋จ์ผ๋ก, JS์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ ajax๋ fetch์ ๊ฐ๋ค๊ณ ๋ณด๋ฉด ๋ฉ๋๋ค.
- Promise๊ธฐ๋ฐ์ด๋ผ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋๋ฐ ํธ๋ฆฌํจ
- Response๊ฐ ์๋์ผ๋ก JSONํํ๋ก ๋ณ๊ฒฝ
- CSRF๋ณดํธ ๊ธฐ๋ฅ์ด ๋ด์ฅ
- ๊ธฐ๋ณธ์ ์ผ๋ก ๋ด์ฅ๋ ๊ฒ์ด ์๋๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ์ค์น๊ฐ ํ์
๋ฑ์ผ๋ก ๋ณผ ์ ์์ ๊ฒ์ด๋ค. fetch์ ajax๋ฅผ ๋ณด์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ณผ ์ ์์ต๋๋ค.
CSRF(XSRF) : ์น์ฌ์ดํธ ์ทจ์ฝ์ ๊ณต๊ฒฉ์ ํ๋๋ก, ์ฌ์ฉ์๊ฐ ์์ ์ ์์ง์๋ ๋ฌด๊ดํ๊ฒ ๊ณต๊ฒฉ์๊ฐ ์๋ํ ํ์(CRUD ๋ฑ)๋ฅผ ํน์ ์น์ฌ์ดํธ์ ์์ฒญํ๊ฒ ํ๋ ๊ณต๊ฒฉ
์ค์น
npm install axios
yarn add axios
๋ฌธ๋ฒ
๊ธฐ๋ณธ ๊ตฌ์ฑ
axios({
url: 'http://localhost:3000/account/user',
method: 'get'
data: {
email: 'wanga@naver.com'
}
})
.then((response)=>{
console.log(response);
});
ํฐ ํ์์ ๋ดค์ ๋, ํฌ๊ฒ ๋ค๋ฅผ ๊ฒ ์๋ ๋ฌธ๋ฒ์ ๋๋ค.
Request
์์ฃผ ์ฌ์ฉํ๋ ์ต์
- url : ํต์ ํ ์๋ฒ ์ฃผ์
- method : ์์ฒญ ๋ฐฉ์(get, post, patch, put, delete)
- data : get์ ์ ์ธํ ์์ฒญ๋ฐฉ์์์ body์ ๋ณด๋ด๋ ๋ฐ์ดํฐ
- params : query string์ ๊ฐ์ฒด๋ก ๋ด์์ฃผ๋ ๋ฐ์ดํฐ
- headers : ์์ฒญ ํค๋
- withCredentials : cross-site access-control ์์ฒญ์ ํ์ฉ ์ ๋ฌด. true์ cross-origin์ผ๋ก ์ฟ ํค๊ฐ ์ ๋ฌ
- xsrfCookieName : xsrf ํ ํฐ ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ฟ ํค์ ์ด๋ฆ. default๋ 'XSRF-TOKEN'.
๋ณดํต 'csrftoken'์ผ๋ก ๊ฐ์ ์ฃผ๋ ๋ฏํ๋ค. - xsrfHeaderName: xsrf ํ ํฐ ๊ฐ์ ์ด๋ฐํ๋ HTTP ํค๋์ ์ด๋ฆ์ผ๋ก BE์ ๋ง์ถฐ์ผ ๋. default๋ 'X-XSRF-TOKEN'
๋ณดํต 'X-CSRFToken'์ผ๋ก ๊ฐ์ ์ฃผ๋ ๋ฏํ๋ค.
withCredentials
FE์ BE์ ์๋ฒ๊ฐ ๋ค๋ฅด๋ฉด ์๋ก ์ฟ ํค๋ฅผ ์์ฑํ๊ฑฐ๋ ์ ๋ฌํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ๋ฉ๋๋ค.
๋ฐ๋ผ์ Client์์๋ ์์ฒญ ๋ณด๋ผ ๋ ํด๋น ์ต์ ์ true๋ก ์ค์ผ ๋์ง๋ง, ์๋ฒ์์๋ Access-Control-Allow-Credentials ํค๋๋ฅผ true๋ก ์ค์ผ ๋ฉ๋๋ค.
์์๋๋ฉด ์ข์ ๋ฏํ ์ต์
- baseURL : url์ ์๋๊ฒฝ๋ก๋ก ์ฌ์ฉํ ๋, ์์ ๋ถ๋ ์ฃผ์
http://localhost:3000/account/user๋ฅผ ์๋ก ๋ค์ด,
baseURL์ด http://localhost:3000/account/ ์ฌ๊ธฐ๊น์ง๋ผ๊ณ ๊ฐ์ ํ๊ณ , url์ /user์ด๋ผ๊ณ ํด์
์ต์ข ์ ์ธ url์ด http://localhost:3000/account/user ์ด๊ฒ ๋๋ค. - responseType : default๋ json์ด๋ผ ๋ฐ๊ฟ ๊ฒฝ์ฐ๊ฐ ๋ง์ง๋ ์์ง๋ง ํน์๋ ๋ฐ๊พธ๊ฒ ๋๋ค๋ฉด ์ค์
text, blob, arraybuffer ๋ฑ... - timeout : ์์ฒญ์ด ์ค์ ๋ ์๊ฐ๋ณด๋ค ๊ธธ์ด์ง๊ฒ ๋๋ฉด ์์ฒญ์ ์ทจ์.
- validateStatus : HTTP์๋ต ์ํ์ฝ๋์ ๋ํด resolve ๋๋ reject๋ฅผ ์ง์ ํ ์ ์์.
๋ ๋ง๊ธฐ๋ ํ์ง๋ง, ๋ฐ๋ก ์ฌ์ฉํด ๋ณผ ๋๋ง๋ค ์ถ๊ฐํด๋ ๋ ๋ฏ์ถ์ต๋๋ค.
Response
.then์ผ๋ก ์ฐ์ด์ response๋ก ๋ฐ์ ๊ฐ์ฒด์ ๋ด๊ธด ๋ฐ์ดํฐ์ ๋๋ค.
๋ด์ฉ์ request ํ ๋๋ ๋ฌ๋ฆฌ, ๊ทธ๋ฅ console.log(response) ์ฐ์ด๋ณด๋ฉด ๋ค ๋์ค๊ธฐ ๋๋ฌธ์ ํ์ํ ๊ฑฐ ๊ฐ์ ธ๋ค ์ฐ๋ฉด ๋ฉ๋๋ค.
method ๋จ์ถ ์ฌ์ฉ๋ฒ
get, post, put, patch, delete๋ฅผ option์ method๋ก ์ฃผ์ง ์๊ณ ํจ์ํ์์ผ๋ก ๊ฐ๊ฒฐํ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค.
axios.get(url, {option});
axios.delete(url, {option});
axios.post(url, {data}, {option});
axios.put(url, {data}, {option});
axios.patch(url, {data}, {option});
delete์ ๊ฒฝ์ฐ, queryString๋ก ๋ณด๋ด๊ธฐ์ ๋ถ๋ด์ค๋ฝ๊ฑฐ๋ ์ด๋ ค์์ด ์์ ๋, option์ data๋ก ๋ด์์ ๋ณด๋ด๋ฉด ๋ฉ๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก axios์ ๋ํ ์ฌ์ฉ ์ค๋ช ์ ๋๋ค.
React๋ฅผ ํ๋ฉด์๋ axios ์ธ์๋ ์ ์ ์ฐ๋ ๋ฏํ๋ค. ๋ฐ๋๋ผJSํ ๋๋ fetch๋ ajax๋ฅผ ์ฃผ๋ก ์ผ๋ ๊ฑฐ ๊ฐ์๋ฐ..
์ถ๊ฐ์ ์ผ๋ก instance, ์ด๋ฏธ์ง ๋ค์ด๋ก๋, default๊ฐ ์ค์ , interceptors, ์๋ฌ ํธ๋ค๋ง(validateStatus) ๋ฑ
๋ค๋ค๋ณด๋ฉด์ ๊ณต๋ถํ ์์ ์ ๋๋ค.
'Front-End > Library' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Library] SWR : ์์ฉ_Mutate & Revalidation (0) | 2023.07.03 |
---|---|
Library] SWR : ์์ฉ (0) | 2023.07.03 |
Library] SWR (0) | 2023.07.03 |
Library] Swiper (0) | 2023.06.29 |
Library] Axios : ์์ฉ (0) | 2023.06.28 |