{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/different-of-axios-fetch/","result":{"data":{"site":{"siteMetadata":{"title":"hyesungoh","author":"hyesungoh","siteUrl":"https://www.hyesungoh.xyz","comment":{"disqusShortName":"","utterances":"hyesungoh/blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"0cddecaa-8ea7-5373-957f-5a2e0a7e6811","excerpt":"AJAX ? Asynchronous Javascript And Xml 비동기적으로 클라이언트와 서버간 XML 데이터를 주고받는 기술 XML ? eXtensible Markup Language HTML과 같은 마크업 언어, HTML은 데이터를 표현하는 데, XML은 데이터를 전달하는 데 초점이 맞춰짐 Axios와 Fetch의 차이점 Axios HTTP 통신을 위한 JavaScript 라이브러리 구형 브라우저를 지원 JSON 데이터의 자동 변환이 가능 node.JS에서 사용 가능 request…","html":"<h2 id=\"ajax-\" style=\"position:relative;\"><a href=\"#ajax-\" aria-label=\"ajax  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AJAX ?</h2>\n<h6 id=\"asynchronous-javascript-and-xml\" style=\"position:relative;\"><a href=\"#asynchronous-javascript-and-xml\" aria-label=\"asynchronous javascript and xml permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Asynchronous Javascript And Xml</h6>\n<p>비동기적으로 클라이언트와 서버간 XML 데이터를 주고받는 기술</p>\n<h2 id=\"xml-\" style=\"position:relative;\"><a href=\"#xml-\" aria-label=\"xml  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>XML ?</h2>\n<h6 id=\"extensible-markup-language\" style=\"position:relative;\"><a href=\"#extensible-markup-language\" aria-label=\"extensible markup language permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>eXtensible Markup Language</h6>\n<p>HTML과 같은 마크업 언어, HTML은 데이터를 <em>표현</em>하는 데, XML은 데이터를 <em>전달</em>하는 데 초점이 맞춰짐</p>\n<h2 id=\"axios와-fetch의-차이점\" style=\"position:relative;\"><a href=\"#axios%EC%99%80-fetch%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90\" aria-label=\"axios와 fetch의 차이점 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Axios와 Fetch의 차이점</h2>\n<ul>\n<li>\n<h4 id=\"axios\" style=\"position:relative;\"><a href=\"#axios\" aria-label=\"axios permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Axios</h4>\n<ul>\n<li>HTTP 통신을 위한 JavaScript 라이브러리</li>\n<li>구형 브라우저를 지원</li>\n<li>JSON 데이터의 자동 변환이 가능</li>\n<li>node.JS에서 사용 가능</li>\n<li>request aborting 가능</li>\n<li>reponse timeout을 쉽게 설정 가능</li>\n<li>catch 시, then을 실행하지 않고 에러 로그를 보여줌</li>\n<li>CSRF 보호 기능이 내장</li>\n<li>upload progress 지원</li>\n</ul>\n</li>\n<li>\n<h4 id=\"fetch\" style=\"position:relative;\"><a href=\"#fetch\" aria-label=\"fetch permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Fetch</h4>\n<ul>\n<li>JavaScript 내장 라이브러리</li>\n<li>네트워크 에러 발생 시 기다려야함\n지원하지 않는 브라우저가 있음</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"왜-axios가-인기가-많을까\" style=\"position:relative;\"><a href=\"#%EC%99%9C-axios%EA%B0%80-%EC%9D%B8%EA%B8%B0%EA%B0%80-%EB%A7%8E%EC%9D%84%EA%B9%8C\" aria-label=\"왜 axios가 인기가 많을까 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>왜 Axios가 인기가 많을까?</h2>\n<p>Fetch를 이용하여 Axios와 동일한 기능을 구현할 수는 있으나, Axios를 사용하여 해당 시간을 아껴 다른 곳에 투자하는 게 이득이라 생각된다.</p>\n<blockquote>\n<p>참고 : <a href=\"https://dream-frontend.tistory.com/382\">Ajax</a>, <a href=\"https://wonit.tistory.com/304\">axios</a>, <a href=\"https://helloworld-88.tistory.com/67\">XML</a></p>\n</blockquote>","frontmatter":{"title":"axios와 fetch의 차이점","date":"February 09, 2021"}}},"pageContext":{"slug":"/JavaScript/different-of-axios-fetch/","previous":{"fields":{"slug":"/Algorithm/BOJ-12852-Python/"},"frontmatter":{"title":"BOJ-12852 - Python","category":"Algorithm","draft":false}},"next":{"fields":{"slug":"/Algorithm/BOJ-9084-Python/"},"frontmatter":{"title":"BOJ-9084 - Python","category":"Algorithm","draft":false}}}},"staticQueryHashes":["3128451518","3290666882"]}