{"id":862,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=862"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"ajax","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/ajax\/","title":{"rendered":"ajax"},"content":{"rendered":"<blockquote>\n<p>jQuery load()\ub294 \ud2b9\uc815 URL\uc758 \ub9ac\uc18c\uc2a4\ub97c \uc694\uccad\ud558\uace0, \uc751\ub2f5\uc744 HTML\ub85c \ubcc0\ud658\ud558\uc5ec \uc9c0\uc815\ub41c DOM \uc694\uc18c\uc5d0 \ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud83d\udca1 ajax (Asynchronous JavaScript and XML)<br \/>\n(\uc5d0\uc774\uc2f1\ud06c\ub7ec\ub108\uc2a4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc564 xml)<br \/>\n\ube44\ub3d9\uae30 \ubc29\uc2dd\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 xml<\/p>\n<ul>\n<li>\ub3d9\uae30\ubc29\uc2dd: \uc11c\ubc84\uc5d0 \uc2e0\ud638\ub97c \ubcf4\ub0c8\uc744\ub54c \uc751\ub2f5\uc774 \ub3cc\uc544\uc640\uc57c \ub2e4\uc74c \ub3d9\uc791\uc744 \uc218\ud589<\/li>\n<li>\ube44\ub3d9\uae30\ubc29\uc2dd: \uc2e0\ud638\ub97c \ubcf4\ub0c8\uc744\ub54c \uc751\ub2f5\uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ub2e4\uc74c \ub3d9\uc791 \uc2e4\ud589<\/li>\n<\/ul>\n<p><mark>\ud83d\udca1Ajax(Asynchronous Javascript and XML)\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac00 \ube44\ub3d9\uae30\ubc29\uc2dd\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud558\uc5ec &gt; \ud654\uba74 \uc804\ud658 \uc5c6\uc774 \uc11c\ubc84\uce21\uc5d0 \uc790\ub8cc(XML,HTML,JSON,\ud14d\uc2a4\ud2b8&#8230;)\ub97c \uc694\uccad\ud560\ub54c \uc0ac\uc6a9<\/mark><\/p>\n<\/blockquote>\n<h4>\uc608\uc81c<\/h4>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/jq\/16\/step1\/index.html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/jq\/16\/step2\/html\">\ubbf8\ub9ac\ubcf4\uae30<\/a><\/p>\n<h4>HTML<\/h4>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;1.css&quot; \/&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;div class=&quot;row&quot;&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; data-src=&quot;gallery\/1.html&quot; class=&quot;pic&quot; \/&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/2.jpg&quot; data-src=&quot;gallery\/2.html&quot; class=&quot;pic&quot; \/&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/3.jpg&quot; data-src=&quot;gallery\/3.html&quot; class=&quot;pic&quot; \/&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n    &lt;div id=&quot;lightbox&quot;&gt;\n      &lt;div id=&quot;lightboxImage&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.7.1.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;jq.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h4>CSS<\/h4>\n<pre><code class=\"language-css\">.row {\n  width: 420px;\n  margin: 0 auto;\n}\n\n.row ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.row ul li {\n  display: inline-table;\n  width: 30%;\n}\n.row ul li img {\n  width: 100%;\n}\n\/* \ub77c\uc774\ud2b8 \ubc15\uc2a4 \uc2a4\ud0c0\uc77c *\/\n#lightbox {\n  position: fixed;\n  width: 100%;\n\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  top: 0;\n  left: 0;\n  display: none;\n}\n\n\/* \ub77c\uc774\ud2b8 \ubc15\uc2a4 \uc548\uc758 \uc774\ubbf8\uc9c0 *\/\n#lightbox {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 5px solid #eee;\n  overflow: hidden;\n  z-index: 100;\n}\n\n.all_scrollFixed {\n  overflow: hidden;\n}\n.all_scrollFixed::before {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  width: 1000%;\n  height: 10000%;\n  background-color: rgba(0, 0, 0, 0.2);\n  transform: translateX(-50%);\n  content: &#39;&#39;;\n  z-index: 95;\n}\n#lightboxImage {\n  left: 50%;\n  transform: translateX(-50%);\n  position: fixed;\n  width: 80%;\n  height: 80vh;\n  overflow-y: auto;\n  top: 100px;\n}\n<\/code><\/pre>\n<h4>JQ<\/h4>\n<pre><code class=\"language-js\">const pics = $(&#39;.pic&#39;);\nconst lightbox = $(&#39;#lightbox&#39;);\nconst lightboxImage = $(&#39;#lightboxImage&#39;);\n\npics.on(&#39;click&#39;, function () {\n  const bigLocation = $(this).attr(&#39;data-src&#39;);\n  lightboxImage.load(bigLocation);\n  $(&#39;html&#39;).addClass(&#39;all_scrollFixed&#39;);\n  lightbox.css(&#39;display&#39;, &#39;block&#39;);\n});\n\nlightbox.on(&#39;click&#39;, function () {\n  lightbox.css(&#39;display&#39;, &#39;none&#39;);\n  $(&#39;html&#39;).removeClass(&#39;all_scrollFixed&#39;);\n});\n<\/code><\/pre>\n<h4>Vanilla<\/h4>\n<pre><code class=\"language-js\">const pics = document.getElementsByClassName(&#39;pic&#39;); \/\/ .pic\uc778 \uc694\uc18c\ub4e4\uc744 \uac00\uc838\uc640 pics \ub77c\ub294 \ubcc0\uc218\uc5d0 \uc800\uc7a5. querySelectorAll(&quot;.pic&quot;)\ub3c4 \uac00\ub2a5\nconst lightbox = document.getElementById(&#39;lightbox&#39;); \/\/ \ub77c\uc774\ud2b8 \ubc15\uc2a4. querySelector(&quot;#lightbox&quot;)\ub3c4 \uac00\ub2a5\nconst lightboxImage = document.getElementById(&#39;lightboxImage&#39;); \/\/ \ub77c\uc774\ud2b8 \ubc15\uc2a4 \uc548\uc758 \uc774\ubbf8\uc9c0. querySelector(&quot;#lightboxImage&quot;)\ub3c4 \uac00\ub2a5\n\nfor (i = 0; i &lt; pics.length; i++) {\n  pics[i].addEventListener(&#39;click&#39;, showLightbox);\n}\n\nasync function showLightbox() {\n  const bigLocation = this.getAttribute(&#39;data-src&#39;); \/\/ bigLocation = this.data-src; \ub3c4 \uac00\ub2a5.\n  try {\n    const response = await fetch(bigLocation);\n    console.log(response);\/\/\uc751\ub2f5\uacb0\uacfc\ud655\uc778\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    const htmlContent = await response.text();\n    lightboxImage.innerHTML = htmlContent;\n    lightbox.style.display = &#39;block&#39;; \/\/ \ub77c\uc774\ud2b8\ubc15\uc2a4 \uc774\ubbf8\uc9c0\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc\n    document.querySelector(&#39;html&#39;).style.overflow = &#39;hidden&#39;;\n  } catch (error) {\n    console.log(error);\n  }\n}\n\nlightbox.onclick = function () {\n  \/\/click \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc2e4\ud589\ud560 \ud568\uc218 \uc120\uc5b8\n  lightbox.style.display = &#39;none&#39;; \/\/ lightbox \uc694\uc18c\ub97c \ud654\uba74\uc5d0\uc11c \uac10\ucda4\n  document.querySelector(&#39;html&#39;).style.overflow = &#39;visible&#39;;\n};\n<\/code><\/pre>\n<p><strong>#9<\/strong>: \uc774 \ud568\uc218\ub294 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc791\ub3d9\ud558\uba70, <code>async<\/code> \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc120\uc5b8\ub418\uc5c8\ub2e4. <code>async<\/code>\ub294 \ud568\uc218\ub0b4\ubd80\uc5d0\uc154 <code>await<\/code> \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc900\ub2e4. <code>await<\/code>\ub294 \ud504\ub85c\ubbf8\uc2a4(Promise)\uac00 \ucc98\ub9ac\ub420 \ub54c\uae4c\uc9c0 \ud568\uc218 \uc2e4\ud589\uc744 \uc77c\uc2dc\uc801\uc73c\ub85c \uc911\uc9c0\uc2dc\ud0a4\uace0, \ud504\ub85c\ubbf8\uc2a4\uc758 \uacb0\uacfc\uac00 \ubc18\ud658\ub418\uba74 \ud568\uc218\ub97c \uc2e4\ud589\ud55c\ub2e4.<\/p>\n<p><strong>#11<\/strong>: <code>try ~ catch<\/code> \ud1b5\uc2e0 \uc131\uacf5\uc2dc  try\ub97c \uc2e4\ud589\ud558\uace0 \uc5d0\ub7ec \ubc1c\uc0dd\uc2dc catch\ub97c \uc2e4\ud589\ud55c\ub2e4.<\/p>\n<p><strong>#17<\/strong>: response \uc5d0 \uc800\uc7a5\ub41c \uac12\uc744 text \ub85c \ubcc0\ud658\ud55c\ub2e4<\/p>\n<h4>SUB<\/h4>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n    &lt;style&gt;\n      body {\n        text-align: center;\n        font-size: 2em;\n        color: white;\n      }\n      .col {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 1rem;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n\n  &lt;body&gt;\n    &lt;h1&gt;h1&lt;\/h1&gt;\n    &lt;div class=&quot;col&quot;&gt;\n      &lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n      &lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n      &lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n      &lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n      &lt;img src=&quot;http:\/\/qwerew.cafe24.com\/images\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>jQuery load()\ub294 \ud2b9\uc815 URL\uc758 \ub9ac\uc18c\uc2a4\ub97c \uc694\uccad\ud558\uace0, \uc751\ub2f5\uc744 HTML\ub85c \ubcc0\ud658\ud558\uc5ec \uc9c0\uc815\ub41c DOM \uc694\uc18c\uc5d0 \ub85c\ub4dc\ud569\ub2c8\ub2e4. \ud83d\udca1 ajax (Asynchronous JavaScript and XML) (\uc5d0\uc774\uc2f1\ud06c\ub7ec\ub108\uc2a4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc564 xml) \ube44\ub3d9\uae30 \ubc29\uc2dd\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 xml \ub3d9\uae30\ubc29\uc2dd: \uc11c\ubc84\uc5d0 \uc2e0\ud638\ub97c \ubcf4\ub0c8\uc744\ub54c \uc751\ub2f5\uc774 \ub3cc\uc544\uc640\uc57c \ub2e4\uc74c \ub3d9\uc791\uc744 \uc218\ud589 \ube44\ub3d9\uae30\ubc29\uc2dd: \uc2e0\ud638\ub97c \ubcf4\ub0c8\uc744\ub54c \uc751\ub2f5\uc5ec\ubd80\uc640 \uc0c1\uad00\uc5c6\uc774 \ub2e4\uc74c \ub3d9\uc791 \uc2e4\ud589 \ud83d\udca1Ajax(Asynchronous Javascript and XML)\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac00 \ube44\ub3d9\uae30\ubc29\uc2dd\uc73c\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud558\uc5ec &gt; \ud654\uba74 &#8230; <a title=\"ajax\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/ajax\/\" aria-label=\"ajax\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}