{"id":14768,"date":"2023-08-28T18:20:02","date_gmt":"2023-08-29T01:20:02","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=14768"},"modified":"2023-08-31T11:21:04","modified_gmt":"2023-08-31T18:21:04","slug":"building-a-survey-app-with-netlify-and-couchbase","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/","title":{"rendered":"Netlify \ubc0f Couchbase\ub85c \uc124\ubb38\uc870\uc0ac \uc571 \uad6c\ucd95\ud558\uae30"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uac1c\ubc1c\ud300\uc740 \uadf8\ub3d9\uc548 <\/span><a href=\"https:\/\/badwebsite.club\/\"><span style=\"font-weight: 400;\">\ub098\uc05c \uc6f9\uc0ac\uc774\ud2b8 \ud074\ub7fd<\/span><\/a><span style=\"font-weight: 400;\"> on <\/span><a href=\"https:\/\/www.freecodecamp.org\/\"><span style=\"font-weight: 400;\">\ubb34\ub8cc \ucf54\ub4dc \ucea0\ud504 <\/span><\/a><span style=\"font-weight: 400;\">\uc790\ub8cc.\u00a0<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">\ubb34\ub8cc\ucf54\ub4dc\ucea0\ud504\ub294 \ub300\ud654\ud615 \ud559\uc2b5 \uc6f9 \ud50c\ub7ab\ud3fc, \uc628\ub77c\uc778 \ucee4\ubba4\ub2c8\ud2f0 \ud3ec\ub7fc, \ucc44\ud305\ubc29, \uc628\ub77c\uc778 \ucd9c\ud310\ubb3c \ubc0f \uc9c0\uc5ed \ub2e8\uccb4\ub85c \uad6c\uc131\ub41c \ube44\uc601\ub9ac \ub2e8\uccb4\ub85c, \ub204\uad6c\ub098 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uac83\uc744 \ubaa9\ud45c\ub85c \ud569\ub2c8\ub2e4.<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400;\">\ub098\uc05c \uc6f9\uc0ac\uc774\ud2b8 \ud074\ub7fd\uc740 \uc2e0\uaddc \ud559\uc2b5\uc790\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \uc5ec\uc815\uc744 \ub3d5\ub294 \uc628\ub77c\uc778 \ucee4\ubba4\ub2c8\ud2f0\uc785\ub2c8\ub2e4.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">\uc800\ud76c\ub294 fCC \ud559\uc2b5\uc790\ub4e4\uc5d0\uac8c \ubcf4\ub2e4 '\uc2e4\uc81c' \uc0c1\ud669\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc5b4\ub5a4 \uc77c\uc774 \uc77c\uc5b4\ub0a0 \uc218 \uc788\ub294\uc9c0 \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 \uc2a4\ud2b8\ub9ac\ubc0d\uc744 \ud574\uc654\uc2b5\ub2c8\ub2e4. \ubc18\uc751\ud615 \uc6f9 \ub514\uc790\uc778 \uacfc\uc815\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec \uc124\ubb38\uc870\uc0ac \uc591\uc2dd\uacfc \uac19\uc740 \uba87 \uac00\uc9c0 \uc608\uc81c\ub97c \uac00\uc838\uc640\uc11c \uc644\uc131\ud55c \ud6c4 \ud504\ub85c\ub355\uc158\uc5d0 \uc801\uc6a9\ud588\uc2b5\ub2c8\ub2e4. \uc804\uccb4 \uc2dc\ub9ac\uc988\ub294 YouTube, LinkedIn, Twitter \ubc0f Twitch\uc5d0\uc11c \uc2a4\ud2b8\ub9ac\ubc0d\ub418\uba70, \ub179\ud654\ubcf8\uc740 \uc774 YouTube \uc7ac\uc0dd \ubaa9\ub85d\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4: <\/span><a href=\"https:\/\/www.youtube.com\/watch?v=OkO1ZHH1N54&amp;list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6\"><span style=\"font-weight: 400;\" data-rich-links=\"{&quot;fple-t&quot;:&quot;New Couchbase Streams: Starting July 31st!&quot;,&quot;fple-u&quot;:&quot;https:\/\/www.youtube.com\/watch?v=OkO1ZHH1N54&amp;list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6&quot;,&quot;fple-mt&quot;:null,&quot;type&quot;:&quot;first-party-link&quot;}\">\uc0c8\ub85c\uc6b4 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc2a4\ud2b8\ub9bc: 7\uc6d4 31\uc77c\ubd80\ud130 \uc2dc\uc791\ub429\ub2c8\ub2e4!<\/span><\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"\uc0c8\ub85c\uc6b4 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uc2a4\ud2b8\ub9bc: 7\uc6d4 31\uc77c\ubd80\ud130 \uc2dc\uc791\ub429\ub2c8\ub2e4!\" width=\"900\" height=\"506\" src=\"https:\/\/www.youtube.com\/embed\/OkO1ZHH1N54?list=PLcspbWiU9RutKoHwXID713a_GcTgeT6j6\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">\uc800\ub294 \uac1c\uc778\uc801\uc73c\ub85c <\/span><a href=\"https:\/\/www.freecodecamp.org\/learn\/2022\/responsive-web-design\/build-a-survey-form-project\/build-a-survey-form\"><span style=\"font-weight: 400;\">\uc124\ubb38 \uc870\uc0ac \ud504\ub85c\uc81d\ud2b8<\/span><\/a><span style=\"font-weight: 400;\">. \uc774 \ube14\ub85c\uadf8 \uac8c\uc2dc\ubb3c \uc2dc\ub9ac\uc988\uc5d0\uc11c\ub294 GitHub\uc5d0 \ucf54\ub4dc\ub97c \uac8c\uc2dc\ud558\uace0, Netlify\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc628\ub77c\uc778\uc73c\ub85c \uc124\ubb38\uc870\uc0ac\ub97c \ubc30\ud3ec\ud558\uace0, Couchbase Capella\uc5d0 \ucf58\ud150\uce20\ub97c \uc800\uc7a5\ud558\ub294 \ubaa8\ub4e0 \ucd94\uac00 \ub2e8\uacc4\ub97c \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<h2>1\ub2e8\uacc4 - HTML \uc591\uc2dd \ub9cc\ub4e4\uae30<\/h2>\n<p><span style=\"font-weight: 400;\">FreeCodeCamp \uc124\ubb38\uc870\uc0ac \uc608\uc81c\uc5d0\uc11c \ub9ce\uc740 \uc601\uac10\uc744 \uc5bb\uc5b4(\ubcf5\uc0ac, \ubd99\uc5ec\ub123\uae30, \ub2e4\ub4ec\uae30) \ub2e4\uc74c\uacfc \uac19\uc740 HTML \uc591\uc2dd\uc744 \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \uc6d0\ub798 \uc591\uc2dd\ubcf4\ub2e4 \uc870\uae08 \ub354 \uac04\ub2e8\ud569\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&nbsp;&nbsp;&lt;head&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&quot;stylesheet&quot; href=&quot;.\/styles.css&quot; \/&gt;\r\n&nbsp;&nbsp;&lt;\/head&gt;\r\n&nbsp;&nbsp;&lt;body&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;container&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header class=&quot;header&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 id=&quot;title&quot; class=&quot;text-center&quot;&gt;\uc124\ubb38 \uc870\uc0ac \uc591\uc2dd&lt;\/h1&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p id=&quot;description&quot; class=&quot;description text-center&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\uc2dc\uac04\uc744 \ub0b4\uc5b4 \ud50c\ub7ab\ud3fc \uac1c\uc120\uc5d0 \ub3c4\uc6c0\uc744 \uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4.\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form id=&quot;survey-form&quot; action=&quot;&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;form-group&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label id=&quot;name-label&quot; for=&quot;name&quot;&gt;\uc774\ub984&lt;\/label&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;text&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name=&quot;name&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;name&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;form-control&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;Enter your name&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;form-group&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label id=&quot;number-label&quot; for=&quot;number&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;\ub098\uc774&lt;span class=&quot;clue&quot;&gt;(\uc120\ud0dd \uc0ac\ud56d)&lt;\/span&gt;&lt;\/label\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;number&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name=&quot;age&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id=&quot;number&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;10&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max=&quot;99&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;form-control&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder=&quot;Age&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n\r\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;form-group&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\uc774 \uba4b\uc9c4 \uc124\ubb38\uc870\uc0ac\ub97c \uce5c\uad6c\uc5d0\uac8c \ucd94\ucc9c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/p&gt;\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&lt;input\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name=&quot;recommend&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;recommend&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type=&quot;checkbox&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;class=&quot;input-checkbox&quot;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;yes&lt;\/label\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;form-group&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type=&quot;submit&quot; id=&quot;submit&quot; class=&quot;submit-button&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\uc81c\ucd9c\ud558\uae30\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;hidden&quot; name=&quot;trp-form-language&quot; value=&quot;ko&quot;\/&gt;&lt;\/form&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n&nbsp;&nbsp;&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\uadf8\ub9ac\uace0 <em>styles.css<\/em> \ud30c\uc77c\uc740 \uc6d0\ubcf8\uacfc \uc644\uc804\ud788 \ub3d9\uc77c\ud569\ub2c8\ub2e4. <a href=\"https:\/\/survey-form.freecodecamp.rocks\/\">\uc5ec\uae30\uc5d0\uc11c \uc5f4\uae30<\/a> \uc744 \ud074\ub9ad\ud558\uc5ec \uc124\ubb38\uc870\uc0ac \uc591\uc2dd\uc774 \uc2e4\uc81c\ub85c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694. \uc124\ubb38 \uc870\uc0ac \uc591\uc2dd\uc744 \uc5f4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><span style=\"font-weight: 400;\"> \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud574\ub2f9 \ud398\uc774\uc9c0\ub97c \ub9c8\uc6b0\uc2a4 \uc624\ub978\ucabd \ubc84\ud2bc\uc73c\ub85c \ud074\ub9ad\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. <strong>\ud398\uc774\uc9c0 \uc18c\uc2a4 \ubcf4\uae30<\/strong> \ub610\ub294 <strong>\uac80\uc0ac<\/strong>. \uc774\ub97c \ud074\ub9ad\ud558\uba74 \ud398\uc774\uc9c0\uc758 \ucf54\ub4dc\uac00 \ud45c\uc2dc\ub418\ub294 \ud328\ub110\uc774 \uc5f4\ub9bd\ub2c8\ub2e4. \uc774 \ubcf4\uae30\uc5d0 \uc788\ub294 \ub3d9\uc548 \ub2e4\uc74c\uacfc \uac19\uc740 \ub9c1\ud06c\ub97c \ud074\ub9ad\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">style.css<\/span><\/em><span style=\"font-weight: 400;\"> \uc744 \ud074\ub9ad\ud558\uac70\ub098 <strong>\uc2a4\ud0c0\uc77c<\/strong>\u00a0\ud0ed\uc744 \ud074\ub9ad\ud558\uba74 \ud2b9\uc815 \uc694\uc18c\uc5d0 \uc801\uc6a9\ub41c CSS\ub3c4 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uc774 \ucf54\ub4dc \uc0d8\ud50c\uc744 \ud14c\uc2a4\ud2b8\ud558\ub824\uba74 \uba3c\uc800 \ud130\ubbf8\ub110\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc774 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ub85c\uceec \ucef4\ud4e8\ud130\uc5d0 \ubcf5\uc81c\ud558\uac70\ub098 zip \ud30c\uc77c\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.)<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/60084237\/260500053-9b4fb80b-f98e-4a0a-9ff0-09e76bede954.png\" alt=\"Screenshot of button in github where you can clone or download code\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\ube0c\ub77c\uc6b0\uc800\ub85c \uc774\ub3d9\ud558\uc5ec \uc0c1\ub2e8 \ud45c\uc2dc\uc904\uc5d0\uc11c \ub2e4\uc74c\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4. <\/span><strong>\ud30c\uc77c<\/strong><span style=\"font-weight: 400;\">, <\/span><strong>\uc5f4\uae30<\/strong><span style=\"font-weight: 400;\">\ub97c \uc120\ud0dd\ud558\ub294 \uac83\ubcf4\ub2e4 <em>index.html<\/em> \ud30c\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc\ud55c \ud3f4\ub354(\ub610\ub294 zip \ud3f4\ub354)\uc5d0\uc11c \uc2e4\ud589\ud569\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 URL\uc744 \uc0b4\ud3b4\ubcf4\uba74 \ub85c\uceec \ud30c\uc77c\uc758 \uacbd\ub85c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc81c\ucd9c\uc744 \ud074\ub9ad\ud574\ub3c4 \uc544\ubb34 \uc791\uc5c5\ub3c4 \uc218\ud589\ud558\uc9c0 \uc54a\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/htmlform.png\" alt=\"The screenshot of the survey from created during the freecode camp Survery lesson\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uadf8\ub807\ub2e4\uba74 \ubb38\uc81c\ub294 \uc5b4\ub5bb\uac8c \uc778\ud130\ub137\uc5d0 \ubc30\ud3ec\ud558\uace0 \uc5b4\ub5a4 \uc791\uc5c5\uc744 \uc218\ud589\ud558\uac8c \ud560 \uac83\uc778\uac00 \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ud074\ub9ad \ud6c4 \uc2e4\ud589\ud560 \ubc31\uc5d4\ub4dc \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uadf8 \ucf54\ub4dc\uac00 \uc591\uc2dd \ucf58\ud150\uce20\ub97c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ud558\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/span><\/p>\n<h2>2\ub2e8\uacc4 - Git, Github, Netlify<\/h2>\n<p><span style=\"font-weight: 400;\">\uc774 \uc591\uc2dd\uc744 \uc778\ud130\ub137\uc5d0 \uc2e4\uc2dc\uac04\uc73c\ub85c \ubc30\ud3ec\ud558\ub294 \uac83\ubd80\ud130 \uc2dc\uc791\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 Netlify\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uac00\uc7a5 \uba3c\uc800 \ud574\uc57c \ud560 \uc77c\uc740 <\/span><a href=\"https:\/\/docs.netlify.com\/cli\/get-started\/\"><span style=\"font-weight: 400;\">Netlify CLI<\/span><\/a><span style=\"font-weight: 400;\"> \uac00 \uc124\uce58\ub418\uc5b4 \uc788\uace0 \ub85c\uadf8\uc778\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4. \uc124\uce58\ub418\uc5b4 \uc788\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \uac00\uc7a5 \ube60\ub978 \ubc29\ubc95\uc740 \ud130\ubbf8\ub110\uc5d0 \uc9c1\uc811 \uc785\ub825\ud558\ub294 \uac83\uc785\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">npm \uc124\uce58 netlify-cli -g<\/pre>\n<p><span style=\"font-weight: 400;\">\uc790\uc138\ud55c \ub0b4\uc6a9\uc740 <a href=\"https:\/\/docs.netlify.com\/cli\/get-started\/\">Netlify \uc2dc\uc791\ud558\uae30 \ubb38\uc11c<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uc785\ub825 <\/span><em><span style=\"font-weight: 400;\">\ub137\ub77c\uc774\ud30c\uc774 \ubc84\uc804<\/span><\/em><span style=\"font-weight: 400;\"> \ud604\uc7ac \ub0b4 \ud130\ubbf8\ub110\uc5d0\uc11c <\/span><em><span style=\"font-weight: 400;\">NETLIFY-CLI\/15.6.0 WIN32-X64 NODE-V18.5.0<\/span><\/em><span style=\"font-weight: 400;\">. \ub530\ub77c\uc11c \uc124\uce58 \ubc0f \uc900\ube44\uac00 \uc644\ub8cc\ub41c \uac83\uc73c\ub85c \uc54c\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uadf8\ub7f0 \ub2e4\uc74c \ub2e4\uc74c\uc744 \uc785\ub825\ud569\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">netlify \ub85c\uadf8\uc778<\/span><\/em><span style=\"font-weight: 400;\"> \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. Netflify \ub85c\uadf8\uc778 \uc591\uc2dd\uc73c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \ubaa8\ub4e0 \uac83\uc774 \ubc30\ud3ec \ub2e8\uacc4\ub85c \uc774\ub3d9\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ub85c\uceec\uc5d0\uc11c \ud14c\uc2a4\ud2b8\ud574\uc57c \ud569\ub2c8\ub2e4. \ub300\ubd80\ubd84\uc758 \uac1c\ubc1c\uc790\uac00 \uadf8\ub807\uac8c \ud558\uac70\ub4e0\uc694. \uc774\ub97c \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud569\ub2c8\ub2e4. <\/span><span style=\"font-weight: 400;\">\ub137\ub77c\uc774\ud30c\uc774 \uac1c\ubc1c<\/span><span style=\"font-weight: 400;\"> \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ucd9c\ub825\ub418\uace0 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc591\uc2dd\uc774 \uc5f4\ub9bd\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">Netlify \uac1c\ubc1c \u25c8 \u25c8\r\n\uc77c\ubc18 \ucee8\ud14d\uc2a4\ud2b8 \ud658\uacbd \ubcc0\uc218 \ubb34\uc2dc: LANG(\ud504\ub85c\uc138\uc2a4\uc5d0\uc11c \uc815\uc758\ub428)\r\n\uc571 \uc11c\ubc84\uac00 \uac10\uc9c0\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. \ub2e8\uc21c \uc815\uc801 \uc11c\ubc84 \uc0ac\uc6a9\r\n\ud30c\uc77c\uc744 \uc81c\uacf5\ud560 \uacf5\uc6a9 \ud3f4\ub354\ub97c \ud655\uc778\ud560 \uc218 \uc5c6\uc74c. \ud604\uc7ac \uc791\uc5c5 \ub514\ub809\ud130\ub9ac \uc0ac\uc6a9\r\n\uac1c\ubc1c \uc11c\ubc84 \uc124\uc815\uc744 \uc9c0\uc815\ud558\ub824\uba74 [dev] \uc139\uc158\uc774 \uc788\ub294 netlify.toml \ud30c\uc77c\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.\r\n\ubb38\uc11c \ucc38\uc870: https:\/\/cli.netlify.com\/netlify-dev#project-detection\r\n\"freecodecamp-survey\"\uc5d0\uc11c \uc815\uc801 \uc11c\ubc84 \uc2e4\ud589\ud558\uae30\r\n\ub85c\uceec \uac1c\ubc1c \uc11c\ubc84 \uc124\uc815\ud558\uae30\r\n\r\n3999\ub85c \uc218\uc2e0 \ub300\uae30 \uc911\uc778 \uc815\uc801 \uc11c\ubc84\r\n\r\n.gitignore \ud30c\uc77c\uc5d0 \ub85c\uceec .netlify \ud3f4\ub354 \ucd94\uac00\ud558\uae30...\r\n\r\n   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n   \u2502 \u2502\r\n   https:\/\/localhost:8888 \uc5d0\uc11c \uc11c\ubc84 \uc900\ube44 \uc644\ub8cc \u2502 \u2502 \u25c8 \uc11c\ubc84 \uc900\ube44 \uc644\ub8cc \u2502 \u2502 \u2502\r\n   \u2502 \u2502\r\n   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/pre>\n<p><span style=\"font-weight: 400;\">\ube0c\ub77c\uc6b0\uc800 URL \ud45c\uc2dc\uc904\uc744 \ub2e4\uc2dc \uc0b4\ud3b4\ubcf4\uba74 \ub2ec\ub77c\uc9c4 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub85c\uceec \ud30c\uc77c\uc774 \uc544\ub2cc \uc6f9 \uc0ac\uc774\ud2b8 \uc8fc\uc18c\ucc98\ub7fc \ubcf4\uc785\ub2c8\ub2e4. \ucd95\ud558\ud569\ub2c8\ub2e4. \ubc29\uae08 \uccab \ubc88\uc9f8 \ub85c\uceec \uc11c\ubc84\ub97c \uc2e4\ud589\ud558\uc5ec HTML \ubc0f CSS \ud30c\uc77c\uc744 \uc81c\uacf5\ud588\uc2b5\ub2c8\ub2e4.<\/span><span style=\"font-weight: 400;\">\uc5d0\ud2c0\ub9ac\ud30c\uc774 \uac1c\ubc1c<\/span><span style=\"font-weight: 400;\">! \ucef4\ud4e8\ud130\uc5d0\uc11c \uc6f9\uc0ac\uc774\ud2b8\uac00 \uc2e4\ud589\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc778\ud130\ub137\uc758 \ubaa8\ub4e0 \uc0ac\ub78c\uc774 \uc18c\uc2a4 \ucf54\ub4dc\uc640 \uc0ac\uc774\ud2b8 \uc790\uccb4\uc5d0 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">GitHub(\ub610\ub294 GitLab, Heptapod, \uae30\ud0c0 \ucf54\ub4dc \uc18c\uc2a4 \ud638\uc2a4\ud305 \uc194\ub8e8\uc158 \ub4f1 \ub2e4\uc591\ud55c \uc194\ub8e8\uc158\uc774 \uc788\uc2b5\ub2c8\ub2e4!)\ub85c \uc774\ub3d9\ud558\uc5ec \uc0c8 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. \ubc29\ubb38<\/span><a href=\"https:\/\/github.com\/new\"> <span style=\"font-weight: 400;\">https:\/\/github.com\/new<\/span><\/a><span style=\"font-weight: 400;\"> \ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc774\uc81c \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \ub9c8\ubc95\uc0ac \uc0dd\uc131 \ub2e8\uacc4\uc5d0 \ub4e4\uc5b4\uc654\uc2b5\ub2c8\ub2e4. \uc870\uc9c1, \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \uc774\ub984 \ubc0f \uc124\uba85\ub9cc \uc124\uc815\ud55c \ud6c4 <\/span><i><span style=\"font-weight: 400;\">\ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \ub9cc\ub4e4\uae30<\/span><\/i><span style=\"font-weight: 400;\"> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/githubRepoCreation.png\" alt=\"A screenshot of Github's repository creation wizard\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/intialGithubRepo.png\" alt=\"A screenshot of a newly intitialized Github repo\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc791\uc5c5 \ud3f4\ub354\ub97c \ubcc0\ud658\ud558\ub294 \ub370 \ud544\uc694\ud55c \ubaa8\ub4e0 \uc9c0\uce68\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. <em>git<\/em> \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \uc5f4\uace0 GitHub \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc5f0\uacb0\ud569\ub2c8\ub2e4. \uc81c\uac00 \ud130\ubbf8\ub110\uc5d0 \uc785\ub825\ud55c \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4(\uc544\ub798 \ub0b4\uc6a9\uc744 \ubcf5\uc0ac\ud558\uc5ec \ud130\ubbf8\ub110\uc5d0 \ubd99\uc5ec\ub123\uac70\ub098 \uc544\ub798 \uac01 \uc904 \ub4a4\uc5d0 Enter \ud0a4\ub97c \ub20c\ub7ec \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4). \ucc38\uace0\ub85c 6\ubc88\uc9f8 \uc904\uc744 \ud504\ub85c\uc81d\ud2b8 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac URL\ub85c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4:)<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">echo \"# myproject\" &gt;&gt; README.md\r\ngit init\r\ngit \ucd94\uac00 README.md\r\ngit commit -m \"\uccab \ubc88\uc9f8 \ucee4\ubc0b\"\r\ngit \ube0c\ub79c\uce58 -M main\r\ngit remote add origin https:\/\/github.com\/ldoguin\/myproject.git\r\ngit push -u origin main<\/pre>\n<p><span style=\"font-weight: 400;\">\uc774\uac83\uc774 \uacb0\uacfc \ud130\ubbf8\ub110 \ucd9c\ub825\uc785\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">[C:\\Code\\Couchbase\\myproject] $ echo \"# myproject\" &gt;&gt; README.md\r\n[C:\\Code\\Couchbase\\myproject] $ ls\r\n\r\n    \ub514\ub809\ud1a0\ub9ac C:\\Code\\Couchbase\\myproject\r\n\r\n\ubaa8\ub4dc \ub9c8\uc9c0\ub9c9 \uc4f0\uae30 \uc2dc\uac04 \uae38\uc774 \uc774\ub984\r\n---- ------------- ------ ----\r\n-a---- 8\/4\/2023 12:11 PM 28 README.md\r\n\r\n[C:\\Code\\Couchbase\\myproject] $ git init\r\n\ud78c\ud2b8: \ucd08\uae30 \ube0c\ub79c\uce58\uc758 \uc774\ub984\uc73c\ub85c '\ub9c8\uc2a4\ud130'\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uc774 \uae30\ubcf8 \ube0c\ub79c\uce58 \uc774\ub984\r\n\ud78c\ud2b8: \ubcc0\uacbd\ub420 \uc218 \uc788\ub2e4. \ubaa8\ub4e0 \ube0c\ub79c\uce58\uc5d0 \uc0ac\uc6a9\ud560 \ucd08\uae30 \ube0c\ub79c\uce58 \uc774\ub984\uc744 \uad6c\uc131\ud558\ub824\uba74\r\nhint: \uc0c8 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uc758 \ubaa8\ub4e0 \ube0c\ub79c\uce58\uc5d0 \uc0ac\uc6a9\ud560 \ucd08\uae30 \ube0c\ub79c\uce58 \uc774\ub984\uc744 \uad6c\uc131\ud558\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ud638\ucd9c\ud55c\ub2e4:\r\nhint:\r\nhint: git config --global init.defaultBranch \r\nhint:\r\nhint: '\ub9c8\uc2a4\ud130' \ub300\uc2e0 \uc77c\ubc18\uc801\uc73c\ub85c \uc120\ud0dd\ub418\ub294 \uc774\ub984\uc740 '\uba54\uc778', '\ud2b8\ub801\ud06c' \ubc0f\r\nhint: 'development'. \uc774 \uba85\ub839\uc73c\ub85c \ubc29\uae08 \uc0dd\uc131\ud55c \ube0c\ub79c\uce58\uc758 \uc774\ub984\uc744 \ubc14\uafc0 \uc218 \uc788\ub2e4:\r\nhint:\r\n\ud78c\ud2b8: git \ube0c\ub79c\uce58 -m \r\nC:\/\uc0ac\uc6a9\uc790\/\ub85c\ub791 \ub3c4\uae34\/\ubb38\uc11c\/\uce74\uc6b0\uce58\ubca0\uc774\uc2a4\/\ub9c8\uc774\ud504\ub85c\uc81d\ud2b8\/.git\/\uc5d0\uc11c \ube48 Git \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ucd08\uae30\ud654\ud588\uc2b5\ub2c8\ub2e4.\r\n[C:\\Code\\Couchbase\\myproject] $ git config --global init.defaultBranch main\r\n[C:\\Code\\Couchbase\\myproject] $ git branch -m main\r\n[C:\\Code\\Couchbase\\myproject] $ git add .\\README.md .\\index.html .\\styles.css\r\n[C:\\Code\\Couchbase\\myproject] $ git commit -m \"\uccab \ubc88\uc9f8 \ucee4\ubc0b\"\r\n[\uba54\uc778 (\ub8e8\ud2b8 \ucee4\ubc0b) 356ece7] \uccab \ucee4\ubc0b\r\n \ud30c\uc77c 3\uac1c \ubcc0\uacbd, 245\uac1c \uc0bd\uc785(+)\r\n create mode 100644 README.md\r\n create mode 100644 index.html\r\n create mode 100644 styles.css\r\n[C:\\Code\\Couchbase\\myproject] $ git remote add origin https:\/\/github.com\/ldoguin\/myproject.git\r\n[C:\\Code\\Couchbase\\myproject] $ git push -u origin main\r\n\uc624\ube0c\uc81d\ud2b8 \uc5f4\uac70\ud558\uae30: 5, done.\r\n\uc624\ube0c\uc81d\ud2b8 \uce74\uc6b4\ud2b8\ud558\uae30: 100%(5\/5), \uc644\ub8cc.\r\n\ucd5c\ub300 8\uac1c\uc758 \uc2a4\ub808\ub4dc\ub97c \uc0ac\uc6a9\ud55c \ub378\ud0c0 \uc555\ucd95\r\n\uac1d\uccb4\ub97c \uc555\ucd95\ud558\ub294 \uc911\uc785\ub2c8\ub2e4: 100%(4\/4), \uc644\ub8cc.\r\n\uac1d\uccb4 \uc4f0\uae30: 100%(5\/5), 1.95KiB | 999.00KiB\/s, \uc644\ub8cc.\r\n\ucd1d 5(\ub378\ud0c0 0), \uc7ac\uc0ac\uc6a9 0(\ub378\ud0c0 0), \ud329 \uc7ac\uc0ac\uc6a9 0\r\nTo https:\/\/github.com\/ldoguin\/myproject.git\r\n * [\uc0c8 \ube0c\ub79c\uce58] \uba54\uc778 -&gt; \uba54\uc778\r\n'origin\/main'\uc744 \ucd94\uc801\ud558\ub3c4\ub85d \uc124\uc815\ub41c \ube0c\ub79c\uce58 'main'.\r\n[C:\\Code\\Couchbase\\myproject] $<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c Github \ud398\uc774\uc9c0\ub85c \ub3cc\uc544\uac00\uc11c \ub2e4\uc2dc \ub85c\ub4dc\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4:<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/firstCommitReo.png\" alt=\"A screenshot of the github repository after an intial commit was pushed\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\ucd95\ud558\ud569\ub2c8\ub2e4. \uc774\uc81c \ub204\uad6c\ub098 \ubcf4\uace0, \ubc30\uc6b0\uace0, \uae30\uc5ec\ud560 \uc218 \uc788\ub3c4\ub85d \ucf54\ub4dc\uac00 Github\uc5d0 \uacf5\uac1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ud504\ub85c\ub355\uc158 \ub2e8\uacc4\uc785\ub2c8\ub2e4! \uc6f9\uc0ac\uc774\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubd05\uc2dc\ub2e4 \ud83d\udcaa<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\ubc29\ubb38\ud558\uae30<\/span><a href=\"https:\/\/app.netlify.com\/start\/deploy\"> <span style=\"font-weight: 400;\">https:\/\/app.netlify.com\/start\/deploy<\/span><\/a><span style=\"font-weight: 400;\">. \uadf8\ub7ec\uba74 Netify\uc758 \uc0c8 \ud504\ub85c\uc81d\ud2b8 \ub9c8\ubc95\uc0ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. \uc2dc\uc791\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294 \ub2e4\uc591\ud55c \ubc84\ud2bc, GitHub, GitLab, Bitbucket, AzureDevops\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. GitHub\ub97c \ud074\ub9ad\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyWizard.png\" alt=\"A screenshot of the Netlify Wizard for new project creation\" \/><\/p>\n<p><span style=\"font-weight: 400;\">GitHub \ud504\ub85c\ud544\uc744 Netlify\uc5d0 \uc5f0\uacb0\ud560\uc9c0 \ubb3b\ub294 \ucc3d\uc774 \uba87 \uac1c \ud45c\uc2dc\ub429\ub2c8\ub2e4. \uacc4\uc18d \uc9c4\ud589\ud558\uba74 \ub2e4\uc74c \ud398\uc774\uc9c0\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyWizard2.png\" alt=\"A screenshot of the second step of Netlify's project creation wizard after picking Github\" \/><\/p>\n<p><span style=\"font-weight: 400;\">GitHub \uc870\uc9c1\uc5d0 Netlify \uc571\uc774 \uc124\uce58\ub418\uc5b4 \uc788\uc9c0 \uc54a\ub2e4\ub294 \uba54\uc2dc\uc9c0\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. <\/span><strong>GitHub\uc5d0\uc11c Netlify \uad6c\uc131\ud558\uae30<\/strong><span style=\"font-weight: 400;\">\ub97c \ud074\ub9ad\ud558\uba74 Netlify\ub97c \uc124\uce58\ud560 GitHub \uc870\uc9c1\uacfc \uc561\uc138\uc2a4 \uad8c\ud55c\uc744 \ubd80\uc5ec\ud560 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \uc120\ud0dd\ud558\ub77c\ub294 \ud478\ud504 \ucc3d\uc774 \uc5f4\ub9bd\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/ghAuthz.png\" alt=\"A screenshot of Github's authorization matrix\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uae30\ubcf8\uac12\uc744 \uadf8\ub300\ub85c \ub450\uace0 \ub2e4\uc74c \ub2e8\uacc4\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4. \uc774\uc81c\ubd80\ud130 GitHub \uacc4\uc815\uc758 \ubaa8\ub4e0 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/NetlifyProjectList.png\" alt=\"A screenshot of Netlify's project List showing linked Github project \" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uae30\ubcf8\uac12\uc744 \uadf8\ub300\ub85c \ub450\uace0 <\/span><span style=\"font-weight: 400;\"><strong>\ubc30\ud3ec <\/strong><\/span><span style=\"font-weight: 400;\"><strong>\ub0b4 \ud504\ub85c\uc81d\ud2b8<\/strong><\/span><i><span style=\"font-weight: 400;\">:<\/span><\/i><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyConfigureroject.png\" alt=\"A screenshot of the default Netlify project configuration\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">\uc778\ud130\ub137 \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uc0c8\ub85c \ubc30\ud3ec\ub41c \ub9c1\ud06c\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">https:\/\/jolly-sfogliatella-3e6c07.netlify.app\/<\/span><\/em><span style=\"font-weight: 400;\">. \ub137\ub77c\uc774\ud30c\uc774\ub294 \uc0cc\ub4dc\ubc15\uc2a4 \ud658\uacbd\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">netlify.app<\/span><\/em><span style=\"font-weight: 400;\"> \ub3c4\uba54\uc778\uc744 \uc0ac\uc6a9\ud558\uba74 \uc790\uccb4 \ub3c4\uba54\uc778 \uc774\ub984 \uc5c6\uc774\ub3c4 \ubc30\ud3ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyProjectCreatedWiz.png\" alt=\"A screenshot of a newly created Project\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\ucd95\ud558\ud569\ub2c8\ub2e4, \uc774\uc81c \uc6f9\uc0ac\uc774\ud2b8\uac00 \uc778\ud130\ub137\uc5d0 \uacf5\uac1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc7a0\uc2dc \uc2dc\uac04\uc744 \ub0b4\uc5b4 \ucd95\ud558\ud574 \uc8fc\uc138\uc694 \ud83c\udf89.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \ub2e4\uc74c\uc744 \uc785\ub825\ud558\uc5ec \uc774 Netlify \ud504\ub85c\uc81d\ud2b8\ub97c \uc5f0\uacb0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">\ub137\ub77c\uc774\ud30c\uc774 \ub9c1\ud06c<\/span><\/em><span style=\"font-weight: 400;\"> \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. \uc635\uc158 \ubaa9\ub85d\uc774 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uae30\ubcf8\uac12\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">\ud604\uc7ac git \uc6d0\uaca9 \uc624\ub9ac\uc9c4 \uc0ac\uc6a9(https:\/\/github.com\/yourOrg\/yourProject)<\/span><\/em><span style=\"font-weight: 400;\">. GitHub\ub97c \ud1b5\ud574 \ubc30\ud3ec\ud588\uc73c\ubbc0\ub85c Netlify\ub294 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uc758 git \uc815\ubcf4\ub97c \uac00\uc9c0\uace0 \uc788\uc73c\uba70 \uc5b4\ub5a4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0ac\uc6a9\ud560\uc9c0 \uc720\ucd94\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4(\uc774 \uc2dc\uc810\uc5d0\ub294 \ud504\ub85c\uc81d\ud2b8\uac00 \ud558\ub098\ub9cc \uc788\uc744 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4). \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">[C:\\Code\\Couchbase\\myproject] $ netlify \ub9c1\ud06c\r\n\r\n\ub137\ub77c\uc774\ud30c\uc774 \ub9c1\ud06c\ub294 \uc774 \ud3f4\ub354\ub97c \ub137\ub77c\uc774\ud30c\uc774\uc758 \uc0ac\uc774\ud2b8\uc5d0 \uc5f0\uacb0\ud569\ub2c8\ub2e4.\r\n\r\n? \uc774 \ud3f4\ub354\ub97c \uc0ac\uc774\ud2b8\uc5d0 \uc5b4\ub5bb\uac8c \uc5f0\uacb0\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c? \ud604\uc7ac git \uc6d0\uaca9 \uc624\ub9ac\uc9c4 \uc0ac\uc6a9(https:\/\/github.com\/ldoguin\/myproject)\r\n\r\n'https:\/\/github.com\/ldoguin\/myproject'\uc5d0 \uc5f0\uacb0\ub41c \uc0ac\uc774\ud2b8 \ucc3e\uae30...\r\n\r\n\ub514\ub809\ud130\ub9ac \uc5f0\uacb0\r\n\r\n\uad00\ub9ac\uc790 URL: https:\/\/app.netlify.com\/sites\/jolly-sfogliatella-3e6c07\r\n\uc0ac\uc774\ud2b8 URL: https:\/\/jolly-sfogliatella-3e6c07.netlify.app\r\n\r\n\uc774\uc81c \uc774 \ub514\ub809\ud1a0\ub9ac\uc5d0\uc11c \ub2e4\ub978 `netlify` cli \uba85\ub839\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n[C:\\Code\\Couchbase\\myproject] $<\/pre>\n<p>\uc774\uc81c \uba87 \uac00\uc9c0\ub97c \uc2dc\ub3c4\ud574 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc591\uc2dd\uc5d0 \ud83d\udc3c \uc774\ubaa8\ud2f0\ucf58\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. In <em>index.html<\/em>\uc5d0\uc11c 9\ubc88\uc9f8 \uc904\uc744 \uc218\uc815\ud569\ub2c8\ub2e4: <em>&lt;h1 id=&quot;&rdquo;title&rdquo;&quot; class=&quot;&rdquo;text-center&rdquo;&quot;&gt;\uc124\ubb38 \uc870\uc0ac \uc591\uc2dd&lt;\/h1&gt;<\/em> \uc5d0 <em>&lt;h1 id=&quot;&rdquo;title&rdquo;&quot; class=&quot;&rdquo;text-center&rdquo;&quot;&gt;\uc124\ubb38\uc870\uc0ac \uc591\uc2dd \ud83d\udc3c&lt;\/h1&gt;<\/em><\/p>\n<p><span style=\"font-weight: 400;\">\uadf8\ub7f0 \ub2e4\uc74c \ud30c\uc77c\uc744 \uc800\uc7a5\ud558\uace0 \uc774 \ubcc0\uacbd \uc0ac\ud56d\uc744 Github\uc5d0 \ud478\uc2dc\ud569\ub2c8\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c \ud130\ubbf8\ub110\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud569\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">netlify open:site<\/span><\/em><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">[C:\\Code\\Couchbase\\myproject] $ git add .\\index.html\r\n[C:\\Code\\Couchbase\\myproject] $ git commit -m\"Panda\"\r\n[main caa6f87] Panda\r\n 1 \ud30c\uc77c \ubcc0\uacbd, 1 \uc0bd\uc785(+), 1 \uc0ad\uc81c(-)\r\n[C:\\Code\\Couchbase\\myproject] $ git push\r\n\uac1d\uccb4\ub97c \uc5f4\uac70\ud558\ub294 \uc911\uc785\ub2c8\ub2e4: 5, done.\r\n\uc624\ube0c\uc81d\ud2b8 \uce74\uc6b4\ud2b8 \uc911: 100%(5\/5), \uc644\ub8cc.\r\n\ucd5c\ub300 8\uac1c\uc758 \uc2a4\ub808\ub4dc\ub97c \uc0ac\uc6a9\ud55c \ub378\ud0c0 \uc555\ucd95\r\n\uac1d\uccb4\ub97c \uc555\ucd95\ud558\ub294 \uc911\uc785\ub2c8\ub2e4: 100%(3\/3), \uc644\ub8cc.\r\n\uc624\ube0c\uc81d\ud2b8 \uc4f0\uae30: 100%(3\/3), 360\ubc14\uc774\ud2b8 | 180.00KiB\/s, \uc644\ub8cc.\r\n\ucd1d 3(\ub378\ud0c0 1), \uc7ac\uc0ac\uc6a9 0(\ub378\ud0c0 0), \ud329 \uc7ac\uc0ac\uc6a9 0\r\nremote: \ub378\ud0c0 \ud574\uacb0 \uc911: 100%(1\/1), \ub85c\uceec \uc624\ube0c\uc81d\ud2b8 1\uac1c\ub85c \uc644\ub8cc.\r\nhttps:\/\/github.com\/ldoguin\/myproject.git\r\n   356CE7..8A2EBE2 \uba54\uc778 -&gt; \uba54\uc778\r\n[C:\\Code\\Couchbase\\myproject] $ netlify open:site\r\n\"jolly-sfogliatella-3e6c07\" \uc0ac\uc774\ud2b8 URL\uc744 \uc5fd\ub2c8\ub2e4:\r\n&gt; https:\/\/jolly-sfogliatella-3e6c07.netlify.app<\/pre>\n<p>\uc544\uc8fc \uba4b\uc9c4 \uc77c\uc774 \uc77c\uc5b4\ub098\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uae43\ud5c8\ube0c \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uac00 \ub137\ud50c\ub77c\uc774\uc5d0 \uc5f0\uacb0\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc0c8 \ubc30\ud3ec\ub294 \ub137\ud50c\ub77c\uc774\uc5d0\uc11c \uc790\ub3d9\uc73c\ub85c \uc218\ud589\ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc6f9\uc0ac\uc774\ud2b8\ub97c \uc5f4\uba74 \ud32c\ub354 &lt;3\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><span style=\"font-weight: 400;\">\uc774 \uc2dc\uc810\uc5d0\ub294 \ucf54\ub4dc\ub97c \ubcf4\uad00\ud558\ub294 Github \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac\uac00 \uc788\uc73c\uba70, Netlify\uc5d0 \ud1b5\ud569\ub418\uc5b4 \uc0c8 \ucf54\ub4dc\ub97c \ud478\uc2dc\ud560 \ub54c \uc790\ub3d9\uc73c\ub85c \uc0c8 \ubc30\ud3ec\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ub610\ud55c <\/span><span style=\"font-weight: 400;\">netlify<\/span><span style=\"font-weight: 400;\"> CLI\ub97c \uc791\uc5c5 \ud3f4\ub354\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. \ubc31\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4!<\/span><\/p>\n<h2>3\ub2e8\uacc4 - \ubc31\uc5d4\ub4dc<\/h2>\n<p><span style=\"font-weight: 400;\">\uc774 \uc7a5\uc5d0\uc11c\ub294 \ub2e4\uc74c \uc9c8\ubb38\uc5d0 \ub300\ud55c \ub2f5\ubcc0\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4: \ub204\uad70\uac00 \uc591\uc2dd\uc744 \uc791\uc131\ud558\uace0 \ub2e4\uc74c\uc744 \ud074\ub9ad\ud558\uba74 \uc5b4\ub5bb\uac8c \ub418\ub098\uc694? <strong>\uc81c\ucd9c<\/strong> ?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uc9c0\uae08 \ub2f9\uc7a5 \ub300\ub2f5\uc740 \uc544\ubb34\uac83\ub3c4 \uc5c6\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ubc14\uafd4\ubd05\uc2dc\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc791\uc131\ud558\uba74 \ub429\ub2c8\ub2e4. \ub204\uad70\uac00 \uc720\ud6a8\ud55c \uc815\ubcf4\ub97c \uc785\ub825\ud558\uba74 \ud31d\uc5c5 \uc54c\ub9bc\uc744 \ud45c\uc2dc\ud558\uace0 <strong>\uc81c\ucd9c\ud558\uae30<\/strong>. \uadc0\ud558\uc758 <em>index.html<\/em> \ud30c\uc77c\uc5d0 \ub2e4\uc74c\uc744 \ub123\uc2b5\ub2c8\ub2e4. <em>&lt;script&gt;<\/em> \ub9c8\uc9c0\ub9c9 \ub2eb\ub294 div \ud0dc\uadf8 \uc0ac\uc774\uc758 \ucf54\ub4dc <\/span><em><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/em><span style=\"font-weight: 400;\"> \uadf8\ub9ac\uace0 \ub2eb\ub294 \ubcf8\ubb38 \ud0dc\uadf8 \uc55e\uc5d0 <\/span><em><span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span><\/em><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">&lt;script&gt;\r\n\u00a0\u00a0const form = document.getElementById('survey-form'); &lt;1&gt;\r\n\u00a0\u00a0form.addEventListener('submit', handleForm); &lt;2&gt;\r\n\r\n\u00a0\u00a0async function handleForm(e) {\r\n\u00a0\u00a0\u00a0\u00a0e.preventDefault() &lt;3&gt;\r\n\u00a0\u00a0\u00a0\u00a0alert(\"Form Submission !\") &lt;4&gt;\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"nums:false lang:default decode:true\">ID\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud3fc\uc744 \ub098\ud0c0\ub0b4\ub294 Dom \uc694\uc18c\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.\r\n \uc81c\ucd9c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 \ud578\ub4e4\ud3fc \ud568\uc218\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.\r\n \uc591\uc2dd \uc81c\ucd9c\uc758 \uc790\uc5f0\uc2a4\ub7ec\uc6b4 \ub3d9\uc791\uc740 \ud398\uc774\uc9c0\ub97c \ub2e4\uc2dc \ub85c\ub4dc\ud558\ub294 \uac83\uc774\uc9c0\ub9cc, \uc6b0\ub9ac\ub294 \uadf8\ub7f4 \ud544\uc694\uac00 \uc5c6\uc73c\ubbc0\ub85c \uae30\ubcf8 \ub3d9\uc791\uc774 \uc77c\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \ud569\ub2c8\ub2e4.\r\n \uc54c\ub9bc \ud568\uc218\ub294 \uba54\uc2dc\uc9c0\uc640 \ud568\uaed8 \ud31d\uc5c5\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/pre>\n<p>\ucf54\ub4dc\ub97c \uc800\uc7a5\ud558\uace0 \ud398\uc774\uc9c0\ub97c \ub2e4\uc2dc \ub85c\ub4dc\ud55c \ud6c4 \uc591\uc2dd\uc744 \uc791\uc131\ud558\uace0 <strong>\uc81c\ucd9c<\/strong>\ub97c \uc785\ub825\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/formSubmission.png\" alt=\"A screenshot of a sucessfull form submission\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \uc0ac\uc6a9\uc790\uac00 \uc591\uc2dd\uc744 \uc81c\ucd9c\ud560 \ub54c \uc5b4\ub5a4 \uc77c\uc774 \uc77c\uc5b4\ub098\ub294\uc9c0 \uc54c\uc544\ubd24\uc73c\ub2c8 \uc870\uae08 \ub354 \ub098\uc544\uac00 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc591\uc2dd\uc758 \ub0b4\uc6a9\uc744 \uc0b4\ud3b4\ubcf4\uace0 \uc62c\ubc14\ub978 \ub370\uc774\ud130\ub97c JSON\uc73c\ub85c \uac00\uc838\uc62c \uc218 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uace0\uc790 \ud569\ub2c8\ub2e4. \uc774\ub984\uc5d0\ub294 \ubb38\uc790\uc5f4, \ub098\uc774\uc5d0\ub294 \uc815\uc218, \ucd94\ucc9c\uc5d0\ub294 \ubd80\uc6b8\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uadf8\ub9ac\uace0 HTML \ud655\uc778\ub780\uc774 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294 \uac83\uc73c\ub85c \ub098\ud0c0\ub0ac\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uac12\uc740 \uc544\ubb34 \uac12\ub3c4 \uc81c\uacf5\ud558\uc9c0 \uc54a\uc73c\uba70, \uc774 \ud655\uc778\ub780\uc744 \uc120\ud0dd\ud558\uba74 \uac12 \ud544\ub4dc\uc758 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ub2e4\ub978 \uc785\ub825 \ud544\ub4dc\uc778 \uc228\uae40\uc744 \ucd94\uac00\ud558\uc5ec \uae30\ubcf8\uac12\uc774 False\uac00 \ub418\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0yes<\/label><\/pre>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcfc \ud765\ubbf8\ub85c\uc6b4 \uc0c8 \uc904\uc774 \uba87 \uac00\uc9c0 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\"> const form = document.getElementById('survey-form');\r\n  form.addEventListener('submit', handleForm);\r\n\r\n  \ube44\ub3d9\uae30 \ud568\uc218 handleForm(e) { \r\n    e.preventDefault()\r\n    \r\n    const data = new FormData(e.target); \r\n    const value = Object.fromEntries(data.entries()); \r\n    const details = `name: ${value.name}\\nage: ${value.age}\\nrecommend: ${value.recommend}`; \r\n    console.log(details); \r\n  }<\/pre>\n<pre class=\"nums:false lang:default decode:true\">handleForm \ud568\uc218\uc758 \ub9e4\uac1c\ubcc0\uc218\ub294 \ub300\uc0c1\uc774\ub77c\ub294 \ud544\ub4dc\uac00 \uc788\ub294 \uac1d\uccb4(e)\uc785\ub2c8\ub2e4. \uc774 \ub300\uc0c1\uc740 FormData \uac1d\uccb4\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n FormData \uac1d\uccb4\ub294 JSON \uac1d\uccb4\ub85c \ubcc0\ud658\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n \uc774\uc81c JSON \uac1d\uccb4\uac00 \uc0dd\uacbc\uc73c\ubbc0\ub85c \uad00\uc2ec \uc788\ub294 \uac12\uc744 \ucd9c\ub825\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n \uc774\ubc88\uc5d0\ub294 \uacbd\uace0 \uc0c1\uc790\ub97c \ud45c\uc2dc\ud558\ub294 \ub300\uc2e0 \uc138\ubd80 \uc815\ubcf4 \ubb38\uc790\uc5f4\uc744 \ucf58\uc194\uc5d0 \ub85c\uae45\ud569\ub2c8\ub2e4. \ucf58\uc194\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c \ub3c4\uad6c\ub97c \ud1b5\ud574 \uc561\uc138\uc2a4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub514\ubc84\uae45\uc5d0 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/pre>\n<p>\uc815\ub9ac\uac00 \ub418\uc5c8\uc73c\ub2c8 \uc774\uc81c \ubcf8\uaca9\uc801\uc73c\ub85c Netlify \ud568\uc218\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Enter <em>NETLIFY \ud568\uc218:\uc0dd\uc131<\/em> \ub97c \uc785\ub825\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc740 \ub0b4\uc6a9\uc774 \ud45c\uc2dc\ub420 \uac83\uc785\ub2c8\ub2e4:<\/p>\n<pre class=\"nums:false lang:default decode:true\">[C:\\Code\\Couchbase\\myproject] $ netlify \ud568\uc218:create\r\n? \uc11c\ubc84\ub9ac\uc2a4 \ud568\uc218\ub97c \uc0dd\uc131\ud560 \ud568\uc218 \uc720\ud615\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4(Node\/Go).\r\nnetlify.toml \ub610\ub294 UI \uc124\uc815\uc5d0\uc11c \ud568\uc218 \ub514\ub809\ud130\ub9ac\uac00 \uc9c0\uc815\ub418\uc9c0 \uc54a\uc740 \uacbd\uc6b0\r\n? \uc800\uc7a5\uc18c\uc758 \uc0ac\uc774\ud2b8 \uae30\ubcf8 \ub514\ub809\ud1a0\ub9ac\ub97c \uae30\uc900\uc73c\ub85c \ud568\uc218\uac00 \uc704\uce58\ud560 \uacbd\ub85c\ub97c \uc785\ub825\ud569\ub2c8\ub2e4(netlify\/functions).\r\nnetlify\/functions\ub85c \uc0ac\uc774\ud2b8 \uc124\uc815 \uc5c5\ub370\uc774\ud2b8\ud558\uae30\r\n\uc0ac\uc774\ud2b8 \uc124\uc815\uc5d0\uc11c \ud568\uc218 \ub514\ub809\ud130\ub9ac netlify\/functions \uc5c5\ub370\uc774\ud2b8\ud558\uae30\r\n\ud568\uc218 \ub514\ub809\ud130\ub9ac netlify\/functions\uac00 \uc544\uc9c1 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc544\uc11c \uc0dd\uc131 \uc911...\r\n\ud568\uc218 \ub514\ub809\ud130\ub9ac netlify\/functions \uc0dd\uc131\ub428\r\n? \ud568\uc218 \uc5b8\uc5b4 \uc120\ud0dd \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\r\n? \ud15c\ud50c\ub9bf \uc120\ud0dd \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8-\ud5ec\ub85c-\uc6d4\ub4dc\r\n? \ud568\uc218 \uc774\ub984 \uc9c0\uc815: saveform\r\nsaveform \ud568\uc218 \uc0dd\uc131\ud558\uae30\r\nnetlify\\functions\\saveform\\saveform.js \uc0dd\uc131\r\n[C:\\Code\\Couchbase\\myproject] $<\/pre>\n<p><span style=\"font-weight: 400;\">\uc120\ud0dd <strong>\uc11c\ubc84\ub9ac\uc2a4<\/strong> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uace0, \uacbd\ub85c\uc5d0 \ub300\ud55c \ub2e4\uc74c \uc9c8\ubb38\uc740 \uae30\ubcf8\uac12\uc744 \uadf8\ub300\ub85c \ub450\uace0, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc5b8\uc5b4\ub85c \uc720\uc9c0\ud558\uace0, \uae30\ubcf8\uac12\uc744 \uc720\uc9c0\ud569\ub2c8\ub2e4. <em>\ud5ec\ub85c\uc6d4\ub4dc<\/em> \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\ubcf4\ub2e4 \ud568\uc218\uc758 \uc774\ub984\uc744 \uc9c0\uc815\ud558\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uc81c \ud568\uc218\ub294 <\/span><em><span style=\"font-weight: 400;\">\uc800\uc7a5 \uc591\uc2dd<\/span><\/em><span style=\"font-weight: 400;\">. \uc774\ub807\uac8c \ud558\uba74 netlify \ud3f4\ub354\uc5d0 \uc0c8 \ud30c\uc77c\uc774 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc2e4\ud589\ud558\uba74 <\/span><em><span style=\"font-weight: 400;\">\ub137\ub77c\uc774\ud30c\uc774 \uac1c\ubc1c<\/span><\/em><span style=\"font-weight: 400;\"> \uc774\uc81c \ub85c\uadf8\uc5d0 \uc0c8\ub85c\uc6b4 \uc904\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">\ub85c\ub4dc\ub41c \ud568\uc218 saveform https:\/\/localhost:8888\/.netlify\/functions\/saveform.\r\n\ud568\uc218 \uc11c\ubc84\uac00 62431\uc5d0\uc11c \uc218\uc2e0 \ub300\uae30 \uc911\uc785\ub2c8\ub2e4.<\/pre>\n<p>\uc989, \ub137\ub9ac\ud30c\uc774 \uac1c\ubc1c \uc11c\ubc84\uac00 \uc0c8\ub85c \uc0dd\uc131\ud55c \ud568\uc218\ub3c4 \uc11c\ube44\uc2a4\ud558\uace0 \uc788\ub2e4\ub294 \ub73b\uc785\ub2c8\ub2e4. \uc0c8\ub85c \uc0dd\uc131\ub41c \ud30c\uc77c\uc744 \uc0b4\ud3b4\ubcf4\uc138\uc694. <em>.\/netlify\/functions\/saveform\/saveform.js<\/em>.<\/p>\n<pre class=\"nums:false lang:default decode:true\">\/\/ \uc774\ubca4\ud2b8 \ubc0f \ucee8\ud14d\uc2a4\ud2b8 \uad00\ub828 \ubb38\uc11c https:\/\/docs.netlify.com\/functions\/build\/#code-your-function-2\r\nconst \ud578\ub4e4\ub7ec = async (event) =&gt; { \r\n  try {\r\n    const subject = event.queryStringParameters.name || 'World' \r\n    return {\r\n      statusCode: 200,\r\n      body: JSON.stringify({ message: `Hello ${subject}` }), \r\n      \/\/ \/\/ \ubc18\ud658\ud560 \uc218 \uc788\ub294 \ud0a4\uac00 \ub354 \uc788\uc2b5\ub2c8\ub2e4:\r\n      \/\/ \ud5e4\ub354: { \"headerName\": \"headerValue\", ... },\r\n      \/\/ isBase64Encoded: true,\r\n    }\r\n  } catch (error) {\r\n    \ubc18\ud658 { statusCode: 500, body: error.toString() } \r\n  }\r\n}\r\n\r\nmodule.exports = { \ud578\ub4e4\ub7ec }<\/pre>\n<pre class=\"nums:false lang:default decode:true\">\ud568\uc218\uc758 \uc2dc\uadf8\ub2c8\ucc98\uac00 \ube44\ub3d9\uae30(async \ud0a4\uc6cc\ub4dc)\uc774\uace0 \uc774\ubca4\ud2b8 \ub9e4\uac1c\ubcc0\uc218\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ube44\ub3d9\uae30\ub780 \ud568\uc218 \ub0b4\ubd80\uc758 \uc77c\ubd80 \ucf54\ub4dc\uac00 \ube44\ub3d9\uae30\uc801\uc77c \uc218 \uc788\uc73c\uba70, \uc77c\ubc18\uc801\uc73c\ub85c \ube44\ub3d9\uae30 \ud568\uc218\uac00 \ubc18\ud658\ud558\ub294 JavaScript Promess \uac1d\uccb4\ub97c \uad00\ub9ac\ud558\ub294 \ub300\uc2e0 await \ud0a4\uc6cc\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucf54\ub4dc\uac00 \uc2e4\ud589\ub420 \ub54c\uae4c\uc9c0 \uae30\ub2e4\ub9b4 \uc218 \uc788\uc74c\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.\r\n `event` \uac1d\uccb4\uc5d0\ub294 \ucffc\ub9ac \ub9e4\uac1c\ubcc0\uc218 \uc774\ub984\uc744 \uac00\uc838\uc62c \uc218 \uc788\ub294 `queryStringParameters`\uc640 \uac19\uc740 \uc77c\ubd80 \ud504\ub85c\ud37c\ud2f0\uc640 \uba54\uc11c\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4.\r\n \uc774 \ud568\uc218\ub294 HTTP \uc0c1\ud0dc \ucf54\ub4dc\uc640 \uac1d\uccb4 \ubcf8\ubb38\uc774 \ud3ec\ud568\ub41c JSON \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc57c \ud569\ub2c8\ub2e4. \ubaa8\ub4e0 \uac83\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \uc791\ub3d9\ud558\uba74 \uba54\uc2dc\uc9c0 \ud544\ub4dc\uc640 \ucf54\ub4dc 200\uc774 \ud3ec\ud568\ub41c JSON \ubcf8\ubb38\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. 2\ub85c \uc2dc\uc791\ud558\ub294 \ucf54\ub4dc\ub294 \uc815\uc0c1\uc801\uc73c\ub85c \uc9c4\ud589\ub418\uc5c8\uc74c\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.\r\n \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uba74 \uc0c1\ud0dc \ucf54\ub4dc 500\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. 5\ub85c \uc2dc\uc791\ud558\ub294 \ucf54\ub4dc\ub294 \uc11c\ubc84\uc5d0 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\uc74c\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ubcf8\ubb38 \ud544\ub4dc\uc5d0\ub294 \uc624\ub958\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/pre>\n<p>\uc0ac\uc6a9\uc790\uac00 \ub2e4\uc74c\uc744 \ud074\ub9ad\ud560 \ub54c \uc774 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc0ac\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <strong>\uc81c\ucd9c<\/strong>. \ub9c8\uc9c0\ub9c9 \ucf54\ub4dc \ub4a4\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uba74 \ub429\ub2c8\ub2e4. <em>\ucf58\uc194 \ub85c\uadf8<\/em> \ud638\ucd9c\ud569\ub2c8\ub2e4:<\/p>\n<pre class=\"nums:false lang:default decode:true\">  \u00a0\u00a0console.log(details);\r\n \r\n    const response = await fetch(\"\/.netlify\/functions\/saveform\", { \r\n      method: 'GET', \r\n      \ud5e4\ub354 { \r\n          'Content-Type': 'application\/json',\r\n        },\r\n    })\r\n    if (response.status == 200) { \r\n      console.log(await response.text());\r\n    }<\/pre>\n<pre class=\"nums:false lang:default decode:true\">fetch\ub294 \uc11c\ubc84\uc5d0 HTTP \uc694\uccad\uc744 \ubcf4\ub0b4\uae30 \uc704\ud574 \ud638\ucd9c\ud560 \uc218 \uc788\ub294 \uba54\uc11c\ub4dc\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 `\/.netlify\/functions\/saveform`\uc73c\ub85c \uc694\uccad\uc744 \ubcf4\ub0c5\ub2c8\ub2e4. \uc774 \uba54\uc11c\ub4dc\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \uc57d\uc18d\uc744 \ubc18\ud658\ud55c\ub2e4\ub294 \uc758\ubbf8\uc758 await \ud0a4\uc6cc\ub4dc\ub97c \uc8fc\ubaa9\ud558\uc138\uc694. \uc5ec\uae30\uc11c\ub294 \ud544\ub4dc \uc751\ub2f5\uc5d0 \ud504\ub85c\ubbf8\uc2a4 \uacb0\uacfc\ub97c \ud560\ub2f9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\r\n HTTP \uc694\uccad\uc5d0\ub294 HTTP \ub3d9\uc0ac\ub77c\uace0\ub3c4 \ud558\ub294 \uba54\uc11c\ub4dc\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 \uc11c\ubc84\uc5d0\uc11c \uc544\ubb34\uac83\ub3c4 \uc218\uc815\ud558\uc9c0 \uc54a\uace0 \uc815\ubcf4\ub97c \uac80\uc0c9\ud558\uace0 \uc788\uc73c\ubbc0\ub85c GET \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\r\n HTTP \uc694\uccad\uc5d0\ub294 [\ud5e4\ub354](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Content-Type)\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ud5e4\ub354\ub294 Content-type\uacfc \uac19\uc740 \ucd94\uac00 \uba54\ud0c0\ub370\uc774\ud130\ub97c \uc81c\uacf5\ud558\uba70, \uc5ec\uae30\uc11c\ub294 'application\/json'\uc73c\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83\uc774 \uc758\ubbf8\ud558\ub294 \ubc14\ub294 JSON\uc744 \uc870\uc791\ud558\uace0 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. \uc560\ud50c\ub9ac\ucf00\uc774\uc158\/\ud14d\uc2a4\ud2b8`\ub294 \ubaa8\ub4e0 \ud615\ud0dc\uc758 \ud14d\uc2a4\ud2b8\ub97c \uc870\uc791\ud55c\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. \uc774\ub97c [\ub9c8\uc784 \uc720\ud615 \ub610\ub294 \ubbf8\ub514\uc5b4 \uc720\ud615]\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4(https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/MIME_type).\r\n \uc11c\ubc84\uac00 \ubc18\ud658\ud55c \uc0c1\ud0dc \ucf54\ub4dc\ub97c \ud14c\uc2a4\ud2b8\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 200\uc774\uba74 \ubaa8\ub4e0 \uac83\uc774 \uc798 \ub418\uc5c8\ub2e4\ub294 \ub73b\uc785\ub2c8\ub2e4. \ucf58\uc194\uc5d0 \ud45c\uc2dc\ud560 \uba54\uc2dc\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/pre>\n<p><span style=\"font-weight: 400;\">\ucd94\uac00, \ucee4\ubc0b \ubc0f \ud478\uc2dc. <\/span><em><span style=\"font-weight: 400;\">netlify open:admin<\/span><\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyDeployList.png\" alt=\"A screenshot showing the Netlify site administrator overview, with the list of all deployments already done\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/netlifyFunctionReturnCall.png\" alt=\"A screenshot of the form page and the developer tools opened, showing the message returned by the Netlify function\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc774 \uc2dc\uc810\uc5d0\uc11c \uc778\ud130\ub137\uc5d0 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\uac00 \ubc30\ud3ec\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc5ec\uae30\uc11c\ub294 Netlify \ub9c8\ubc95\uc0ac\uac00 \ub9cc\ub4e0 \uae30\ubcf8 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\ub294 \uc591\uc2dd\uc758 \ucf58\ud150\uce20\ub97c \ud574\ub2f9 \ud568\uc218\ub85c \uc804\uc1a1\ud558\uace0 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.<\/span><\/p>\n<h2>4\ub2e8\uacc4 - \ub370\uc774\ud130\ubca0\uc774\uc2a4<\/h2>\n<p><span style=\"font-weight: 400;\">\uac00\uc7a5 \uba3c\uc800 \ud560 \uc77c\uc740 \uc591\uc2dd \uc138\ubd80 \uc815\ubcf4\ub97c \ud568\uc218\uc5d0 \uc804\uc1a1\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ub0b4\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c\ub294 GET \uba54\uc11c\ub4dc\ub97c POST \uba54\uc11c\ub4dc\ub85c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uac83\uc744 HTTP \uc694\uccad \uba54\uc11c\ub4dc\ub77c\uace0 \ud558\uba70 HTTP \ub3d9\uc0ac\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4. \uc804\uccb4 \ubaa9\ub85d\uc740 \ub2e4\uc74c\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Methods\"> <span style=\"font-weight: 400;\">MDN<\/span><\/a><span style=\"font-weight: 400;\">. Get \uba54\uc11c\ub4dc \uc694\uccad\uc740 \ub370\uc774\ud130\ub97c \uac80\uc0c9\ud558\ub294 \ub370\ub9cc \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ud3ec\uc2a4\ud2b8 \uba54\uc11c\ub4dc \uc694\uccad\uc740 \ub370\uc774\ud130\ub97c \uc0dd\uc131\ud558\uac70\ub098 \ubcc0\uacbd\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc774\uac83\uc774 \ubc14\ub85c \uc6b0\ub9ac\uac00 \uc6d0\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub204\uad70\uac00 \uc591\uc2dd\uc744 \uc81c\ucd9c\ud560 \ub54c Dababase\uc5d0 \uc0c8 \ud56d\ubaa9\uc744 \ub9cc\ub4e4\uace0 \uc2f6\uc2b5\ub2c8\ub2e4. HTTP \uc694\uccad\uc5d0\ub294 \uba54\uc11c\ub4dc, \uc77c\ubd80 \ud5e4\ub354(\uc694\uccad\uc5d0 \ub300\ud55c \uba54\ud0c0\ub370\uc774\ud130, \uc5ec\uae30\uc11c\ub294 \uc694\uccad\uc774 Content-Typ \ud5e4\ub354\uac00 \uc788\ub294 JSON \ucf58\ud150\uce20\ub77c\uace0 \uac00\uc815\ud569\ub2c8\ub2e4), \ubcf8\ubb38\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc694\uccad \ubcf8\ubb38\uc740 JSON \ud14d\uc2a4\ud2b8\uc785\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:js decode:true\"> \u00a0\u00a0const response = await fetch(\"\/.netlify\/functions\/saveform\", {\r\n      method: 'POST', \r\n      \ud5e4\ub354: {\r\n          'Content-Type': 'application\/json',\r\n        },\r\n        body: JSON.stringify(value), \r\n    })<\/pre>\n<pre class=\"nums:false lang:default decode:true\">\ub2e8\uc21c\ud788 \uc815\ubcf4\ub97c \uac80\uc0c9\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ubb34\uc5b8\uac00\ub97c \ubcc0\uacbd\ud558\uace0 \uc2f6\uae30 \ub54c\ubb38\uc5d0 HTTP \uba54\uc11c\ub4dc\ub97c POST\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.\r\n \uc694\uccad\uc5d0\ub294 \ubcf8\ubb38\ub3c4 \ud3ec\ud568\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 JSON \uac1d\uccb4\uc758 \ud14d\uc2a4\ud2b8 \ubc84\uc804\uc744 \uc804\uc1a1\ud569\ub2c8\ub2e4.<\/pre>\n<p><span style=\"font-weight: 400;\">\ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ubc31\uc5d4\ub4dc\ub85c\uc758 HTTP \uc694\uccad\uc774 \ubcc0\uacbd\ub418\uc5c8\uc73c\ubbc0\ub85c \uc774\uc81c \ubc31\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc218\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:js decode:true\">const \ud578\ub4e4\ub7ec = async (event) =&gt; {\r\n  try {\r\n    var data = JSON.parse(event.body); \r\n    return {\r\n      statusCode: 200,\r\n      body: JSON.stringify({ name: data.name }) \r\n    }\r\n  } catch (error) {\r\n    \ubc18\ud658 { statusCode: 500, body: error.toString() }\r\n  }\r\n}\r\n\r\nmodule.exports = { \ud578\ub4e4\ub7ec }<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"nums:false lang:default decode:true\">\uc774\ubca4\ud2b8 \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uba74 \uc694\uccad\uc758 \ubcf8\ubb38\uc744 \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud14d\uc2a4\ud2b8\uc774\ubbc0\ub85c \uc774 \ud14d\uc2a4\ud2b8\ub97c JSON \uac1d\uccb4\ub85c \ud30c\uc2f1\ud558\uc5ec `data`\ub77c\ub294 \ud544\ub4dc\uc5d0 \ud560\ub2f9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n JSON \uac1d\uccb4\ub97c \uc218\uc2e0\ud588\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574 \ubc18\ud658\ub41c \uba54\uc2dc\uc9c0\ub97c \ubcc0\uacbd\ud558\uace0 `data.name` \ud544\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/pre>\n<p>\uc6f9 \uac1c\ubc1c \ucf58\uc194\uc5d0 \ub2e4\ub978 \uba54\uc2dc\uc9c0\uac00 \ud45c\uc2dc\ub418\uc5b4\uc57c \ud569\ub2c8\ub2e4. <em>{\"name\":\"yourName\"}<\/em>.<\/p>\n<p><span style=\"font-weight: 400;\">\uc591\uc2dd \ub370\uc774\ud130\ub97c \ubc31\uc5d4\ub4dc\ub85c \uc804\uc1a1\ud558\uace0 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uce21\uba74\uc73c\ub85c \ub118\uc5b4\uac00\uaca0\uc2b5\ub2c8\ub2e4. Couchbase\uc5d0\uc11c \uc77c\ud558\uba74\uc11c \uc81c\uac00 \uc0ac\uc6a9\ud560 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub294 \ubc14\ub85c \uc774 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc785\ub2c8\ub2e4. \uac04\ub2e8\ud55c \ubc29\ubc95\uc740<\/span><a href=\"https:\/\/cloud.couchbase.com\/sign-up\"> <span style=\"font-weight: 400;\">https:\/\/cloud.couchbase.com\/sign-up<\/span><\/a><span style=\"font-weight: 400;\">\uc5d0\uc11c \uacc4\uc815\uc744 \uc0dd\uc131\ud558\uba74 \uc2e0\uc6a9\uce74\ub4dc \uc5c6\uc774 30\uc77c \ud3c9\uac00\ud310\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/capellaGetStarted.png\" alt=\"A screenshot of the first Couchbase Capella Get started wizard step \" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uae30\ubcf8\uac12\uc744 \uadf8\ub300\ub85c \ub450\uac70\ub098 \uc120\ud638\ud558\ub294 \ud074\ub77c\uc6b0\ub4dc \uc81c\uacf5\uc5c5\uccb4\uc640 \uac00\uc7a5 \uac00\uae4c\uc6b4 \uc9c0\uc5ed\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. <\/span><strong><i>\uc9c0\uae08 \ubc30\ud3ec<\/i><\/strong><span style=\"font-weight: 400;\"> \ub97c \ud074\ub9ad\ud558\uace0 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ubc30\ud3ec\ub97c \uae30\ub2e4\ub9bd\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/capellaTrialHome.png\" alt=\"A screenshot of the Couchbase Capella trial home\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uac70\uae30\uc5d0\uc11c \ub450 \uac00\uc9c0 \uc791\uc5c5\uc744 \uc218\ud589\ud574\uc57c \ud569\ub2c8\ub2e4. \ubc31\uc5d4\ub4dc \ucf54\ub4dc\uc5d0\uc11c \ud574\ub2f9 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc5f0\uacb0\ud560 \uc218 \uc788\ub294\uc9c0 \ud655\uc778\ud558\uace0, \ub370\uc774\ud130\ub97c \uc5b4\ub518\uac00\uc5d0 \uc4f8 \uc218 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4. \uacc4\uc18d\ud574\uc11c <strong>\uc5f0\uacb0<\/strong> \ud0ed\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4\uc5d0\uc11c\ub294 \ub370\uc774\ud130\ub97c \ubc84\ud0b7\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \ud3c9\uac00\ud310\uc5d0\ub294 \ubbf8\ub9ac \uac00\uc838\uc628 \uc5ec\ud589 \uc0d8\ud50c \ubc84\ud0b7\uc774 \uc81c\uacf5\ub429\ub2c8\ub2e4. \uc774 \ubc84\ud0b7\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uaca0\uc2b5\ub2c8\ub2e4. \ub300\uc2e0 \uc790\uccb4 \ubc84\ud0b7\uc744 \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4. \ubc84\ud0b7\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. <\/span><strong>\uc124\uc815<\/strong><span style=\"font-weight: 400;\"> \uc758 \ucd5c\uc0c1\uc704 \uba54\ub274\uc5d0\uc11c <\/span><strong>\ubc84\ud0b7<\/strong><span style=\"font-weight: 400;\"> \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/bucketHome.png\" alt=\"A screenshot of the Bucket settings in Couchbase Capella\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c <\/span><strong>+ \ubc84\ud0b7 \ub9cc\ub4e4\uae30<\/strong><span style=\"font-weight: 400;\">\uc744 \ud074\ub9ad\ud558\uace0 \uc774\ub984\uc744 \uc9c0\uc815\ud558\uace0 \ub098\uba38\uc9c0\ub294 \uae30\ubcf8 \uc124\uc815\uc73c\ub85c \ub461\ub2c8\ub2e4. <\/span><strong>\ubc84\ud0b7 \ub9cc\ub4e4\uae30<\/strong><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/surveyFormBucketCreated.png\" alt=\"A screenshot of the Buckets settings home, with the newly created bucket visible\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc0c8 \ubc84\ud0b7\uc774 \uc0dd\uacbc\uc73c\ub2c8 \uc774\uc81c \uad00\ub828 \uc790\uaca9 \uc99d\uba85\uc744 \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ubc84\ud0b7\uc758 <\/span><strong>\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4<\/strong><span style=\"font-weight: 400;\"> \ubc84\ud2bc\ubcf4\ub2e4 <\/span><strong>\ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4 \ub9cc\ub4e4\uae30<\/strong><span style=\"font-weight: 400;\"> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/emptyCredentials.png\" alt=\"A screenshot of the empty Credentials settings\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/credentialCreation.png\" alt=\"A screenshot fo the credentials creation detail\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc0ac\uc6a9\uc790 \uc774\ub984\uacfc \ube44\ubc00\ubc88\ud638\ub97c \ubaa8\ub450 \uae30\uc5b5\ud558\uace0 \uc788\ub294\uc9c0 \ud655\uc778\ud55c \ud6c4 <\/span><strong>\ub370\uc774\ud130\ubca0\uc774\uc2a4 \ub9cc\ub4e4\uae30<\/strong><span style=\"font-weight: 400;\">. \ub9c8\uc9c0\ub9c9\uc73c\ub85c \ud574\uc57c \ud560 \uc77c\uc740 \uc774 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uacf5\uac1c\uc801\uc73c\ub85c \uc561\uc138\uc2a4\ud560 \uc218 \uc788\ub3c4\ub85d \ud5c8\uc6a9\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc9c0\uae08\uc740 \uc228\uaca8\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c <\/span><strong>\ud5c8\uc6a9\ub41c IP \uc8fc\uc18c<\/strong><span style=\"font-weight: 400;\">\ubcf4\ub2e4 <\/span><strong>\ud5c8\uc6a9 IP \ucd94\uac00<\/strong><span style=\"font-weight: 400;\">. \ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. <\/span><span style=\"font-weight: 400;\"><strong>\uc561\uc138\uc2a4 \ud5c8\uc6a9<\/strong> <\/span><strong>\uc5b4\ub514\uc11c\ub098<\/strong><span style=\"font-weight: 400;\">\ub97c \ud074\ub9ad\ud558\uace0 \uc9c0\uce68\uc744 \ub530\ub985\ub2c8\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \uc591\uc2dd\uc744 \ubbf8\ub9ac \ucc44\uc6b4 \ub2e4\uc74c <\/span><strong>\ud5c8\uc6a9 IP \ucd94\uac00<\/strong><span style=\"font-weight: 400;\"> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. \ub2e4\uc18c \ubc88\uac70\ub86d\ub2e4\uace0 \uc0dd\uac01\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc65c \uae30\ubcf8\uac12\uc774 \uc544\ub2cc\uac00\uc694?<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/addAllowedIp.png\" alt=\"A screenshot of the Allow Access from Anywhere popup\" \/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/addedIp.png\" alt=\"A screenshot of the resuting operation with the newly added IP range\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c <\/span><strong>\uc5f0\uacb0<\/strong><span style=\"font-weight: 400;\"> \ud0ed\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. \ud0ed\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. <em>\uc5f0\uacb0 \ubb38\uc790\uc5f4<\/em>\ub97c \ud074\ub9ad\ud558\uace0 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc790\uaca9 \uc99d\uba85\uc744 \uc120\ud0dd\ud55c \ub2e4\uc74c \uc5b8\uc5b4\ub97c \ub178\ub4dc\ub85c \uc804\ud658\ud558\uba74 \ubc31\uc5d4\ub4dc \ucf54\ub4dc\uc5d0\uc11c \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc5f0\uacb0\ud560 \uc218 \uc788\ub294 \uc62c\ubc14\ub978 \uc9c0\uce68\uc774 \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/span><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/github.com\/ldoguin\/freecodecamp-survey\/raw\/main\/images\/connectInstructions.png\" alt=\"A screenshot of the SDK connection instructions, with doc and code\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uac83\uc744 \ud568\uc218 \ucf54\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\uc5ec \ubd99\uc5ec\ub123\uace0 \uba87 \uac00\uc9c0\ub97c \ub354 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:js decode:true\">const crypto = require(\"crypto\"); \r\nconst couchbase = require(\"couchbase\"); \r\n\r\nconst handler = async (event) =&gt; {\r\n  try {\r\n         const clusterConnStr = \"couchbases:\/\/cb.ar0qqwli6cczm1u.cloud.couchbase.com\"; \/\/ \uc774\uac83\uc744 \uc5f0\uacb0 \ubb38\uc790\uc5f4 \ub85c \ubc14\uafb8\uae30\r\n         const username = \"\uad00\ub9ac\uc790\"; \/\/ \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4 \uc790\uaca9 \uc99d\uba85 \uc758 \uc0ac\uc6a9\uc790 \uc774\ub984\uc73c\ub85c \ubc14\uafc9\ub2c8\ub2e4.\r\n         const password = \"Couch#123\"; \/\/ \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4 \uc790\uaca9 \uc99d\uba85 \uc758 \ube44\ubc00\ubc88\ud638\ub85c \ubc14\uafc9\ub2c8\ub2e4.\r\n         \/\/ \ud074\ub7ec\uc2a4\ud130\uc5d0 \ub300\ud55c \ucc38\uc870\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.\r\n         const cluster = await couchbase.connect(clusterConnStr, { \r\n           \uc0ac\uc6a9\uc790 \uc774\ub984: \uc0ac\uc6a9\uc790 \uc774\ub984\r\n           password: \ube44\ubc00\ubc88\ud638\r\n           \/\/ \uc5f0\uacb0 \uc9c0\uc5f0 \ubb38\uc81c\ub97c \ubc29\uc9c0\ud558\ub824\uba74 \uc544\ub798\uc5d0 \ubbf8\ub9ac \uad6c\uc131\ub41c \ud504\ub85c\ud544\uc744 \uc0ac\uc6a9\ud558\uc138\uc694.\r\n           configProfile: \"wanDevelopment\",\r\n         });\r\n\r\n    const bucket = cluster.bucket(\"surveyform\"); \r\n    const collection = bucket.defaultCollection(); \r\n\r\n    var data = JSON.parse(event.body);\r\n    let result = await collection.insert(crypto.randomUUID(), data); \r\n\r\n    return {\r\n      statusCode: 200,\r\n      body: JSON.stringify({ name: data.name })\r\n    }\r\n  } catch (error) {\r\n    console.log(error);\r\n    \ubc18\ud658 { statusCode: 500, body: error.toString() }\r\n  }\r\n}\r\n\r\nmodule.exports = { \ud578\ub4e4\ub7ec }<\/pre>\n<pre class=\"nums:false lang:default decode:true\">\ud504\ub85c\uc81d\ud2b8\uc5d0 \ub450 \uac1c\uc758 \uc0c8\ub85c\uc6b4 \uc885\uc18d\uc131\uc774 \uc788\uc74c\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. 'crypto' \ud328\ud0a4\uc9c0\ub294 \ub178\ub4dc\uc5d0\uc11c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubb38\uc11c\uc5d0 \ub300\ud55c \uc784\uc758\uc758 \uc2dd\ubcc4\uc790\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n 'couchbase' \ud328\ud0a4\uc9c0\ub294 Couchbase NodeJS SDK\uc785\ub2c8\ub2e4. Couchbase \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc5f0\uacb0\ud558\ub294 \ub370 \ud544\uc694\ud55c \ubaa8\ub4e0 \ucf54\ub4dc\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\ub294 \ub2e4\ub978 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \ub610\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc704\ud55c \ub4dc\ub77c\uc774\ubc84\ub77c\uace0\ub3c4 \ud569\ub2c8\ub2e4.<\/pre>\n<p>Couchbase\uc758 \uacbd\uc6b0 \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. \uc2e4\ud589 \uc911 <em>npm i couchbase@4.2.4<\/em> \ub97c \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4. \ud604\uc7ac \ub137\ub9ac\ud30c\uc774\/\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ud638\ud658\uc131\uc740 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ubc84\uc804 4.2.4 \uc774\ud558\uc5d0\uc11c \ubcf4\uc7a5\ub429\ub2c8\ub2e4. \uc774\ub294 SDK\uc758 \ud2b9\uc131 \ub54c\ubb38\uc785\ub2c8\ub2e4. C SDK \uc704\uc5d0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc778\ud130\ud398\uc774\uc2a4\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 C \uc885\uc18d\uc131\uc740 \uc62c\ubc14\ub978 \ubc84\uc804\uc5d0\uc11c \uc2dc\uc2a4\ud15c \uc885\uc18d\uc131\uc744 \ucc3e\uc744 \uac83\uc73c\ub85c \uae30\ub300\ud569\ub2c8\ub2e4. \ud604\uc7ac Couchbase 4.2.5\ub294 \ub2e4\uc74c\uc744 \ucc3e\uc744 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4. <em>GLIBC_29<\/em> \ud558\uc9c0\ub9cc Netlify \ubc31\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\ub294 Ubuntu \uc2dc\uc2a4\ud15c\uc5d0\uc11c\ub294 \uc0ac\uc6a9\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \uc885\uc18d\uc131\uc774 \uc0dd\uacbc\uc73c\ub2c8 \uc885\uc18d\uc131\uc744 \ube4c\ub4dc\ud558\ub294 \ubc29\ubc95\uc744 \uba85\uc2dc\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc885\uc18d\uc131\uc744 \ucd94\uac00\ud558\ub824\uba74 <\/span><em><span style=\"font-weight: 400;\">netlify.toml<\/span><\/em><span style=\"font-weight: 400;\"> \ud30c\uc77c\uc744 \ub9ac\ud3ec\uc9c0\ud1a0\ub9ac \ub8e8\ud2b8\uc5d0 \ub2e4\uc74c \ub0b4\uc6a9\uc73c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">[\ube4c\ub4dc]\r\n  \uba85\ub839 = \"npm install &amp;&amp; strip --strip-debug .\/node_modules\/couchbase\/build\/Release\/couchbase_impl.node\"\r\n  publish = \".\"<\/pre>\n<p><span style=\"font-weight: 400;\">\uba87 \uac00\uc9c0 \uc791\uc5c5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc885\uc18d\uc131\uc744 \uc124\uce58\ud558\uace0 \ub514\ubc84\uadf8 \uc2ec\ubcfc \ud14c\uc774\ube14\uc744 \uc81c\uac70\ud569\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">couchbase_impl.node<\/span><\/em><span style=\"font-weight: 400;\">. \uc774 \ud30c\uc77c\uc740 \ub178\ub4dc SDK\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 C \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \ud30c\uc77c\uc740 \ud604\uc7ac \ub137\ub77c\uc774\ud30c\uc774\uc5d0\uc11c \ucc98\ub9ac\ud558\uae30\uc5d0\ub294 \ub108\ubb34 \ud07d\ub2c8\ub2e4. \uadf8\ub798\uc11c \ube4c\ub4dc \uacfc\uc815\uc5d0\uc11c \ubd88\ud544\uc694\ud55c \ubd88\ud544\uc694\ud55c \ubd80\ubd84\uc744 \uc81c\uac70\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">\uc774 \ubcc0\uc218\ub294 SDK\uac00 \ud074\ub7ec\uc2a4\ud130\uc5d0 \uc5f0\uacb0\ud558\ub294 \ub370 \ud544\uc694\ud55c \uc815\ubcf4\uc785\ub2c8\ub2e4. \uc5f0\uacb0 \ubb38\uc790\uc5f4, \uc0ac\uc6a9\uc790 \uc774\ub984 \ubc0f \ube44\ubc00\ubc88\ud638\uc785\ub2c8\ub2e4.\r\n `couchbase.connect`\ub294 \uc0ac\uc6a9\uc790 \uc774\ub984, \ube44\ubc00\ubc88\ud638 \ubc0f \uae30\ud0c0 \uc635\uc158\uc774 \ud3ec\ud568\ub41c JSON \uac1d\uccb4\ubcf4\ub2e4 \uc5f0\uacb0 \ubb38\uc790\uc5f4\uc744 \uccab \ubc88\uc9f8 \ub9e4\uac1c \ubcc0\uc218\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\uc11c\ub294 `wanDevelopment` \uad6c\uc131 \ud504\ub85c\ud30c\uc77c\ub3c4 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ubaa8\ub4e0 Couchbase \uc791\uc5c5\uc758 \uae30\ubcf8 \uc2dc\uac04 \uc81c\ud55c \uac12\uc774 \uc99d\uac00\ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc5f0\uacb0\uc774 \ub290\ub824\ub3c4 \ube44\uba85\uc744 \uc9c0\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\r\n \ud074\ub7ec\uc2a4\ud130 \uac1c\uccb4\uc5d0\uc11c \ubc84\ud0b7\uc744 \uac00\uc838\uc635\ub2c8\ub2e4. \ubc84\ud0b7\uc740 \ubc94\uc704\uc640 \uceec\ub809\uc158\uc744 \uc800\uc7a5\ud558\ub294 \uacf3\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 `surveyform` \ubc84\ud0b7\uc744 \uac00\uc838\uc635\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 \uc774\ubbf8 \uae30\ubcf8 \ubc94\uc704\uc640 \uae30\ubcf8 \uceec\ub809\uc158\uc774 \uc788\uc2b5\ub2c8\ub2e4.\r\n \ubc84\ud0b7\uc5d0\uc11c \uae30\ubcf8 \uceec\ub809\uc158\uc744 \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uceec\ub809\uc158\uc740 \ubb38\uc11c \ub610\ub294 \ud0a4\/\uac12 \uc30d\uc744 \uc800\uc7a5\ud558\ub294 \uacf3\uc785\ub2c8\ub2e4. \ud0a4\ub97c \ubb38\uc11c\uc758 \uc2dd\ubcc4\uc790\ub85c, \uac12\uc744 JSON \ub370\uc774\ud130\ub85c \uc0dd\uac01\ud558\uba74 \ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ub2e4\ub978 \ubb34\uc5c7\uc774\ub4e0 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n \uceec\ub809\uc158 \uac1d\uccb4\uc5d0\uc11c \uc0bd\uc785 \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 \ud0a4\uc640 \uac12\uc774\ub77c\ub294 \ub450 \uac1c\uc758 \ub9e4\uac1c\ubcc0\uc218\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc554\ud638\ud654 \ud328\ud0a4\uc9c0\uc5d0\uc11c randomUUID() \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \uc784\uc758\uc758 \uc2dd\ubcc4\uc790\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub370\uc774\ud130 \uac1d\uccb4\ub97c \uac12\uc73c\ub85c \uc804\ub2ec\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0\ub294 JSON\uc774 \ud3ec\ud568\ub429\ub2c8\ub2e4. \uc774 \ud568\uc218\ub294 \ube44\ub3d9\uae30\uc2dd\uc774\uba70, Couchbase Capella \ud074\ub7ec\uc2a4\ud130\uc5d0 \uc694\uccad\uc744 \ud569\ub2c8\ub2e4. \ud074\ub7ec\uc2a4\ud130\uc758 \uc751\ub2f5\uc744 \uae30\ub2e4\ub9bd\ub2c8\ub2e4.<\/pre>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \uc0c8 \ud30c\uc77c\uc744 \ucd94\uac00\ud558\uace0 \ucee4\ubc0b\ud55c \ud6c4 GitHub\uc5d0 \ud478\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uadf8\ub807\uac8c \ud558\uba74 \ube44\ubc00\ubc88\ud638\uac00 GitHub\ub85c \ud478\uc2dc\ub429\ub2c8\ub2e4. \uc6b0\ub9ac\ub294 \uadf8\ub807\uac8c \ud558\uace0 \uc2f6\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub300\uc2e0 \ub2e4\uc74c\uc744 \uc2e4\ud589\ud558\uc5ec \ud14c\uc2a4\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">\ub137\ub77c\uc774\ud30c\uc774 \uac1c\ubc1c<\/span><\/em><span style=\"font-weight: 400;\">. \uacc4\uc18d\ud574\uc11c \uc591\uc2dd\uc744 \ub2e4\uc2dc \uc81c\ucd9c\ud558\uc138\uc694.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\ubaa8\ub4e0 \uac83\uc774 \uc21c\uc870\ub86d\uac8c \uc9c4\ud589\ub418\uc5c8\ub2e4\uba74 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \ub370\uc774\ud130\ub97c \uae30\ub85d\ud588\uc2b5\ub2c8\ub2e4! Couchbase Capella UI\ub85c \uc774\ub3d9\ud558\uc5ec \uc27d\uac8c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud074\ub9ad <\/span><strong>\ub370\uc774\ud130 \ub3c4\uad6c<\/strong><span style=\"font-weight: 400;\">\ub97c \ud074\ub9ad\ud558\uace0 \ubc84\ud0b7, \ubc94\uc704 \ubc0f \uceec\ub809\uc158\uc744 \uc120\ud0dd\ud558\uba74 \ubb38\uc11c\uc5d0\uc11c \uc124\ubb38\uc870\uc0ac\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\ubc29\uae08 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc5f0\uacb0 \ucf54\ub4dc\ub97c \uc791\uc131\ud588\uc2b5\ub2c8\ub2e4!<\/span><\/p>\n<h2>5\ub2e8\uacc4 - \uad6c\uc131 \uad00\ub9ac<\/h2>\n<p><span style=\"font-weight: 400;\">GitHub\uc5d0\uc11c \uc790\uaca9 \uc99d\uba85\uc744 \uac15\uc694\ud558\uc9c0 \uc54a\uae30 \uc704\ud574 \ud658\uacbd \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ud658\uacbd \ubcc0\uc218\ub294 \ubaa8\ub4e0 \uc6b4\uc601 \uccb4\uc81c\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\uba70 \ub2e4\uc591\ud55c \ud658\uacbd(\ub2e4\uc591\ud55c OS, \ud074\ub77c\uc6b0\ub4dc, \ud14c\uc2a4\ud2b8, \uc2a4\ud14c\uc774\uc9d5, \ud504\ub9ac\ud504\ub85c\ub355\uc158, \ud504\ub85c\ub355\uc158 \ub4f1 \uc6cc\ud06c\ud50c\ub85c\uc5d0 \ub9de\ub294 \ud658\uacbd)\uc5d0\uc11c \uad6c\uc131\uc744 \uad00\ub9ac\ud558\ub294 \uac00\uc7a5 \uc88b\uc740 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">....\r\nconst ENDPOINT = process.env.COUCHBASE_ENDPOINT || \"couchbase:\/\/localhost\"; \r\nconst USERNAME = process.env.COUCHBASE_USERNAME || \"Administrator\";\r\nconst PASSWORD = process.env.COUCHBASE_PASSWORD || \"password\";\r\nconst BUCKET = process.env.COUCHBASE_BUCKET || \"surveyform\"\r\nconst handler = async (event) =&gt; {\r\n  try {\r\n        const clusterConnStr = ENDPOINT; \/\/ \uc774\uac83\uc744 \uc5f0\uacb0 \ubb38\uc790\uc5f4\ub85c \ubc14\uafc9\ub2c8\ub2e4.\r\n        const username = USERNAME; \/\/ \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc561\uc138\uc2a4 \uc790\uaca9 \uc99d\uba85\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc774\ub984\uc73c\ub85c \ubc14\uafc9\ub2c8\ub2e4.\r\n        const password = PASSWORD; \/\/ \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc811\uadfc \uc790\uaca9 \uc99d\uba85\uc5d0\uc11c \ube44\ubc00\ubc88\ud638\ub85c \ubc14\uafc9\ub2c8\ub2e4.\r\n        \/\/ \ud074\ub7ec\uc2a4\ud130\uc5d0 \ub300\ud55c \ucc38\uc870\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.\r\n        const cluster = await couchbase.connect(clusterConnStr, {.\r\n          usernme: \uc0ac\uc6a9\uc790 \uc774\ub984,\r\n          password: \ube44\ubc00\ubc88\ud638\r\n          \/\/ \uc5f0\uacb0 \uc9c0\uc5f0 \ubb38\uc81c\ub97c \ubc29\uc9c0\ud558\ub824\uba74 \uc544\ub798\uc5d0 \ubbf8\ub9ac \uad6c\uc131\ub41c \ud504\ub85c\ud544\uc744 \uc0ac\uc6a9\ud558\uc138\uc694.\r\n          configProfile: \"wanDevelopment\",\r\n        });\r\n    const bucket = cluster.bucket(BUCKET);\r\n...<\/pre>\n<pre class=\"nums:false lang:default decode:true\">\ud504\ub85c\uc138\uc2a4 \uac1d\uccb4\ub294 \ud56d\uc0c1 \ub178\ub4dc\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\ubbc0\ub85c \ud2b9\uc815 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uac00\uc838\uc62c \ud544\uc694\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. ||\ub97c \uc0ac\uc6a9\ud558\uba74 \uac01 \ubcc0\uc218\uac00 \uc815\uc758\ub418\uc9c0 \uc54a\uc740 \uacbd\uc6b0 \uae30\ubcf8\uac12\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/pre>\n<p><span style=\"font-weight: 400;\">Mac \ub610\ub294 Linux\uc5d0\uc11c\ub294 \ub2e4\uc74c\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">\ub0b4\ubcf4\ub0b4\uae30 MYVARIABLE=\"value\"<\/span><\/em><span style=\"font-weight: 400;\"> \uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. Windows\uc5d0\uc11c\ub294 \ub2e4\uc74c\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/span><em><span style=\"font-weight: 400;\">$Env:MYVARIABLE=\"value\"<\/span><\/em><\/p>\n<p><span style=\"font-weight: 400;\">Netlify\uc758 \ucee8\ud14d\uc2a4\ud2b8\uc5d0\uc11c \uc774\ub97c \uc815\uc758\ud558\ub824\uba74 UI\ub97c \ud1b5\ud574 \uc218\ub3d9\uc73c\ub85c \uc218\ud589\ud558\uac70\ub098 CLI\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">netlify env:set COUCHBASE_ENDPOINT couchbases:\/\/cb.ar0qqwli6cczm1u.cloud.couchbase.com\r\nnetlify env:set COUCHBASE_USERNAME \uad00\ub9ac\uc790\r\nnetlify env:set COUCHBASE_PASSWORD \uc554\ud638\r\nnetlify env:set COUCHBASE_BUCKET \uc124\ubb38\uc870\uc0ac \uc591\uc2dd<\/pre>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \ud30c\uc77c\uc744 \ucd94\uac00\ud558\uace0 \ucf54\ub4dc\ub97c \ucee4\ubc0b\ud558\uace0 \ud478\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucd95\ud558\ud569\ub2c8\ub2e4, \ud480\uc2a4\ud0dd\uc774 \uc644\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ubc31\uc5d4\ub4dc, \ud504\ub860\ud2b8\uc5d4\ub4dc \ubc0f \ub370\uc774\ud130\ubca0\uc774\uc2a4. \uadf8\ub9ac\uace0 \ubaa8\ub4e0 \uac83\uc744 \ub77c\uc774\ube0c\ub85c \ubc30\ud3ec\ud588\uc2b5\ub2c8\ub2e4! \ud558\uc9c0\ub9cc \uc791\uc5c5\uc774 \ub05d\ub09c \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4. \ub354 \uc804\ubb38\uc801\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc544\uc9c1 \ud560 \uc218 \uc788\ub294 \uc77c\uc774 \uba87 \uac00\uc9c0 \uc788\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<h2>6\ub2e8\uacc4 - \uc0ac\uc6a9\uc790 \ud53c\ub4dc\ubc31<\/h2>\n<p><span style=\"font-weight: 400;\">\ud604\uc7ac\ub85c\uc11c\ub294 \uc0ac\uc6a9\uc790\uac00 \ud074\ub9ad\ud560 \ub54c \ub9ce\uc740 \uc77c\uc774 \uc77c\uc5b4\ub098\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. <\/span><strong>\uc81c\ucd9c\ud558\uae30<\/strong><span style=\"font-weight: 400;\"> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4. \uc131\uacf5\uc801\uc73c\ub85c \uae30\ub85d\ub418\uc5c8\ub294\uc9c0 \uc5ec\ubd80\ub97c \uc54c\ub9ac\uae30 \uc704\ud574 \uc774\ub97c \ubcc0\uacbd\ud574\uc57c \ud569\ub2c8\ub2e4. \uba3c\uc800 \uac1c\ubc1c\uc790 \uce21\uc5d0\uc11c \uc624\ub958\ub97c \ud655\uc778\ud569\ub2c8\ub2e4. HTTP \uc0c1\ud0dc \ucf54\ub4dc\ub294 \uc798 \ub9cc\ub4e4\uc5b4\uc838 \uc788\uc73c\uba70, \uc77c\ubc18\uc801\uc73c\ub85c 400 \uc774\uc0c1\uc774\uba74 \uc624\ub958\uc774\ubbc0\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/span><\/p>\n<pre class=\"nums:false lang:js decode:true\"> \u00a0\u00a0\u00a0if (response.status &gt;= 400) { \r\n      console.log(\"\ubb54\uac00 \uc798\ubabb\ub418\uc5c8\uc744 \ub54c\"); \r\n      console.log(await response.text()); \r\n      return false;\r\n    }<\/pre>\n<pre class=\"nums:false lang:default decode:true\">4\ub85c \uc2dc\uc791\ud558\ub294 \uc0c1\ud0dc \ucf54\ub4dc\ub294 \uc77c\ubc18\uc801\uc73c\ub85c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\uc74c\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc798\ubabb\ub41c \ub370\uc774\ud130\uac00 \uc804\uc1a1\ub418\uc5c8\uac70\ub098, \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0 \uc62c\ubc14\ub978 \uad8c\ud55c\uc774 \uc5c6\uac70\ub098, \ud398\uc774\uc9c0\uac00 \uc874\uc7ac\ud558\uc9c0 \uc54a\ub294 \ub4f1... \uc5ec\uae30\uc11c\ub294 \ucf54\ub4dc\uac00 400\ubcf4\ub2e4 \ud070\uc9c0 \ud14c\uc2a4\ud2b8\ud569\ub2c8\ub2e4.\r\n \ub9cc\uc57d \uadf8\ub807\ub2e4\uba74 \ucf58\uc194\uc5d0 \uba54\uc2dc\uc9c0\ub97c \uae30\ub85d\ud569\ub2c8\ub2e4.\r\n \uc11c\ubc84\uac00 \ubc18\ud658\ud55c \uc624\ub958 \uba54\uc2dc\uc9c0\ub3c4 \uae30\ub85d\ud569\ub2c8\ub2e4.<\/pre>\n<p>\ud14c\uc2a4\ud2b8\ud558\ub824\uba74 \uc5f0\uacb0 \ubb38\uc790\uc5f4 \ub610\ub294 Couchbase\uc5d0 \ub300\ud55c \uc790\uaca9 \uc99d\uba85\uc758 \uc5b4\ub518\uac00\uc5d0 \uc624\ud0c0\ub97c \uc785\ub825\ud558\uba74 \ub429\ub2c8\ub2e4. \uc6f9 \ucf58\uc194\uc5d0\uc11c \uc624\ub958\ub97c \ud074\ub9ad\ud558\uba74 <i>\uc81c\ucd9c\ud558\uae30<\/i>. \ud558\uc9c0\ub9cc \uc6f9 \ucf58\uc194\uc740 \uc6b0\ub9ac\ub9cc\uc744 \uc704\ud55c \uac83\uc774\ubbc0\ub85c \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc801\uc808\ud55c \uc624\ub958 \ub610\ub294 \uc131\uacf5 \uba54\uc2dc\uc9c0\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n<p><span style=\"font-weight: 400;\">\uc591\uc2dd\uc758 \ub05d \ubd80\ubd84 \ubc14\ub85c \uc55e\uc5d0 \uc624\ub958 \ubc0f \uc131\uacf5 \uba54\uc2dc\uc9c0\uac00 \uc788\ub294 \uc2a4\ud32c HTML \uc694\uc18c\ub97c \uba87 \uac1c \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. \ucc38\uace0\ub85c <em>\uc228\uae30\uae30<\/em> \ud604\uc7ac\ub85c\uc11c\ub294 \ubcf4\uc774\uc9c0 \uc54a\uac8c \ub9cc\ub4dc\ub294 CSS \ud074\ub798\uc2a4\uc785\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:default decode:true\">...\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;form-error&quot; class=&quot;error-message hide&quot;&gt;&lt;\/span&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=&quot;thank-you-message&quot; class=&quot;hide&quot;&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\ucc38\uc5ec\uac00 \uae30\ub85d\ub418\uc5c8\uc2b5\ub2c8\ub2e4, \uac10\uc0ac\ud569\ub2c8\ub2e4!\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;\r\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/form&gt;\r\n...<\/pre>\n<p><span style=\"font-weight: 400;\">\uadf8\ub9ac\uace0 \uc5ec\uae30\uc5d0 \ud574\ub2f9 CSS\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub958\ub97c \ube68\uac04\uc0c9\uc73c\ub85c \ud45c\uc2dc\ud558\uace0, \uc694\uc18c\ub97c \uc228\uae30\uac70\ub098 \ud45c\uc2dc\ud558\uace0, \uba4b\uc9c4 \ud398\uc774\ub4dc \uc544\uc6c3 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uba4b\uc9c0\uac8c \ud45c\ud604\ud588\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:css decode:true\">.container .error-message {\r\n  \uc0c9\uc0c1: \ube68\uac04\uc0c9\r\n}\r\n\r\n.hide {\r\n  \ud45c\uc2dc: \uc5c6\uc74c\r\n}\r\n\r\n.show {\r\n  \ud45c\uc2dc: \ube14\ub85d\r\n}\r\n\r\n.fade-out {\r\n  \uc560\ub2c8\uba54\uc774\uc158: \ud398\uc774\ub4dc\uc544\uc6c3 \uc644\ud654 8\ucd08;\r\n  -webkit-animation: fadeOut ease 8s;\r\n  -moz-animation: fadeOut ease 8s;\r\n  -o-animation: fadeOut ease 8s;\r\n  -ms-animation: \ud398\uc774\ub4dc\uc544\uc6c3 \uc644\ud654 8\ucd08;\r\n}@\ud0a4\ud504\ub808\uc784 \ud398\uc774\ub4dc\uc544\uc6c3 {\r\n  0% {\r\n    \ubd88\ud22c\uba85\ub3c4:1;\r\n  }\r\n  100% {\r\n    opacity:0;\r\n  }\r\n}\r\n\r\n\ubaa8\uc988 \ud0a4\ud504\ub808\uc784 \ud398\uc774\ub4dc\uc544\uc6c3 {\r\n  0% {\r\n    \ubd88\ud22c\uba85\ub3c4:1;\r\n  }\r\n  100% {\r\n    opacity:0;\r\n  }\r\n}\r\n\r\n\uc6f9\ud0b7 \ud0a4\ud504\ub808\uc784 \ud398\uc774\ub4dc\uc544\uc6c3 {\r\n  0% {\r\n    opacity:1;\r\n  }\r\n  100% {\r\n    opacity:0;\r\n  }\r\n}\r\n\r\n@-o-\ud0a4\ud504\ub808\uc784 \ud398\uc774\ub4dc\uc544\uc6c3 {\r\n  0% {\r\n    \ubd88\ud22c\uba85\ub3c4:1;\r\n  }\r\n  100% {\r\n    opacity:0;\r\n  }\r\n}\r\n\r\n@-ms-\ud0a4\ud504\ub808\uc784 \ud398\uc774\ub4dc\uc544\uc6c3 {\r\n  0% {\r\n    \ubd88\ud22c\uba85\ub3c4:1;\r\n  }\r\n  100% {\r\n    opacity:0;\r\n    \ud45c\uc2dc: \uc5c6\uc74c;\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">\uc774\uc81c \ubaa8\ub4e0 \uac83\uc744 \ud569\uce60 \ucc28\ub840\uc785\ub2c8\ub2e4. \ucc98\uc74c \ub450 \uc904\uc740 \ubc29\uae08 \ucd94\uac00\ub41c \uc0c8 \uc2a4\ud32c \uc694\uc18c\ub97c \uac00\uc838\uc635\ub2c8\ub2e4. \ud638\ucd9c\uc740 <\/span><em><span style=\"font-weight: 400;\">form.reset()<\/span><\/em><span style=\"font-weight: 400;\"> \ub294 \ubc18\ud658\ub41c \uc751\ub2f5 \uc0c1\ud0dc \ucf54\ub4dc\uac00 \ub2e4\uc74c\uacfc \uac19\uc740 \uacbd\uc6b0 \uc591\uc2dd\uc5d0\uc11c \ubaa8\ub4e0 \uac12\uc744 \uc9c0\uc6b0\ub294 \uac83\uc785\ub2c8\ub2e4. <em>200<\/em>. \ud398\uc774\ub4dc \uc544\uc6c3 \ud074\ub798\uc2a4\ub97c \ucd94\uac00\ud558\uc5ec \uba54\uc2dc\uc9c0\ub97c \ud45c\uc2dc\ud558\ub294 \uac83\ubcf4\ub2e4 7000ms \ud0c0\uc784\uc544\uc6c3 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubaa8\ub4e0 \ud074\ub798\uc2a4\ub97c \uc81c\uac70\ud558\uace0 \uc694\uc18c\ub97c \ub2e4\uc2dc \uc228\uae30\ub294 \uac83\uc774 \ub354 \ub0ab\uc2b5\ub2c8\ub2e4. \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\uc785\ub2c8\ub2e4.<\/span><\/p>\n<pre class=\"nums:false lang:js decode:true\"> \u00a0\u00a0\u00a0const thankYouMessage = document.getElementById('thank-you-message'); &lt;1&gt;\r\n\u00a0\u00a0\u00a0\u00a0const formError = document.getElementById(\"form-error\"); &lt;1&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0if (response.status == 200) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form.reset(); &lt;2&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thankYouMessage.classList.add('show'); &lt;3&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0thankYouMessage.classList.add('fade-out'); &lt;3&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(function(){thankYouMessage.classList.remove('fade-out');thankYouMessage.classList.remove('show');}, 7000); &lt;3&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(await response.text());\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0if (response.status &gt;= 400) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"Something when wrong\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(await response.text());\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0formError.textContent = \"Something went wrong while recording your contact.\"; &lt;4&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0formError.classList.toggle('show'); &lt;4&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0formError.classList.toggle('fade-out'); &lt;4&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(function(){formError.classList.toggle('fade-out');formError.classList.toggle('show');}, 7000); &lt;4&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\r\n\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<pre class=\"nums:false lang:default decode:true\">\uc0c8 \uc2a4\ud32c\uc744 \ubcc0\uc218\uc5d0 \ud560\ub2f9\ud569\ub2c8\ub2e4.\r\n \uc77c\uc774 \uc798 \uc9c4\ud589\ub418\uba74 \uc591\uc2dd\uc758 \ub370\uc774\ud130\ub97c \uc7ac\uc124\uc815\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc791\ub3d9\ud588\uc74c\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4.\r\n \uba3c\uc800 \uc624\ub958 \uba54\uc2dc\uc9c0\ub97c \ud45c\uc2dc\ud558\ub294 CSS \ud074\ub798\uc2a4\ub97c \ucd94\uac00\ud55c \ub2e4\uc74c \ud398\uc774\ub4dc\uc544\uc6c3 CSS \ud074\ub798\uc2a4\ub97c \uc801\uc6a9\ud558\uace0 \uc2dc\uac04 \ucd08\uacfc \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. 7000ms\uac00 \uc9c0\ub098\uba74 \ud398\uc774\ub4dc\uc544\uc6c3 \ubc0f \ud45c\uc2dc CSS \ud074\ub798\uc2a4\uac00 \uc81c\uac70\ub418\uc5b4 \uc131\uacf5 \uba54\uc2dc\uc9c0\uac00 \ub2e4\uc2dc \uc228\uaca8\uc9d1\ub2c8\ub2e4.\r\n \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c\ub3c4 \uac19\uc740 \uc791\uc5c5\uc744 \uc218\ud589\ud558\uba70, \ub300\uc2e0 formError HTML \uc694\uc18c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/pre>\n<p>\uc774\uc81c \uc591\uc2dd\uc744 \ub2e4\uc2dc \ud14c\uc2a4\ud2b8 \uc81c\ucd9c\ud558\uace0 \uc120\ud0dd\ud55c \uc791\uc5c5\uc5d0 \ub530\ub77c \ub2e4\ub978 \uc131\uacf5 \ub610\ub294 \uc624\ub958 \uba54\uc2dc\uc9c0\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9cc\uc871\uc2a4\ub7ec\uc6b0\uba74 \ud574\ub2f9 \ucf54\ub4dc\ub97c \ucd94\uac00, \ucee4\ubc0b \ubc0f \ud478\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><span style=\"font-weight: 400;\">\uc774 \uac00\uc774\ub4dc\uc758 \ub9c8\uc9c0\ub9c9 \ubd80\ubd84\uae4c\uc9c0 \uc644\ub8cc\ud558\uc168\uc2b5\ub2c8\ub2e4! git, GitHub, Netlify \ubc0f Couchbase Capella\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9\uc5d0 HTML \uc591\uc2dd\uc744 \ubc30\ud3ec\ud558\uace0 \uc0ac\uc6a9\uc790\uac00 \uc591\uc2dd\uc744 \uc81c\ucd9c\ud560 \ub54c\ub9c8\ub2e4 \ucf58\ud150\uce20\uac00 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0 \uc800\uc7a5\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud588\uc2b5\ub2c8\ub2e4.<\/span><\/p>\n<h2>\ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcfc \uc900\ube44\uac00 \ub418\uc168\ub098\uc694?<\/h2>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>\ud655\uc778 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/developers\/\">\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \uac1c\ubc1c\uc790 \ub9ac\uc18c\uc2a4<\/a>\uc0d8\ud50c \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \ucf54\ub4dc \ubc0f \ud29c\ud1a0\ub9ac\uc5bc\uc744 \ud655\uc778\ud558\uc138\uc694.<\/li>\n<li>\uac00\uc785\ud558\uae30 <a href=\"https:\/\/www.couchbase.com\/blog\/ko\/developers\/community\/\">\ucee4\ubba4\ub2c8\ud2f0 \ud5c8\ube0c<\/a> \ub97c \ud074\ub9ad\ud558\uc5ec Discord, \ud3ec\ub7fc \ub4f1\uc744 \uc0ac\uc6a9\ud558\uc138\uc694.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.couchbase.com\/blog\/ko\/developers\/community\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14769 size-large\" style=\"border: 1px solid;\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/08\/image_2023-08-28_191205758-1024x865.png\" alt=\"\" width=\"900\" height=\"760\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_191205758-1024x865.png 1024w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_191205758-300x253.png 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_191205758-768x649.png 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_191205758-1320x1115.png 1320w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_191205758.png 1536w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that [&hellip;]<\/p>","protected":false},"author":49,"featured_media":14772,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1814,1815,2225,9327,2201],"tags":[9832,1500,1776],"ppma_author":[9023],"class_list":["post-14768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-cloud","category-javascript","category-tools-sdks","tag-netlify","tag-tutorial","tag-web-application"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build a Survey App with Netlify and Couchbase - The Couchbase Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Survey App with Netlify and Couchbase\" \/>\n<meta property=\"og:description\" content=\"The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-29T01:20:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T18:21:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/08\/image_2023-08-28_192155937-1024x513.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"513\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Laurent Doguin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ldoguin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"unstructured.io\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/\"},\"author\":{\"name\":\"Laurent Doguin\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e\"},\"headline\":\"Build a Survey App with Netlify and Couchbase\",\"datePublished\":\"2023-08-29T01:20:02+00:00\",\"dateModified\":\"2023-08-31T18:21:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/\"},\"wordCount\":2988,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png\",\"keywords\":[\"netlify\",\"tutorial\",\"web application\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Capella\",\"JavaScript\",\"Tools &amp; SDKs\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/\",\"name\":\"Build a Survey App with Netlify and Couchbase - The Couchbase Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png\",\"datePublished\":\"2023-08-29T01:20:02+00:00\",\"dateModified\":\"2023-08-31T18:21:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png\",\"width\":3732,\"height\":1871},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Survey App with Netlify and Couchbase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e\",\"name\":\"Laurent Doguin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/12929ce99397769f362b7a90d6b85071\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g\",\"caption\":\"Laurent Doguin\"},\"description\":\"Laurent is a nerdy metal head who lives in Paris. He mostly writes code in Java and structured text in AsciiDoc, and often talks about data, reactive programming and other buzzwordy stuff. He is also a former Developer Advocate for Clever Cloud and Nuxeo where he devoted his time and expertise to helping those communities grow bigger and stronger. He now runs Developer Relations at Couchbase.\",\"sameAs\":[\"https:\/\/x.com\/ldoguin\"],\"honorificPrefix\":\"Mr\",\"birthDate\":\"1985-06-07\",\"gender\":\"male\",\"award\":[\"Devoxx Champion\",\"Couchbase Legend\"],\"knowsAbout\":[\"Java\"],\"knowsLanguage\":[\"English\",\"French\"],\"jobTitle\":\"Director Developer Relation & Strategy\",\"worksFor\":\"Couchbase\",\"url\":\"https:\/\/www.couchbase.com\/blog\/ko\/author\/laurent-doguin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Survey App with Netlify and Couchbase - The Couchbase Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/","og_locale":"ko_KR","og_type":"article","og_title":"Build a Survey App with Netlify and Couchbase","og_description":"The Couchbase DevRel team has been working with the Bad Website Club on freeCodeCamp materials.\u00a0 freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that [&hellip;]","og_url":"https:\/\/www.couchbase.com\/blog\/ko\/building-a-survey-app-with-netlify-and-couchbase\/","og_site_name":"The Couchbase Blog","article_published_time":"2023-08-29T01:20:02+00:00","article_modified_time":"2023-08-31T18:21:04+00:00","og_image":[{"width":1024,"height":513,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/08\/image_2023-08-28_192155937-1024x513.png","type":"image\/png"}],"author":"Laurent Doguin","twitter_card":"summary_large_image","twitter_creator":"@ldoguin","twitter_misc":{"Written by":"unstructured.io","Est. reading time":"18\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/"},"author":{"name":"Laurent Doguin","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e"},"headline":"Build a Survey App with Netlify and Couchbase","datePublished":"2023-08-29T01:20:02+00:00","dateModified":"2023-08-31T18:21:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/"},"wordCount":2988,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png","keywords":["netlify","tutorial","web application"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Capella","JavaScript","Tools &amp; SDKs"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/","url":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/","name":"Build a Survey App with Netlify and Couchbase - The Couchbase Blog","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png","datePublished":"2023-08-29T01:20:02+00:00","dateModified":"2023-08-31T18:21:04+00:00","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2023\/08\/image_2023-08-28_192155937.png","width":3732,"height":1871},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/building-a-survey-app-with-netlify-and-couchbase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Survey App with Netlify and Couchbase"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ube14\ub85c\uadf8","description":"NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4, Couchbase","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"\uce74\uc6b0\uce58\ubca0\uc774\uc2a4 \ube14\ub85c\uadf8","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/c0aa9b8f1ed51b7a9e2f7cb755994a5e","name":"\ub85c\ub791 \ub3c4\uadc4","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/12929ce99397769f362b7a90d6b85071","url":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","caption":"Laurent Doguin"},"description":"Laurent\ub294 \ud30c\ub9ac\uc5d0 \uc0ac\ub294 \uad34\uc9dc \uae08\uc18d\uacf5\ud559\ub3c4\uc785\ub2c8\ub2e4. \uc8fc\ub85c Java\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uace0 AsciiDoc\uc73c\ub85c \uad6c\uc870\ud654\ub41c \ud14d\uc2a4\ud2b8\ub97c \uc791\uc131\ud558\uba70 \ub370\uc774\ud130, \ub9ac\uc561\ud2f0\ube0c \ud504\ub85c\uadf8\ub798\ubc0d \ubc0f \uae30\ud0c0 \uc720\ud589\uc5b4\uc5d0 \ub300\ud574 \uc790\uc8fc \uc774\uc57c\uae30\ud569\ub2c8\ub2e4. \ub610\ud55c Clever Cloud\uc640 Nuxeo\uc758 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\ub85c \ud65c\ub3d9\ud558\uba70 \ud574\ub2f9 \ucee4\ubba4\ub2c8\ud2f0\uac00 \ub354 \ud06c\uace0 \uac15\ub825\ud558\uac8c \uc131\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \uc790\uc2e0\uc758 \uc2dc\uac04\uacfc \uc804\ubb38\uc131\uc744 \ubc14\ucce4\uc2b5\ub2c8\ub2e4. \ud604\uc7ac Couchbase\uc5d0\uc11c \uac1c\ubc1c\uc790 \uad00\uacc4\ub97c \uc6b4\uc601\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.","sameAs":["https:\/\/x.com\/ldoguin"],"honorificPrefix":"Mr","birthDate":"1985-06-07","gender":"male","award":["Devoxx Champion","Couchbase Legend"],"knowsAbout":["Java"],"knowsLanguage":["English","French"],"jobTitle":"Director Developer Relation & Strategy","worksFor":"Couchbase","url":"https:\/\/www.couchbase.com\/blog\/ko\/author\/laurent-doguin\/"}]}},"authors":[{"term_id":9023,"user_id":49,"is_guest":0,"slug":"laurent-doguin","display_name":"Laurent Doguin","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/b8c466908092b46634af916b6921f30187a051e4367ded7ac9b1a3f2c5692fd2?s=96&d=mm&r=g","author_category":"","last_name":"Doguin","first_name":"Laurent","job_title":"","user_url":"","description":"Laurent\ub294 \ud30c\ub9ac\uc5d0 \uc0ac\ub294 \uad34\uc9dc \uae08\uc18d\uacf5\ud559\ub3c4\uc785\ub2c8\ub2e4. \uc8fc\ub85c Java\ub85c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\uace0 AsciiDoc\uc73c\ub85c \uad6c\uc870\ud654\ub41c \ud14d\uc2a4\ud2b8\ub97c \uc791\uc131\ud558\uba70 \ub370\uc774\ud130, \ub9ac\uc561\ud2f0\ube0c \ud504\ub85c\uadf8\ub798\ubc0d \ubc0f \uae30\ud0c0 \uc720\ud589\uc5b4\uc5d0 \ub300\ud574 \uc790\uc8fc \uc774\uc57c\uae30\ud569\ub2c8\ub2e4. \ub610\ud55c Clever Cloud\uc640 Nuxeo\uc758 \uac1c\ubc1c\uc790 \uc639\ud638\uc790\ub85c \ud65c\ub3d9\ud558\uba70 \ud574\ub2f9 \ucee4\ubba4\ub2c8\ud2f0\uac00 \ub354 \ud06c\uace0 \uac15\ub825\ud558\uac8c \uc131\uc7a5\ud560 \uc218 \uc788\ub3c4\ub85d \uc790\uc2e0\uc758 \uc2dc\uac04\uacfc \uc804\ubb38\uc131\uc744 \ubc14\ucce4\uc2b5\ub2c8\ub2e4. \ud604\uc7ac Couchbase\uc5d0\uc11c \uac1c\ubc1c\uc790 \uad00\uacc4\ub97c \uc6b4\uc601\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/14768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/comments?post=14768"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/posts\/14768\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media\/14772"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/media?parent=14768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/categories?post=14768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/tags?post=14768"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/ko\/wp-json\/wp\/v2\/ppma_author?post=14768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}