๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-End

Axios ๋ž€?

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 11. 10.
๋ฐ˜์‘ํ˜•

๐ŸŽถ Axios๋ž€?

๋ธŒ๋ผ์šฐ์ €, Node.js๋ฅผ ์œ„ํ•œ Promise API๋ฅผ ํ™œ์šฉํ•˜๋Š” HTTP ๋น„๋™๊ธฐ ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ



๐ŸŽถ Axios์˜ ๊ธฐ๋Šฅ

  • ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ : XMLHttpRequests ์š”์ฒญ ์ƒ์„ฑ
  • Node.js ํ™˜๊ฒฝ : http ์š”์ฒญ ์ƒ์„ฑ
  • Promise API ์ง€์›
  • ์š”์ฒญ/์‘๋‹ต ์ฐจ๋‹จ(Intercept)
  • ์š”์ฒญ/์‘๋‹ต ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜
  • ์ทจ์†Œ ์š”์ฒญ
  • JSON ๋ฐ์ดํ„ฐ ์ž๋™ ๋ณ€ํ™˜
  • ์‚ฌ์ดํŠธ ๊ฐ„ ์š”์ฒญ ์œ„์กฐ(XSRF) ๋ณดํ˜ธ๋ฅผ ์œ„ํ•œ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ์ง€์›



๐ŸŽถ ์‚ฌ์šฉ๋ฒ•

๐Ÿ‘‰ axios ์‚ฌ์šฉ๋ฒ•

 

๋‚˜๋Š” ์ฃผ๋กœ ์ด๋ ‡๊ฒŒ ์ผ๋‹ค.

import axios from "axios";

  const boardUpload = async () => {
    await axios
      .post(`${API}/board/write,
      )
      .catch((err) => {
        throw err;
      });
    alert("๊ฒŒ์‹œ๋ฌผ์ด ๋“ฑ๋ก๋˜์—ˆ์Šต๋‹ˆ๋‹ค.");
    location.href = "/board";
  };

axois๋ฅผ fetch ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ฒ˜๋Ÿผ header, method์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์„œ๋ฒ„์™€ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.
์–ผ๋งˆ์ „์— ๋ฐฐ์šด๊ฑฐ๋ผ ์•„์ง ๋งŽ์ด ์จ๋ณธ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ์ฐธ ์‹ ๊ธฐํ•˜๊ณ  ์„ธ๋ จ๋œ ๊ธฐ์ˆ  ๊ฐ™๋‹ค.

 

 

์ฐธ๊ณ  ์‚ฌ์ดํŠธ ๐Ÿ‘‰๐Ÿป Axios ๊ณต์‹ ๋ฌธ์„œ

๋ฐ˜์‘ํ˜•

'Front-End' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Self Refactoring Tip  (0) 2021.11.17
RESTful API ๋ž€?  (0) 2021.11.15
gitignore  (0) 2021.11.10
await, async, promise  (0) 2021.11.10
SSR, CSR, SPA  (0) 2021.11.05

๋Œ“๊ธ€