{"id":283,"date":"2026-06-26T13:34:12","date_gmt":"2026-06-26T13:34:12","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=283"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"xmlhttprequest-%eb%b6%80%ed%84%b0axios-%ea%b9%8c%ec%a7%80","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=283","title":{"rendered":"xmlhttprequest-\ubd80\ud130axios-\uae4c\uc9c0"},"content":{"rendered":"

XMLHttpRequesthttps:\/\/www.mockaroo.com\/<\/a> <\/p>\n

1. XMLHttpRequest<\/h2>\n
let request = new XMLHttpRequest(); \/\/\ud1b5\uc2e0\uac1d\uccb4\uc0dd\uc131\nconst url = ".\/MOCK_DATA.json"; \/\/\uc11c\ubc84\uc8fc\uc18c\uc124\uc815\n\/\/\uc751\ub2f5\uc0c1\ud0dc\ubcc4 \ucc98\ub9ac\nrequest.onreadystatechange = function () {\n  if (request.readyState == 4 && request.status == 200) {\n    jsonfunc(this.responseText);\n  }\n};\n\/\/\ud1b5\uc2e0 \ubc29\uc2dd\uacfc \uc8fc\uc18c .open("GET", url) , \ud68c\uc120\uc5f0\uacb0\nrequest.open("GET", url);\n\/\/\ud1b5\uc2e0\uc2e4\ud589\nrequest.send();\n\n\/\/\ub124\ud2b8\uc6cc\ud06c \ud1b5\uc2e0\uc73c\ub85c db \ubc1b\uae30\n\/\/\ubc1b\uc740 db\ub97c \uac00\uacf5\ud574\uc11c \ud654\uba74\uc5d0 \ubc14\uc778\ub529\nfunction jsonfunc(responseText) {\n  let id = new Array();\n  let first_name = new Array();\n  let last_name = new Array();\n  let email = new Array();\n  let gender = new Array();\n  let ip_address = new Array();\n\n  \/\/json \ub370\uc774\ud130\ub97c text\ub85c \ubcc0\ud658\n  let jsonTxt = JSON.parse(responseText);\n  \/\/dom \uc694\uc18c \uc900\ube44\n  const wrap = document.querySelector(".wrap");\n  \/\/table \ud0dc\uadf8\uc0dd\uc131 .createElement\n  let table = document.createElement("table");\n  \/\/\ubc18\ubcf5\ubb38\uc0ac\uc6a9\ud574\uc11c \ub370\uc774\ud130 \ubc14\uc778\ub529\n  for (i = 0; i < jsonTxt.length; i++) {\n    id[i] = jsonTxt[i].id;\n    first_name[i] = jsonTxt[i].first_name;\n    gender[i] = jsonTxt[i].gender;\n    last_name[i] = jsonTxt[i].last_name;\n    email[i] = jsonTxt[i].email;\n    \/\/tr,td \uc0dd\uc131\ud6c4 \ub370\uc774\ud130 \ub123\uae30\n    let tr = document.createElement("tr");\n    let td1 = document.createElement("td");\n    td1.appendChild(document.createTextNode(id[i] + ""));\n    let td2 = document.createElement("td");\n    td2.appendChild(document.createTextNode(first_name[i] + ""));\n    let td3 = document.createElement("td");\n    td3.appendChild(document.createTextNode(gender[i] + ""));\n    let td4 = document.createElement("td");\n    td4.appendChild(document.createTextNode(last_name[i] + ""));\n    let td5 = document.createElement("td");\n    td5.appendChild(document.createTextNode(email[i] + ""));\n    tr.appendChild(td1);\n    tr.appendChild(td2);\n    tr.appendChild(td3);\n    tr.appendChild(td4);\n    tr.appendChild(td5);\n    table.appendChild(tr);\n  }\n  wrap.appendChild(table);\n}\n<\/code><\/pre>\n
1. Fetch \uc2dc\uc791\ud558\uae30<\/h2>\n
1.1 Fetch \ub4f1\uc7a5 \ubc30\uacbd<\/h3>\n
Fetch \uc0ac\uc6a9 \uc774\uc720\uc5d0 \ub300\ud574 \uc54c\uae30 \uc704\ud574\uc11c\ub294 \ube44\ub3d9\uae30\ud1b5\uc2e0\uc758 \uc5ed\uc0ac\uc5d0 \ub300\ud574 \uac04\ub7b5\ud558\uac8c \uc54c\uace0 \ub118\uc5b4\uac08 \ud544\uc694\uac00 \uc788\ub2e4. Fetch\uac00 \ub098\uc624\uae30 \uc804\uae4c\uc9c0\ub294 JS\uc5d0\uc11c Ajax\ub97c \uc0ac\uc6a9\ud558\uae30\ub294 \uad49\uc7a5\ud788 \ubc88\uac70\ub85c\uc6e0\ub2e4. XMLHttpRequest API(\uc774\ud558 XHR)\ub97c \uc0ac\uc6a9\ud558\uc5ec XML \ub370\uc774\ud130\ub97c \uc8fc\uace0\ubc1b\uc558\ub294\ub370 \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574 \uac00\ub3c5\uc131\ub3c4 \ub5a8\uc5b4\uc9c0\uace0 \uc11c\ubc84\uc758 \ub3d9\uc791\uc744 \ud30c\uc545\ud558\uae30 \ud798\ub4e4\uc5c8\ub2e4. \uc774\ub7ec\ud55c \ubd88\ud3b8\ud568\uc744 \ud574\uc18c\ud558\uae30 \uc704\ud574 Fetch API\uac00 ES6\ubd80\ud130 \ub4f1\uc7a5\ud558\uba70 XHR\ub97c \uc0ac\uc6a9\ud558\ub358 \ubc29\uc2dd\ubcf4\ub2e4 \uc9c1\uad00\uc801\uc774\uba70 \uac00\ub3c5\uc131\uc774 \ub354\uc6b1 \uc88b\uc544\uc9c0\uac8c \ub418\uc5c8\ub2e4.<\/p>\n
1.2 Fetch \uc0ac\uc6a9 \uc774\uc720<\/h3>\n
Fetch\ub294 \ub124\ud2b8\uc6cc\ud06c \ud1b5\uc2e0\uc744 \ud3ec\ud568\ud55c \ub9ac\uc18c\uc2a4\ub97c \uac00\uc9c0\uace0 \uc624\uae30 \uc704\ud55c \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc81c\uacf5\ud574 \uc8fc\ub294 API\uc774\ub2e4. XHR\uacfc \uae30\ub2a5\uc740 \uac19\uc9c0\ub9cc \ud655\uc7a5 \uac00\ub2a5\ud558\uba70 \ud6a8\uacfc\uc801\uc73c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uace0,[1] \ub0b4\uc7a5\uae30\ub2a5\uc774\ub77c \ub77c\uc774\ube0c\ub7ec\ub9ac \uc5c5\ub370\uc774\ud2b8\uc5d0 \ub530\ub978 \uc5d0\ub7ec\ub97c \uac71\uc815\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub41c\ub2e4.<\/p>\n
2. Fetch \ubb38\ubc95<\/h2>\n
2.1 Response \ud504\ub85c\ud37c\ud2f0\uc640 \uba54\uc11c\ub4dc<\/h3>\n
2.1.1 Response \ud504\ub85c\ud37c\ud2f0\uc640 \uba54\uc11c\ub4dc\ub97c \uc124\uba85\ud558\uae30 \uc55e\uc120 \uac04\ub7b5\ud55c promise \uc124\uba85 \uc608\uc81c<\/h4>\n
let promise = fetch('\uc5f0\uc2b5 url')\n\nconsole.log(promise)\n<\/code><\/pre>\n
\"\"<\/p>\n
Promise\ub294 \uc55e\uc5d0\uc11c \uc0b4\ud3b4 \ubd24\ub4ef\uc774 fetch\ub97c \uc0ac\uc6a9\ud588\uc744 \ub54c \uc2e4\ud589 \uacb0\uacfc\uc5d0 \ub300\ud55c \uc0c1\ud0dc\ub97c \ubc18\ud658\ud574 \uc8fc\ub294 \uc57d\uc18d\ub41c \uac1d\uccb4\uc774\ub2e4. Promise\uc5d0\ub294 3\uac00\uc9c0 \uc0c1\ud0dc pending<\/code>, fulfilled<\/code>, reject<\/code>\uac00 \uc874\uc7ac\ud55c\ub2e4. pending<\/code>\uc740 \uc9c4\ud589 \uc911, fullfilled<\/code>\ub294 \uc644\ub8cc, rejected<\/code>\ub294 \uc2e4\ud328\ub97c \uc758\ubbf8\ud55c\ub2e4. \uc704 console \ucc3d\uc744 \ud655\uc778\ud574 \ubcf4\uba74 PromiseState\uc758 \uc0c1\ud0dc\ub294 fullfilled<\/code>, fetch\ub97c \ud574\uc624\ub294 \uac83\uc5d0 \uc131\uacf5\ud55c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n
2.1.2 Response \ud504\ub85c\ud37c\ud2f0\uc640 \uba54\uc11c\ub4dc\ub97c \uc124\uba85\ud558\uae30 \uc55e\uc120 \uac04\ub7b5\ud55c then \ud568\uc218 \uc124\uba85 \uc608\uc81c<\/h4>\n
let promise = fetch("\uc5f0\uc2b5 URL").then(function (response) {\n    console.log(response);\n});\n<\/code><\/pre>\n
\"\"<\/p>\n
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 then()<\/code> \uba54\uc11c\ub4dc\ub97c \uc81c\uacf5\ud55c\ub2e4. then()<\/code> \uba54\uc11c\ub4dc \uc548\uc5d0 \u2018\uc5f0\uc2b5 URL\u2019\uc758 \uc751\ub2f5\uac12\uc744 \ub2f4\uc744 \uc218 \uc788\ub294 \ucf5c\ubc31 \ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4 \ub193\uace0 \uc815\uc0c1\uc801\uc73c\ub85c \uc751\ub2f5\uc774 \ub4e4\uc5b4\uc654\uc744 \uacbd\uc6b0 \uc751\ub2f5\uac12\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n
2.1.3 Response property\uc5d0 \ub300\ud55c \uc124\uba85\uacfc \uc608\uc81c<\/h4>\n
Response\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1d\uccb4\uc774\ub2e4. Response\ub294 \uc131\uacf5\uacfc \uc2e4\ud328\uc5d0 \ub300\ud55c \uc911\uc694\ud55c \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\ub2e4. \ubcf8\uaca9\uc801\uc73c\ub85c Response\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \uc54c\uc544\ubcf4\uc790.<\/p>\n