{"id":26877,"date":"2025-04-01T15:51:57","date_gmt":"2025-04-01T08:51:57","guid":{"rendered":"https:\/\/hitek.com.vn\/?p=26877"},"modified":"2025-04-01T15:54:14","modified_gmt":"2025-04-01T08:54:14","slug":"web-development-project","status":"publish","type":"post","link":"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/","title":{"rendered":"\uc6f9\uac1c\ubc1c\uc790\ub85c\uc11c \ub098\uc758 \uccab\ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8: \uc131\uacf5\uacfc \uc2e4\ud328\ub97c \ub2f4\uc740 \uae30\ub85d"},"content":{"rendered":"<p>\uc6f9 \uac1c\ubc1c\uc758 \uc138\uacc4\uc5d0 \uccab\ubc1c\uc744 \ub0b4\ub51b\ub294 \uc21c\uac04\uc740 \uc124\ub818\uacfc \ub450\ub824\uc6c0\uc774 \uacf5\uc874\ud55c\ub2e4. \ucf54\ub4dc \ud55c \uc904 \ud55c \uc904\uc774 \uc0c8\ub85c\uc6b4 \ub3c4\uc804\uc774 \ub418\uace0, \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub294 \ub54c\ub860 \ub0af\uc120 \uc678\uacc4\uc5b4\ucc98\ub7fc \ub290\uaef4\uc9c0\uae30\ub3c4 \ud55c\ub2e4. \ub098 \uc5ed\uc2dc <strong>\uccab \uc6f9 \uac1c\ubc1c \ud504\ub85c\uc81d\ud2b8<\/strong>\ub97c \uc9c4\ud589\ud558\uba70 \uc218\ub9ce\uc740 \uc2dc\ud589\ucc29\uc624\ub97c \uacaa\uc5c8\uace0, \uadf8 \uacfc\uc815\uc5d0\uc11c \uc5bb\uc740 \uad50\ud6c8\uc740 \uc9c0\uae08\ub3c4 \ub098\uc758 \uac1c\ubc1c \ucca0\ud559\uc744 \ud615\uc131\ud558\uace0 \uc788\ub2e4.<\/p>\n<p>\uc774 \uae00\uc5d0\uc11c\ub294 <strong>\ucd08\ubcf4 \uc6f9 \uac1c\ubc1c\uc790<\/strong>\ub85c\uc11c \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uae30\ud68d\ud558\uace0 \uad6c\ud604\ud558\uba70 \ub9c8\uc8fc\ucce4\ub358 \ubb38\uc81c\ub4e4, \uadf8\ub9ac\uace0 \uadf8 \ubb38\uc81c\ub4e4\uc744 \ud574\uacb0\ud55c \ubc29\ubc95\uc744 \uacf5\uc720\ud55c\ub2e4. \ub610\ud55c, <strong>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\uc758 \uae30\ubcf8 \uae30\uc220 \uc2a4\ud0dd<\/strong>\ubd80\ud130 <strong>\ud611\uc5c5 \ud301<\/strong>\uae4c\uc9c0, \uc9c0\uae08 \ub3cc\uc774\ucf1c\ubcf4\uba74 \uc54c\uc558\ub354\ub77c\uba74 \uc88b\uc558\uc744 \uac83\ub4e4\uc744 \uc815\ub9ac\ud574\ubcf8\ub2e4.<\/p>\n<hr \/>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#1_%EC%B2%AB_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0_%EC%A0%84_%EB%AC%B4%EC%97%87%EC%9D%84_%EC%A4%80%EB%B9%84%ED%95%B4%EC%95%BC_%ED%95%A0%EA%B9%8C\" >1. \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\uae30 \uc804: \ubb34\uc5c7\uc744 \uc900\ube44\ud574\uc57c \ud560\uae4c?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#2_%EA%B8%B0%EC%88%A0_%EC%8A%A4%ED%83%9D_%EC%84%A0%ED%83%9D_%EC%96%B4%EB%96%A4_%EB%8F%84%EA%B5%AC%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC_%ED%95%A0%EA%B9%8C\" >2. \uae30\uc220 \uc2a4\ud0dd \uc120\ud0dd: \uc5b4\ub5a4 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560\uae4c?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#3_%EA%B0%9C%EB%B0%9C_%EA%B3%BC%EC%A0%95%EC%97%90%EC%84%9C_%EB%A7%88%EC%A3%BC%EC%B9%9C_3%EA%B0%80%EC%A7%80_%EB%AC%B8%EC%A0%9C_%EA%B7%B8%EB%A6%AC%EA%B3%A0_%ED%95%B4%EA%B2%B0%EB%B2%95\" >3. \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c \ub9c8\uc8fc\uce5c 3\uac00\uc9c0 \ubb38\uc81c (\uadf8\ub9ac\uace0 \ud574\uacb0\ubc95)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#1_%EB%B0%B1%EC%97%94%EB%93%9C_API_%EC%97%B0%EA%B2%B0%EC%97%90%EC%84%9C_CORS_%EC%98%A4%EB%A5%98_%EB%B0%9C%EC%83%9D\" >(1) \ubc31\uc5d4\ub4dc API \uc5f0\uacb0\uc5d0\uc11c CORS \uc624\ub958 \ubc1c\uc0dd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#2_%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EC%97%B0%EA%B2%B0_%EC%8B%A4%ED%8C%A8\" >(2) \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc5f0\uacb0 \uc2e4\ud328<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#3_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%B4_%EC%A0%9C%EB%8C%80%EB%A1%9C_%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80_%EC%95%8A%EC%9D%8C\" >(3) \ubc18\uc751\ud615 \ub514\uc790\uc778\uc774 \uc81c\ub300\ub85c \uc801\uc6a9\ub418\uc9c0 \uc54a\uc74c<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#4_%EC%B2%AB_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EB%A7%88%EC%B9%98%EA%B3%A0_%EB%B0%B0%EC%9A%B4_%EA%B2%83\" >4. \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \ub9c8\uce58\uace0 \ubc30\uc6b4 \uac83<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#5_%EB%8B%A4%EC%9D%8C_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EC%9C%84%ED%95%9C_%EB%8F%84%EC%A0%84\" >5. \ub2e4\uc74c \ud504\ub85c\uc81d\ud2b8\ub97c \uc704\ud55c \ub3c4\uc804<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/web-development-project\/#%EB%A7%88%EC%B9%98%EB%A9%B0_%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98_%EC%97%AC%EC%A0%95%EC%9D%80_%EA%B3%84%EC%86%8D%EB%90%9C%EB%8B%A4\" >\ub9c8\uce58\uba70: \uc6f9 \uac1c\ubc1c\uc790\uc758 \uc5ec\uc815\uc740 \uacc4\uc18d\ub41c\ub2e4<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"-1-\"><span class=\"ez-toc-section\" id=\"1_%EC%B2%AB_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0_%EC%A0%84_%EB%AC%B4%EC%97%87%EC%9D%84_%EC%A4%80%EB%B9%84%ED%95%B4%EC%95%BC_%ED%95%A0%EA%B9%8C\"><\/span><strong>1. \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\uae30 \uc804: \ubb34\uc5c7\uc744 \uc900\ube44\ud574\uc57c \ud560\uae4c?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud560 \ub54c \uac00\uc7a5 \ud070 \uace0\ubbfc\uc740 <strong>&#8220;\ubb34\uc5c7\uc744 \ub9cc\ub4e4 \uac83\uc778\uac00?&#8221;<\/strong>\uc600\ub2e4. \ub108\ubb34 \ubcf5\uc7a1\ud55c \ud504\ub85c\uc81d\ud2b8\ub294 \uc644\uc131\ud558\uae30 \uc5b4\ub835\uace0, \ub108\ubb34 \ub2e8\uc21c\ud55c \ud504\ub85c\uc81d\ud2b8\ub294 \uc131\ucde8\uac10\uc774 \ub5a8\uc5b4\uc9c8 \uc218 \uc788\ub2e4. \ub098\ub294 <strong>\uac04\ub2e8\ud55c \ud22c\ub450\ub9ac\uc2a4\ud2b8(Todo List) \uc6f9 \uc571<\/strong>\uc744 \uc120\ud0dd\ud588\ub294\ub370, \uadf8 \uc774\uc720\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<ul>\n<li><strong>CRUD (Create, Read, Update, Delete)<\/strong> \uae30\ub2a5\uc744 \ubaa8\ub450 \uc5f0\uc2b5\ud560 \uc218 \uc788\ub2e4.<\/li>\n<li><strong>\ud504\ub860\ud2b8\uc5d4\ub4dc(HTML, CSS, JavaScript)\uc640 \ubc31\uc5d4\ub4dc(Node.js, Express)<\/strong>\ub97c \ud568\uaed8 \ub2e4\ub8f0 \uc218 \uc788\ub2e4.<\/li>\n<li><strong>\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub098 \ub370\uc774\ud130\ubca0\uc774\uc2a4(MySQL, MongoDB)<\/strong>\ub97c \ud65c\uc6a9\ud574 \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6b8 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<p>\ub9cc\uc57d \uc9c0\uae08 \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud55c\ub2e4\uba74, <a href=\"https:\/\/developer.mozilla.org\/ko\/\" target=\"_blank\" rel=\"noopener\">MDN \uc6f9 \ubb38\uc11c<\/a>\ub098 <a href=\"https:\/\/wikibook.co.kr\/javascript\/\" target=\"_blank\" rel=\"noopener\">\uc704\ud0a4\ubd81\uc2a4\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud29c\ud1a0\ub9ac\uc5bc<\/a>\uc744 \ucc38\uace0\ud574 \uae30\ubcf8\uae30\ub97c \ud0c4\ud0c4\ud788 \ub2e4\uc9c4 \ud6c4 \uc2dc\uc791\ud560 \uac83\uc744 \ucd94\ucc9c\ud55c\ub2e4.<\/p>\n<hr \/>\n<h2 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EA%B8%B0%EC%88%A0_%EC%8A%A4%ED%83%9D_%EC%84%A0%ED%83%9D_%EC%96%B4%EB%96%A4_%EB%8F%84%EA%B5%AC%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC_%ED%95%A0%EA%B9%8C\"><\/span><strong>2. \uae30\uc220 \uc2a4\ud0dd \uc120\ud0dd: \uc5b4\ub5a4 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud574\uc57c \ud560\uae4c?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uccab \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \ucd5c\uc2e0 \uae30\uc220\ubcf4\ub2e4\ub294 <strong>\uae30\ubcf8\uc5d0 \ucda9\uc2e4\ud55c \uc2a4\ud0dd<\/strong>\uc744 \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. \ub098\ub294 \uc544\ub798\uc640 \uac19\uc740 \uae30\uc220\uc744 \uc0ac\uc6a9\ud588\ub2e4.<\/p>\n<table>\n<thead>\n<tr>\n<th><strong>\ubd84\uc57c<\/strong><\/th>\n<th><strong>\uc0ac\uc6a9 \uae30\uc220<\/strong><\/th>\n<th><strong>\uc120\ud0dd \uc774\uc720<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\ud504\ub860\ud2b8\uc5d4\ub4dc<\/td>\n<td>HTML, CSS, JavaScript<\/td>\n<td>\uc6f9 \uac1c\ubc1c\uc758 \uae30\ubcf8\uc774 \ub418\ub294 \uae30\uc220\ub85c, \ubcf5\uc7a1\ud55c \ud504\ub808\uc784\uc6cc\ud06c \uc5c6\uc774\ub3c4 \ucda9\ubd84\ud788 \uad6c\ud604 \uac00\ub2a5<\/td>\n<\/tr>\n<tr>\n<td>\ubc31\uc5d4\ub4dc<\/td>\n<td>Node.js + Express<\/td>\n<td>JavaScript\ub85c \ubc31\uc5d4\ub4dc\uae4c\uc9c0 \ucc98\ub9ac\ud560 \uc218 \uc788\uc5b4 \ud559\uc2b5 \uace1\uc120\uc774 \ub0ae\uc74c<\/td>\n<\/tr>\n<tr>\n<td>\ub370\uc774\ud130\ubca0\uc774\uc2a4<\/td>\n<td>MongoDB (Mongoose)<\/td>\n<td>NoSQL\uc758 \uc720\uc5f0\ud568\uc774 \ucd08\ubcf4\uc790\uc5d0\uac8c \uc811\uadfc\ud558\uae30 \uc26c\uc6c0<\/td>\n<\/tr>\n<tr>\n<td>\ubc30\ud3ec<\/td>\n<td>Heroku<\/td>\n<td>\ubb34\ub8cc\ub85c \uc0ac\uc6a9 \uac00\ub2a5\ud558\uace0, \ucd08\ubcf4\uc790\ub3c4 \uc27d\uac8c \ubc30\ud3ec\ud560 \uc218 \uc788\uc74c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\ub9cc\uc57d \uc9c0\uae08\uc774\ub77c\uba74, <strong>React<\/strong>\ub098 <strong>Vue.js<\/strong> \uac19\uc740 \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ub3c4\uc785\ud574\ubcf4\ub294 \uac83\ub3c4 \uc88b\ub2e4. \ud558\uc9c0\ub9cc \uae30\ubcf8\uc801\uc778 <strong>DOM \uc870\uc791<\/strong>\uacfc <strong>Vanilla JavaScript<\/strong>\ub97c \uba3c\uc800 \uc775\ud788\ub294 \uac83\uc774 \ub354 \uc911\uc694\ud558\ub2e4\uace0 \uc0dd\uac01\ud55c\ub2e4.<\/p>\n<hr \/>\n<h2 id=\"-3-3-\"><span class=\"ez-toc-section\" id=\"3_%EA%B0%9C%EB%B0%9C_%EA%B3%BC%EC%A0%95%EC%97%90%EC%84%9C_%EB%A7%88%EC%A3%BC%EC%B9%9C_3%EA%B0%80%EC%A7%80_%EB%AC%B8%EC%A0%9C_%EA%B7%B8%EB%A6%AC%EA%B3%A0_%ED%95%B4%EA%B2%B0%EB%B2%95\"><\/span><strong>3. \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c \ub9c8\uc8fc\uce5c 3\uac00\uc9c0 \ubb38\uc81c (\uadf8\ub9ac\uace0 \ud574\uacb0\ubc95)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-api-cors-\"><span class=\"ez-toc-section\" id=\"1_%EB%B0%B1%EC%97%94%EB%93%9C_API_%EC%97%B0%EA%B2%B0%EC%97%90%EC%84%9C_CORS_%EC%98%A4%EB%A5%98_%EB%B0%9C%EC%83%9D\"><\/span><strong>(1) \ubc31\uc5d4\ub4dc API \uc5f0\uacb0\uc5d0\uc11c CORS \uc624\ub958 \ubc1c\uc0dd<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\ub97c \uc5f0\uacb0\ud560 \ub54c, <strong>CORS(Cross-Origin Resource Sharing)<\/strong> \uc815\ucc45 \ub54c\ubb38\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\uc9c0 \ubabb\ud558\ub294 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\ub2e4.<\/p>\n<p><strong>\ud574\uacb0\ubc95:<\/strong><br \/>\nExpress \uc11c\ubc84\uc5d0 CORS \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \ucd94\uac00\ud588\ub2e4.<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">const<\/span> cors = <span class=\"hljs-keyword\">require<\/span>(<span class=\"hljs-string\">'cors'<\/span>);\r\napp.<span class=\"hljs-keyword\">use<\/span>(cors());\r\n<\/code><\/pre>\n<p>\ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 <a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/HTTP\/CORS\" target=\"_blank\" rel=\"noopener\">CORS MDN \ubb38\uc11c<\/a>\ub97c \ucc38\uace0\ud558\uba74 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/p>\n<h3 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EC%97%B0%EA%B2%B0_%EC%8B%A4%ED%8C%A8\"><\/span><strong>(2) \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc5f0\uacb0 \uc2e4\ud328<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>MongoDB Atlas\ub97c \uc0ac\uc6a9\ud574 \ud074\ub77c\uc6b0\ub4dc DB\ub97c \uc5f0\uacb0\ud588\ub294\ub370, \uc5f0\uacb0\uc774 \uacc4\uc18d \ub04a\uacbc\ub2e4.<\/p>\n<p><strong>\ud574\uacb0\ubc95:<\/strong><\/p>\n<ul>\n<li><strong>\uc5f0\uacb0 \ubb38\uc790\uc5f4(Connection String)<\/strong>\uc5d0 \uc624\ud0c0\uac00 \uc788\uc5c8\ub294\uc9c0 \ud655\uc778<\/li>\n<li><strong>IP \ud654\uc774\ud2b8\ub9ac\uc2a4\ud2b8<\/strong>\uc5d0 \ub0b4 IP\ub97c \ucd94\uac00\ud588\ub294\uc9c0 \ud655\uc778<\/li>\n<li><strong>\ud658\uacbd \ubcc0\uc218(.env)<\/strong>\ub97c \uc0ac\uc6a9\ud574 \ubcf4\uc548 \uac15\ud654<\/li>\n<\/ul>\n<h3 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%B4_%EC%A0%9C%EB%8C%80%EB%A1%9C_%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80_%EC%95%8A%EC%9D%8C\"><\/span><strong>(3) \ubc18\uc751\ud615 \ub514\uc790\uc778\uc774 \uc81c\ub300\ub85c \uc801\uc6a9\ub418\uc9c0 \uc54a\uc74c<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\ubaa8\ubc14\uc77c\uc5d0\uc11c \ub808\uc774\uc544\uc6c3\uc774 \uae68\uc9c0\ub294 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud588\ub2e4.<\/p>\n<p><strong>\ud574\uacb0\ubc95:<\/strong><\/p>\n<ul>\n<li><strong>\ubbf8\ub514\uc5b4 \ucffc\ub9ac<\/strong> \uc801\uc6a9\n<pre><code class=\"lang-css\">@<span class=\"hljs-keyword\">media<\/span> (max-width: <span class=\"hljs-number\">600px<\/span>) {\r\n<span class=\"hljs-selector-class\">.container<\/span> { <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>; }\r\n}\r\n<\/code><\/pre>\n<\/li>\n<li><strong>Flexbox<\/strong> \ub610\ub294 <strong>CSS Grid<\/strong>\ub97c \ud65c\uc6a9\ud574 \uc720\uc5f0\ud55c \ub808\uc774\uc544\uc6c3 \uad6c\uc131<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"-4-\"><span class=\"ez-toc-section\" id=\"4_%EC%B2%AB_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EB%A7%88%EC%B9%98%EA%B3%A0_%EB%B0%B0%EC%9A%B4_%EA%B2%83\"><\/span><strong>4. \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \ub9c8\uce58\uace0 \ubc30\uc6b4 \uac83<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>\uae30\ubcf8\uae30\uac00 \uac00\uc7a5 \uc911\uc694\ud558\ub2e4<\/strong>\n<ul>\n<li>\ud504\ub808\uc784\uc6cc\ud06c\ubcf4\ub2e4 \uc21c\uc218 JavaScript\uc640 CSS \uc774\ud574\uac00 \uba3c\uc800\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \ub450\ub824\uc6cc\ud558\uc9c0 \ub9d0 \uac83<\/strong>\n<ul>\n<li>\uad6c\uae00 \uac80\uc0c9\uacfc <a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noopener\">Stack Overflow<\/a>\uc5d0\uc11c \ub300\ubd80\ubd84\uc758 \ud574\uacb0\ucc45\uc744 \ucc3e\uc744 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>\uae30\ub85d\ud558\ub294 \uc2b5\uad00\uc744 \ub4e4\uc77c \uac83<\/strong>\n<ul>\n<li>\ube14\ub85c\uadf8\ub098 <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub<\/a>\uc5d0 \ud504\ub85c\uc81d\ud2b8 \uacfc\uc815\uc744 \uc815\ub9ac\ud558\uba74 \ub098\uc911\uc5d0 \ud070 \ub3c4\uc6c0\uc774 \ub41c\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<hr \/>\n<h2 id=\"-5-\"><span class=\"ez-toc-section\" id=\"5_%EB%8B%A4%EC%9D%8C_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC_%EC%9C%84%ED%95%9C_%EB%8F%84%EC%A0%84\"><\/span><strong>5. \ub2e4\uc74c \ud504\ub85c\uc81d\ud2b8\ub97c \uc704\ud55c \ub3c4\uc804<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uc644\uc131\ud55c \ud6c4, \ub098\ub294 <strong>\uc0ac\uc774\ub4dc \ud504\ub85c\uc81d\ud2b8 \ubb38\ud654<\/strong>\uc758 \uc911\uc694\uc131\uc744 \uae68\ub2ec\uc558\ub2e4. \uc6f9 \uac1c\ubc1c\uc740 \ub04a\uc784\uc5c6\uc774 \ubc30\uc6cc\uc57c \ud558\ub294 \ubd84\uc57c\uc774\uae30 \ub54c\ubb38\uc5d0, \uc791\uc740 \ud504\ub85c\uc81d\ud2b8\ub77c\ub3c4 \uafb8\uc900\ud788 \ub3c4\uc804\ud558\ub294 \uac83\uc774 \uc131\uc7a5\uc758 \uc5f4\uc1e0\ub2e4.<\/p>\n<p><strong>\ub2e4\uc74c \ubaa9\ud45c:<\/strong><\/p>\n<ul>\n<li><strong>React + Firebase<\/strong>\ub85c \uc18c\uc15c \ub85c\uadf8\uc778 \uae30\ub2a5 \ucd94\uac00<\/li>\n<li><strong>TypeScript<\/strong> \ub3c4\uc785\ud574 \ub354 \uc548\uc815\uc801\uc778 \ucf54\ub4dc \uc791\uc131<\/li>\n<li><strong>AWS \ub610\ub294 Vercel<\/strong>\ub85c \uc9c1\uc811 \ubc30\ud3ec\ud574\ubcf4\uae30<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"-\"><span class=\"ez-toc-section\" id=\"%EB%A7%88%EC%B9%98%EB%A9%B0_%EC%9B%B9_%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98_%EC%97%AC%EC%A0%95%EC%9D%80_%EA%B3%84%EC%86%8D%EB%90%9C%EB%8B%A4\"><\/span><strong>\ub9c8\uce58\uba70: \uc6f9 \uac1c\ubc1c\uc790\uc758 \uc5ec\uc815\uc740 \uacc4\uc18d\ub41c\ub2e4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\uccab \ud504\ub85c\uc81d\ud2b8\ub294 \uc644\ubcbd\ud560 \ud544\uc694 \uc5c6\ub2e4. \uc911\uc694\ud55c \uac74 <strong>\uc2dc\ub3c4\ud558\uace0, \uc2e4\ud328\ud558\uace0, \ubc30\uc6b0\ub294 \uacfc\uc815<\/strong>\uc774\ub2e4. \uc9c0\uae08\ub3c4 \ub098\ub294 \uc0c8\ub85c\uc6b4 \uae30\uc220\uc744 \ubc30\uc6b0\uba70 \uc870\uae08\uc529 \uc131\uc7a5\ud558\uace0 \uc788\ub2e4.<\/p>\n<p><strong>\ub2f9\uc2e0\uc758 \uccab \ud504\ub85c\uc81d\ud2b8\ub294 \ubb34\uc5c7\uc778\uac00\uc694?<\/strong><br \/>\n\uc544\uc9c1 \uc2dc\uc791\ud558\uc9c0 \uc54a\uc558\ub2e4\uba74, \uc624\ub298 \ub2f9\uc7a5 \uc791\uc740 \ud504\ub85c\uc81d\ud2b8\ub97c \ud558\ub098 \uc2dc\uc791\ud574\ubcf4\uc790. <strong>\ucf54\ub4dc \ud55c \uc904\uc774 \ub2f9\uc2e0\uc758 \uac1c\ubc1c\uc790 \uc5ec\uc815\uc744 \ubc14\uafc0 \uc218\ub3c4 \uc788\ub2e4.<\/strong><\/p>\n<blockquote><p><strong>&#8220;\uc6f9 \uac1c\ubc1c\uc740 \ub2e8\uc21c\ud788 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c, \ubb38\uc81c\ub97c \ud574\uacb0\ud558\ub294 \uacfc\uc815\uc774\ub2e4.&#8221;<\/strong><\/p><\/blockquote>\n<p><strong>\uccab \ud504\ub85c\uc81d\ud2b8\uc758 \ucf54\ub4dc\uac00 \uad81\uae08\ud558\ub2e4\uba74?<\/strong> GitHub \ub808\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \ubc29\ubb38\ud574\ubcf4\uc138\uc694!<\/p>\n<hr \/>\n<p>\uc774 \uae00\uc774 <strong>\ucd08\ubcf4 \uc6f9 \uac1c\ubc1c\uc790<\/strong>\ub4e4\uc5d0\uac8c \uc870\uae08\uc774\ub098\ub9c8 \ub3c4\uc6c0\uc774 \ub418\uae38 \ubc14\ub780\ub2e4. \ud568\uaed8 \uc131\uc7a5\ud558\ub294 \uac1c\ubc1c\uc790 \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c \ub9cc\ub098\uc694!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 \uac1c\ubc1c\uc758 \uc138\uacc4\uc5d0 \uccab\ubc1c\uc744 \ub0b4\ub51b\ub294 \uc21c\uac04\uc740 \uc124\ub818\uacfc \ub450\ub824\uc6c0\uc774 \uacf5\uc874\ud55c\ub2e4. \ucf54\ub4dc \ud55c \uc904 \ud55c \uc904\uc774 \uc0c8\ub85c\uc6b4 \ub3c4\uc804\uc774 \ub418\uace0, \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub294 \ub54c\ub860 \ub0af\uc120 \uc678\uacc4\uc5b4\ucc98\ub7fc \ub290\uaef4\uc9c0\uae30\ub3c4 \ud55c\ub2e4. \ub098 \uc5ed\uc2dc \uccab \uc6f9 \uac1c\ubc1c \ud504\ub85c\uc81d\ud2b8\ub97c \uc9c4\ud589\ud558\uba70 \uc218\ub9ce\uc740 \uc2dc\ud589\ucc29\uc624\ub97c \uacaa\uc5c8\uace0, \uadf8 \uacfc\uc815\uc5d0\uc11c \uc5bb\uc740 \uad50\ud6c8\uc740 \uc9c0\uae08\ub3c4 \ub098\uc758 \uac1c\ubc1c \ucca0\ud559\uc744 \ud615\uc131\ud558\uace0 \uc788\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 \ucd08\ubcf4 \uc6f9 \uac1c\ubc1c\uc790\ub85c\uc11c \uccab \ud504\ub85c\uc81d\ud2b8\ub97c \uae30\ud68d\ud558\uace0 \uad6c\ud604\ud558\uba70 \ub9c8\uc8fc\ucce4\ub358 \ubb38\uc81c\ub4e4, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":26878,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[70],"tags":[],"class_list":["post-26877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-ko"],"_links":{"self":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/comments?post=26877"}],"version-history":[{"count":3,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26877\/revisions"}],"predecessor-version":[{"id":26884,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26877\/revisions\/26884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media\/26878"}],"wp:attachment":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media?parent=26877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/categories?post=26877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/tags?post=26877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}