{"id":186,"date":"2026-06-26T13:33:16","date_gmt":"2026-06-26T13:33:16","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=186"},"modified":"2026-06-26T13:33:16","modified_gmt":"2026-06-26T13:33:16","slug":"%ed%99%98%ea%b2%bd%ec%84%a4%ec%a0%95","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=186","title":{"rendered":"\ud658\uacbd\uc124\uc815"},"content":{"rendered":"<h3><strong>1. \ub808\uc2dc\ud53c \uc571 \uc18c\uac1c<\/strong><\/h3>\n<blockquote>\n<p>\uc774\ubc88 \ud074\ub798\uc2a4\ub294 \ub808\uc2dc\ud53c\ub97c \uc18c\uac1c\ud558\ub294 \uc571\uc744 \uc81c\uc791\ud560 \uac83\uc774\ub2e4.<\/p>\n<\/blockquote>\n<p>  \uc774 \ub9ac\uc561\ud2b8 \uc571\uc5d0 \uc0ac\uc6a9\ub41c \uae30\uc220 \uc2a4\ud0dd\uc740\u00a0<strong>axios , react-router<\/strong>\u00a0\ub4f1 \uc774\uba70 \uacf5\uacf5API\ub97c \uc5f0\ub3d9\ud558\ub294 \ud559\uc2b5\ub3c4 \ud558\uac8c \ub420 \uac83\uc774\ub2e4.<br \/>\n  \uac15\uc758\ub294 \uacf5\uacf5API \ub370\uc774\ud130\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc95\uacfc \ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0 \ubc0f \ub77c\uc6b0\ud130 \uc124\uc815\uc5d0 \ucd1b\uc810\uc744 \ub9de\ucd94\ubbc0\ub85c \uc0ac\uc6a9\ub418\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uba54\uc11c\ub4dc \ub098 \uc2a4\ud0c0\uc77c\ub9c1 \uad00\ub828 \ucf54\ub4dc\ub294 \ubcc4\ub3c4\uc758 \uc124\uba85 \uc5c6\uc774 \uc9c4\ud589\ub41c\ub2e4.<br \/>\n  \ubcf8 \uac15\uc758\ub294 \ucd08\uc2ec\uc790\ub97c \ub300\uc0c1\uc73c\ub85c \uc81c\uc791 \ud558\uc600\uc73c\uba70 \ud37c\ud3ec\uba3c\uc2a4 \ucd5c\uc801\ud654 \ubcf4\ub2e4\ub294 \ucd08\uc2ec\uc790\uac00 \uc774\ud574\ud558\uae30 \uc26c\uc6b4 \ubc29\ud5a5\uc758 \ucf54\ub4dc\ub85c \uad6c\uc131\ud558\uc600\ub2e4.<br \/>\n\ud83d\udd17<a href=\"https:\/\/recipe-app-gray-seven.vercel.app\/\">\uc81c\uc791\ud560 \uc571 \ubcf4\uae30<\/a><\/p>\n<h3><strong>2. \uac1c\ubc1c \ud658\uacbd\uc124\uc815<\/strong><\/h3>\n<p><strong>\ub9ac\uc561\ud2b8\uc18c\uac1c\uc640 \ud658\uacbd\uc124\uc815<\/strong><br \/>\n\ub9ac\uc561\ud2b8\uc758 \uac1c\uc694\uc640 \uac1c\ubc1c \ud658\uacbd \uc124\uc815\uc740 \uc704\uc758 \ub9c1\ud06c\ub97c \ucc38\uace0\ud574\uc11c \uc9c4\ud589\ud55c\ub2e4.<\/p>\n<h3><strong>3. \uae43 \uc124\uce58<\/strong><\/h3>\n<p><strong>\uae43\uacfc \uae43\ud5c8\ube0c \uc124\uce58\ud558\uae30<\/strong><br \/>\n\uae43\uacfc \uae43\ud5c8\ube0c\uc758 \uac1c\ubc1c \ud658\uacbd \uc124\uc815\uc740 \uc704\uc758 \ub9c1\ud06c\ub97c \ucc38\uace0\ud574\uc11c \uc9c4\ud589\ud55c\ub2e4.<\/p>\n<h3><strong>4. VSCode \uc124\uce58<\/strong><\/h3>\n<p><a href=\"https:\/\/code.visualstudio.com\/download\"><strong>vscode \ub2e4\uc6b4\ub85c\ub4dc<\/strong><\/a><\/p>\n<h3><strong>5. \ub9ac\uc561\ud2b8 \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8 \uc124\uce58\ud558\uae30<\/strong><\/h3>\n<ol>\n<li>\uc544\ub798\uc758 \ub9c1\ud06c\ub85c \uc774\ub3d9\ud55c\ub2e4<br \/>\n  \ud83d\udd17<a href=\"https:\/\/chromewebstore.google.com\/detail\/react-developer-tools\/fmkadmapgofadopljbjfkapdkoienihi?pli=1\"><strong>React Developer Tools<\/strong><\/a><\/li>\n<li>\uc544\ub798 \uadf8\ub9bc\uc5d0 \ud45c\uc2dc\ub41c \ubc84\ud2bc\uc744 \ud074\ub9ad\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_623.jpg\" alt=\"\"><\/p>\n<ol>\n<li>2\ubc88\uc744 \uc9c4\ud589\ud558\uba74 \uc544\ub798\uc640 \uac19\uc740 \ud31d\uc5c5\ucc3d\uc774 \uc5f4\ub9b0\ub2e4. \ud45c\uc2dc\ub41c \ubd80\ubd84\uc744 \ud074\ub9ad\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_622.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\ud06c\ub86c \uc8fc\uc18c\ud45c\uc2dc\uc904 \uc6b0\uce21\uc758\u00a0\u00a0\uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud55c\ub2e4. \uc774\uc81c \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8\uc744 \uc138\ud305 \ud560 \uac83 \uc774\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_621.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\uc544\ub798\uc758 \uadf8\ub9bc\uc5d0 \ud45c\uc2dc\ub41c \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8\uc744 \ucc3e\uc544 \u2460\uc744 \ud074\ub9ad \ud55c \ub2e4\uc74c \u2461 \ub97c \ud074\ub9ad \ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_624.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\uc544\ub798 \uadf8\ub9bc\uacfc \uac19\uc740 \ud398\uc774\uc9c0\uac00 \ubcf4\uc774\uba74 \ud45c\uc2dc\ub41c \uacf3\uc744 \uc21c\uc11c\ub300\ub85c \ud074\ub9ad\ud558\uc5ec \uadf8\ub9bc\ucc98\ub7fc \ud65c\uc131\ud654 \uc0c1\ud0dc\ub85c \ubcc0\uacbd\ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_625.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\uc774\uc81c \uc8fc\uc18c\ud45c\uc2dc\uc904 \uc6b0\uce21\uc5d0 \ud45c\uc2dc\ub41c \uc544\uc774\ucf58\uc774 \ud655\uc778\ub41c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_626.jpg\" alt=\"\"><\/p>\n<h4><strong>5.1. React Devtools \uc0ac\uc6a9\ud574\ubcf4\uae30<\/strong><\/h4>\n<ol>\n<li>\uc544\ub798\uc758 \ub9c1\ud06c\ub85c \uc774\ub3d9\ud55c\ub2e4.<br \/>\n  \ud83d\udd17<a href=\"https:\/\/recipe-app-gray-seven.vercel.app\/\"><strong>\ub9c1\ud06c<\/strong><\/a><\/li>\n<li>\ubcf4\uace0\uc788\ub294 \ud398\uc774\uc9c0\uac00 \ub9ac\uc561\ud2b8\ub85c \uc81c\uc791 \ub418\uc5c8\uc744\uacbd\uc6b0 \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8 \uc544\uc774\ucf58\uc758 \uc0c9\uc0c1\uc774 \uc9c4\ud574\uc9c4\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_628.jpg\" alt=\"\"><\/p>\n<ol>\n<li>F12\u00a0\ud0a4\ub97c \ub20c\ub7ec \uac1c\ubc1c\uc790\ub3c4\uad6c\ub97c \uc2e4\ud589\ud55c\ub2e4. \uadf8\ud6c4 \uc544\ub798 \uadf8\ub9bc\uc758 1\ubc88\uc744 \ud074\ub9ad\ud558\uba74 2,3\uc758 \uba54\ub274\uac00 \ud655\uc778\ub41c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/04-25_629.jpg\" alt=\"\"><\/p>\n<ol>\n<li>\uc544\ub798\uc758 \uadf8\ub9bc\ucc98\ub7fc \uac1c\ubc1c\uc790 \uba54\ub274\ub97c \uc55e\uc73c\ub85c \uaebc\ub0b8\ub2e4. 3\ubc88 \ub2e8\uacc4\uc758 2,3 \uba54\ub274\ub97c \uac01\uac01 \ud074\ub9ad\ud558\uc5ec \ub4dc\ub798\uadf8\ub4dc\ub78d \ud55c\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/react.gif\" alt=\"\"><\/p>\n<ol>\n<li>\uc0ac\uc6a9\ubc95 \uc544\ub798\uc758 \uadf8\ub9bc\ucc98\ub7fc \ub9ac\uc561\ud2b8 \uc778\uc2a4\ud399\ud2b8\ud130\ub97c \ud074\ub9ad\ud55c\ud6c4 \ud655\uc778\ud558\uace0 \uc2f6\uc740 \uc694\uc18c\ub97c \ud074\ub9ad\ud55c\ub2e4\uc6b0\uce21\ud328\ub110\uc5d0 \uc120\ud0dd\ud55c \uc694\uc18c\uc758 \uc815\ubcf4\ub97c \ud655\uc778\ud560\uc218 \uc788\ub2e4.<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"https:\/\/qwerewqwerew.github.io\/retype-react\/%EB%A0%88%EC%8B%9C%ED%94%BC%EC%95%B1\/assets\/react2.gif\" alt=\"\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \ub808\uc2dc\ud53c \uc571 \uc18c\uac1c \uc774\ubc88 \ud074\ub798\uc2a4\ub294 \ub808\uc2dc\ud53c\ub97c \uc18c\uac1c\ud558\ub294 \uc571\uc744 \uc81c\uc791\ud560 \uac83\uc774\ub2e4. \uc774 \ub9ac\uc561\ud2b8 \uc571\uc5d0 \uc0ac\uc6a9\ub41c \uae30\uc220 \uc2a4\ud0dd\uc740\u00a0axios , react-router\u00a0\ub4f1 \uc774\uba70 \uacf5\uacf5API\ub97c \uc5f0\ub3d9\ud558\ub294 \ud559\uc2b5\ub3c4 \ud558\uac8c \ub420 \uac83\uc774\ub2e4. \uac15\uc758\ub294 \uacf5\uacf5API \ub370\uc774\ud130\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc95\uacfc \ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \uc5f0\uacb0 \ubc0f \ub77c\uc6b0\ud130 \uc124\uc815\uc5d0 \ucd1b\uc810\uc744 \ub9de\ucd94\ubbc0\ub85c \uc0ac\uc6a9\ub418\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uba54\uc11c\ub4dc \ub098 \uc2a4\ud0c0\uc77c\ub9c1 \uad00\ub828 \ucf54\ub4dc\ub294 \ubcc4\ub3c4\uc758 \uc124\uba85 \uc5c6\uc774 \uc9c4\ud589\ub41c\ub2e4. \ubcf8 \uac15\uc758\ub294 \ucd08\uc2ec\uc790\ub97c \ub300\uc0c1\uc73c\ub85c \uc81c\uc791 &#8230; <a title=\"\ud658\uacbd\uc124\uc815\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=186\" aria-label=\"\ud658\uacbd\uc124\uc815\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-186","post","type-post","status-publish","format-standard","hentry","category-react-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=186"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/186\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}