{"id":26816,"date":"2025-03-28T09:24:35","date_gmt":"2025-03-28T02:24:35","guid":{"rendered":"https:\/\/hitek.com.vn\/?p=26816"},"modified":"2025-03-28T09:24:35","modified_gmt":"2025-03-28T02:24:35","slug":"developing-javascript-apps","status":"publish","type":"post","link":"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/","title":{"rendered":"[JavaScript] \ucc28\uadfc\ucc28\uadfc \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c \uc2dc\uc791\ud574\ubd24\ub2e4"},"content":{"rendered":"<p>\ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ubd84\ub4e4\uc5d0\uac8c <strong>JavaScript<\/strong>\ub294 \uac15\ub825\ud55c \uc120\ud0dd\uc9c0\ub2e4. \ubcf5\uc7a1\ud55c \ub124\uc774\ud2f0\ube0c \ucf54\ub4dc \uc5c6\uc774\ub3c4 \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 <strong>React Native<\/strong>\ub098 <strong>Ionic<\/strong> \uac19\uc740 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \uccab\uac78\uc74c\uc744 \ub0b4\ub51b\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc548\ub0b4\ud55c\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\/developing-javascript-apps\/#%EC%99%9C_JavaScript%EB%A1%9C_%EB%AA%A8%EB%B0%94%EC%9D%BC_%EC%95%B1%EC%9D%84_%EA%B0%9C%EB%B0%9C%ED%95%A0%EA%B9%8C\" >\uc65c JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud560\uae4c?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#%EC%A3%BC%EC%9A%94_%EC%9E%A5%EC%A0%90\" >\uc8fc\uc694 \uc7a5\uc810<\/a><\/li><\/ul><\/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\/developing-javascript-apps\/#1_%EA%B0%9C%EB%B0%9C_%ED%99%98%EA%B2%BD_%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0\" >1. \uac1c\ubc1c \ud658\uacbd \uc124\uc815\ud558\uae30<\/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\/developing-javascript-apps\/#1_Nodejs_%EC%84%A4%EC%B9%98\" >(1) Node.js \uc124\uce58<\/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\/developing-javascript-apps\/#2_Expo_%EB%98%90%EB%8A%94_React_Native_CLI_%EC%84%A0%ED%83%9D\" >(2) Expo \ub610\ub294 React Native CLI \uc120\ud0dd<\/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\/developing-javascript-apps\/#3_%EC%97%90%EB%AE%AC%EB%A0%88%EC%9D%B4%ED%84%B0_%EB%98%90%EB%8A%94_%EC%8B%A4%EC%A0%9C_%EA%B8%B0%EA%B8%B0_%EC%97%B0%EA%B2%B0\" >(3) \uc5d0\ubbac\ub808\uc774\ud130 \ub610\ub294 \uc2e4\uc81c \uae30\uae30 \uc5f0\uacb0<\/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\/developing-javascript-apps\/#2_%EC%B2%AB_%EB%B2%88%EC%A7%B8_%EC%95%B1_%EB%A7%8C%EB%93%A4%EA%B8%B0\" >2. \uccab \ubc88\uc9f8 \uc571 \ub9cc\ub4e4\uae30<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#1_%EA%B8%B0%EB%B3%B8_%EA%B5%AC%EC%A1%B0_%EC%9D%B4%ED%95%B4\" >(1) \uae30\ubcf8 \uad6c\uc870 \uc774\ud574<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#2_%EA%B0%84%EB%8B%A8%ED%95%9C_%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8_%EC%B6%94%EA%B0%80\" >(2) \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8 \ucd94\uac00<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#3_%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98_%EC%B6%94%EA%B0%80\" >(3) \ub124\ube44\uac8c\uc774\uc158 \ucd94\uac00<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#3_%EC%95%B1_%EC%B6%9C%EC%8B%9C_%EC%A4%80%EB%B9%84%ED%95%98%EA%B8%B0\" >3. \uc571 \ucd9c\uc2dc \uc900\ube44\ud558\uae30<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#1_APK_%EB%98%90%EB%8A%94_IPA_%EB%B9%8C%EB%93%9C\" >(1) APK \ub610\ub294 IPA \ube4c\ub4dc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#2_%EC%95%B1_%EC%8A%A4%ED%86%A0%EC%96%B4_%EB%93%B1%EB%A1%9D\" >(2) \uc571 \uc2a4\ud1a0\uc5b4 \ub4f1\ub85d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#3_%EC%A7%80%EC%86%8D%EC%A0%81%EC%9D%B8_%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8\" >(3) \uc9c0\uc18d\uc801\uc778 \uc5c5\ub370\uc774\ud2b8<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/hitek.com.vn\/ko\/blog-ko\/developing-javascript-apps\/#%EB%A7%88%EC%B9%98%EB%A9%B0\" >\ub9c8\uce58\uba70<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"-javascript-\"><span class=\"ez-toc-section\" id=\"%EC%99%9C_JavaScript%EB%A1%9C_%EB%AA%A8%EB%B0%94%EC%9D%BC_%EC%95%B1%EC%9D%84_%EA%B0%9C%EB%B0%9C%ED%95%A0%EA%B9%8C\"><\/span><strong>\uc65c JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud560\uae4c?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc758 \ud575\uc2ec \uc5b8\uc5b4\ub85c, \uc774\uc81c\ub294 \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uae4c\uc9c0 \uc601\uc5ed\uc744 \ud655\uc7a5\ud588\ub2e4. <strong>\ud55c \ubc88\uc758 \ucf54\ub4dc \uc791\uc131\uc73c\ub85c iOS\uc640 Android \ubaa8\ub450\uc5d0\uc11c \ub3d9\uc791\ud558\ub294 \uc571<\/strong>\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc5b4 \ud6a8\uc728\uc801\uc774\ub2e4.<\/p>\n<h3 id=\"-\"><span class=\"ez-toc-section\" id=\"%EC%A3%BC%EC%9A%94_%EC%9E%A5%EC%A0%90\"><\/span><strong>\uc8fc\uc694 \uc7a5\uc810<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u2714 <strong>\ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \ud638\ud658\uc131<\/strong> \u2013 React Native, Ionic \ub4f1\uc73c\ub85c \ud558\ub098\uc758 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub85c \ub450 OS \uc9c0\uc6d0<br \/>\n\u2714 <strong>\ud48d\ubd80\ud55c \uc0dd\ud0dc\uacc4<\/strong> \u2013 npm\uc744 \ud1b5\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac \ud65c\uc6a9\uc774 \uc6a9\uc774<br \/>\n\u2714 <strong>\uc6f9 \uac1c\ubc1c\uc790\uc5d0\uac8c \uce5c\uc219<\/strong> \u2013 HTML, CSS \uc9c0\uc2dd\uc774 \uc788\ub2e4\uba74 \uc9c4\uc785 \uc7a5\ubcbd\uc774 \ub0ae\uc74c<\/p>\n<table>\n<thead>\n<tr>\n<th>\ud504\ub808\uc784\uc6cc\ud06c<\/th>\n<th>\ud2b9\uc9d5<\/th>\n<th>\ud559\uc2b5 \uace1\uc120<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>React Native<\/strong><\/td>\n<td>Facebook \uc9c0\uc6d0, \ub124\uc774\ud2f0\ube0c \uc131\ub2a5<\/td>\n<td>\uc911\uac04<\/td>\n<\/tr>\n<tr>\n<td><strong>Ionic<\/strong><\/td>\n<td>\uc6f9\ubdf0 \uae30\ubc18, \ube60\ub978 \uac1c\ubc1c<\/td>\n<td>\ub0ae\uc74c<\/td>\n<\/tr>\n<tr>\n<td><strong>Flutter<\/strong> (Dart)<\/td>\n<td>\uace0\uc131\ub2a5, \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uac00\ub2a5<\/td>\n<td>\ub192\uc74c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 id=\"-1-\"><span class=\"ez-toc-section\" id=\"1_%EA%B0%9C%EB%B0%9C_%ED%99%98%EA%B2%BD_%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0\"><\/span><strong>1. \uac1c\ubc1c \ud658\uacbd \uc124\uc815\ud558\uae30<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-node-js-\"><span class=\"ez-toc-section\" id=\"1_Nodejs_%EC%84%A4%EC%B9%98\"><\/span><strong>(1) Node.js \uc124\uce58<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud558\ub824\uba74 <strong>Node.js<\/strong>\uac00 \ud544\uc694\ud558\ub2e4. <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">\uacf5\uc2dd \uc0ac\uc774\ud2b8<\/a>\uc5d0\uc11c LTS \ubc84\uc804\uc744 \uc124\uce58\ud558\uba74 npm(\ub178\ub4dc \ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800)\ub3c4 \ud568\uaed8 \uc124\uce58\ub41c\ub2e4.<\/p>\n<pre><code class=\"lang-bash\"><span class=\"hljs-keyword\">node<\/span> <span class=\"hljs-title\">-v<\/span>  <span class=\"hljs-comment\"># \uc124\uce58 \ud655\uc778<\/span>\r\nnpm -v\r\n<\/code><\/pre>\n<h3 id=\"-2-expo-react-native-cli-\"><span class=\"ez-toc-section\" id=\"2_Expo_%EB%98%90%EB%8A%94_React_Native_CLI_%EC%84%A0%ED%83%9D\"><\/span><strong>(2) Expo \ub610\ub294 React Native CLI \uc120\ud0dd<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Expo<\/strong>: \ucd08\ubcf4\uc790\uc5d0\uac8c \uc801\ud569, \ube60\ub978 \ud504\ub85c\ud1a0\ud0c0\uc774\ud551 \uac00\ub2a5<\/li>\n<li><strong>React Native CLI<\/strong>: \ub354 \ub9ce\uc740 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uac00\ub2a5<\/li>\n<\/ul>\n<pre><code class=\"lang-bash\"><span class=\"hljs-string\">npx <\/span><span class=\"hljs-built_in\">create-expo-app<\/span> <span class=\"hljs-string\">MyFirstApp <\/span> <span class=\"hljs-comment\"># Expo\ub85c \uc2dc\uc791<\/span>\r\n<span class=\"hljs-string\">npx <\/span><span class=\"hljs-string\">react-native <\/span><span class=\"hljs-string\">init <\/span><span class=\"hljs-string\">MyApp <\/span> <span class=\"hljs-comment\"># React Native CLI<\/span>\r\n<\/code><\/pre>\n<h3 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EC%97%90%EB%AE%AC%EB%A0%88%EC%9D%B4%ED%84%B0_%EB%98%90%EB%8A%94_%EC%8B%A4%EC%A0%9C_%EA%B8%B0%EA%B8%B0_%EC%97%B0%EA%B2%B0\"><\/span><strong>(3) \uc5d0\ubbac\ub808\uc774\ud130 \ub610\ub294 \uc2e4\uc81c \uae30\uae30 \uc5f0\uacb0<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Android Studio<\/strong> (\uc548\ub4dc\ub85c\uc774\ub4dc \uc5d0\ubbac\ub808\uc774\ud130)<\/li>\n<li><strong>Xcode<\/strong> (iOS \uc2dc\ubbac\ub808\uc774\ud130)<\/li>\n<li><strong>Expo Go \uc571<\/strong> (\uc2e4\uc81c \uae30\uae30 \ud14c\uc2a4\ud2b8)<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EC%B2%AB_%EB%B2%88%EC%A7%B8_%EC%95%B1_%EB%A7%8C%EB%93%A4%EA%B8%B0\"><\/span><strong>2. \uccab \ubc88\uc9f8 \uc571 \ub9cc\ub4e4\uae30<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-\"><span class=\"ez-toc-section\" id=\"1_%EA%B8%B0%EB%B3%B8_%EA%B5%AC%EC%A1%B0_%EC%9D%B4%ED%95%B4\"><\/span><strong>(1) \uae30\ubcf8 \uad6c\uc870 \uc774\ud574<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>React Native\uc5d0\uc11c\ub294 <strong>JSX<\/strong>\ub97c \uc0ac\uc6a9\ud574 UI\ub97c \uad6c\uc131\ud55c\ub2e4.<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { View, Text } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>() <\/span>{\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">View<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">flex:<\/span> <span class=\"hljs-attr\">1<\/span>, <span class=\"hljs-attr\">justifyContent:<\/span> '<span class=\"hljs-attr\">center<\/span>', <span class=\"hljs-attr\">alignItems:<\/span> '<span class=\"hljs-attr\">center<\/span>' }}&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\uc548\ub155, React Native!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">View<\/span>&gt;<\/span><\/span>\r\n  );\r\n}\r\n<\/code><\/pre>\n<h3 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EA%B0%84%EB%8B%A8%ED%95%9C_%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8_%EC%B6%94%EA%B0%80\"><\/span><strong>(2) \uac04\ub2e8\ud55c \ucef4\ud3ec\ub10c\ud2b8 \ucd94\uac00<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\ubc84\ud2bc\uacfc \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc5f0\uc2b5\ud574\ubcf4\uc790.<\/p>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> { Button, Text, View } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react-native'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">CounterApp<\/span>() <\/span>{\r\n  <span class=\"hljs-keyword\">const<\/span> [count, setCount] = useState(<span class=\"hljs-number\">0<\/span>);\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">View<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">flex:<\/span> <span class=\"hljs-attr\">1<\/span>, <span class=\"hljs-attr\">justifyContent:<\/span> '<span class=\"hljs-attr\">center<\/span>', <span class=\"hljs-attr\">alignItems:<\/span> '<span class=\"hljs-attr\">center<\/span>' }}&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\uce74\uc6b4\ud2b8: {count}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"\uc99d\uac00\"<\/span> <span class=\"hljs-attr\">onPress<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> setCount(count + 1)} \/&gt;\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">View<\/span>&gt;<\/span>\r\n  );\r\n}<\/span>\r\n<\/code><\/pre>\n<h3 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98_%EC%B6%94%EA%B0%80\"><\/span><strong>(3) \ub124\ube44\uac8c\uc774\uc158 \ucd94\uac00<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>react-navigation<\/code>\uc744 \uc124\uce58\ud574 \ud654\uba74 \uc804\ud658\uc744 \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n<pre><code class=\"lang-bash\">npm <span class=\"hljs-keyword\">install<\/span> @react-navigation\/<span class=\"hljs-keyword\">native<\/span>\r\nnpm <span class=\"hljs-keyword\">install<\/span> react-<span class=\"hljs-keyword\">native<\/span>-screens react-<span class=\"hljs-keyword\">native<\/span>-<span class=\"hljs-keyword\">safe<\/span>-area-<span class=\"hljs-keyword\">context<\/span>\r\n<\/code><\/pre>\n<pre><code class=\"lang-javascript\"><span class=\"hljs-meta\"><span class=\"hljs-meta-keyword\">import<\/span> { NavigationContainer } from '@react-navigation\/native';<\/span>\r\n<span class=\"hljs-meta\"><span class=\"hljs-meta-keyword\">import<\/span> { createStackNavigator } from '@react-navigation\/stack';<\/span>\r\n\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">HomeScreen<\/span><span class=\"hljs-params\">({ navigation })<\/span> <\/span>{\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    &lt;View&gt;\r\n      &lt;Button\r\n        title=<span class=\"hljs-string\">\"\ub2e4\uc74c \ud654\uba74\uc73c\ub85c\"<\/span>\r\n        onPress={() =&gt; navigation.navigate(<span class=\"hljs-string\">'Details'<\/span>)}\r\n      \/&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n}\r\n\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">DetailsScreen<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\r\n  <span class=\"hljs-keyword\">return<\/span> &lt;Text&gt;\uc0c1\uc138 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4!&lt;\/Text&gt;;\r\n}\r\n\r\n<span class=\"hljs-keyword\">const<\/span> Stack = createStackNavigator();\r\n\r\nexport <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    &lt;NavigationContainer&gt;\r\n      &lt;Stack.Navigator&gt;\r\n        &lt;Stack.Screen name=<span class=\"hljs-string\">\"Home\"<\/span> component={HomeScreen} \/&gt;\r\n        &lt;Stack.Screen name=<span class=\"hljs-string\">\"Details\"<\/span> component={DetailsScreen} \/&gt;\r\n      &lt;\/Stack.Navigator&gt;\r\n    &lt;\/NavigationContainer&gt;\r\n  );\r\n}\r\n<\/code><\/pre>\n<hr \/>\n<h2 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EC%95%B1_%EC%B6%9C%EC%8B%9C_%EC%A4%80%EB%B9%84%ED%95%98%EA%B8%B0\"><\/span><strong>3. \uc571 \ucd9c\uc2dc \uc900\ube44\ud558\uae30<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"-1-apk-ipa-\"><span class=\"ez-toc-section\" id=\"1_APK_%EB%98%90%EB%8A%94_IPA_%EB%B9%8C%EB%93%9C\"><\/span><strong>(1) APK \ub610\ub294 IPA \ube4c\ub4dc<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Android<\/strong>: <code>.\/gradlew assembleRelease<\/code><\/li>\n<li><strong>iOS<\/strong>: Xcode\uc5d0\uc11c Archive \uc0dd\uc131<\/li>\n<\/ul>\n<h3 id=\"-2-\"><span class=\"ez-toc-section\" id=\"2_%EC%95%B1_%EC%8A%A4%ED%86%A0%EC%96%B4_%EB%93%B1%EB%A1%9D\"><\/span><strong>(2) \uc571 \uc2a4\ud1a0\uc5b4 \ub4f1\ub85d<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Google Play Console<\/strong> (<a href=\"https:\/\/play.google.com\/console\" target=\"_blank\" rel=\"noopener\">\ub9c1\ud06c<\/a>)<\/li>\n<li><strong>Apple App Store Connect<\/strong> (<a href=\"https:\/\/appstoreconnect.apple.com\" target=\"_blank\" rel=\"noopener\">\ub9c1\ud06c<\/a>)<\/li>\n<\/ul>\n<h3 id=\"-3-\"><span class=\"ez-toc-section\" id=\"3_%EC%A7%80%EC%86%8D%EC%A0%81%EC%9D%B8_%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8\"><\/span><strong>(3) \uc9c0\uc18d\uc801\uc778 \uc5c5\ub370\uc774\ud2b8<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\uc0ac\uc6a9\uc790 \ud53c\ub4dc\ubc31\uc744 \ubc18\uc601\ud574 \uc571\uc744 \uac1c\uc120\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. <strong>Firebase Analytics<\/strong>\ub97c \uc5f0\uacb0\ud574 \uc0ac\uc6a9\uc790 \ud589\ub3d9\uc744 \ubd84\uc11d\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n<hr \/>\n<h2 id=\"-\"><span class=\"ez-toc-section\" id=\"%EB%A7%88%EC%B9%98%EB%A9%B0\"><\/span><strong>\ub9c8\uce58\uba70<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \uac83\uc740 \uc0dd\uac01\ubcf4\ub2e4 \uc5b4\ub835\uc9c0 \uc54a\ub2e4. <strong>React Native<\/strong>\ub97c \ud65c\uc6a9\ud558\uba74 \uc6f9 \uac1c\ubc1c \uc9c0\uc2dd\uc744 \uadf8\ub300\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\uc5b4 \uc2dc\uc791\ud558\uae30 \uc88b\ub2e4. \uc774\uc81c \uc9c1\uc811 \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud574\ubcf4\uc790!<\/p>\n<blockquote><p><strong>\ud83d\ude80 \ub3c4\uc804\ud574\ubcf4\uae30<\/strong><br \/>\n\uc624\ub298 \uac04\ub2e8\ud55c \ud560 \uc77c \uc571\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\ub294 \uac74 \uc5b4\ub54c\uc694? \uce74\uc6b4\ud130, \ub124\ube44\uac8c\uc774\uc158, \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc5f0\uc2b5\ud560 \uc218 \uc788\ub294 \uc88b\uc740 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p><\/blockquote>\n<p><strong>\ub354 \uad81\uae08\ud55c \uc810\uc774 \uc788\ub2e4\uba74 \ub313\uae00\ub85c \ub0a8\uaca8\uc8fc\uc138\uc694!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub824\ub294 \ubd84\ub4e4\uc5d0\uac8c JavaScript\ub294 \uac15\ub825\ud55c \uc120\ud0dd\uc9c0\ub2e4. \ubcf5\uc7a1\ud55c \ub124\uc774\ud2f0\ube0c \ucf54\ub4dc \uc5c6\uc774\ub3c4 \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 React Native\ub098 Ionic \uac19\uc740 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \uccab\uac78\uc74c\uc744 \ub0b4\ub51b\ub294 \ubc29\ubc95\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc548\ub0b4\ud55c\ub2e4. \uc65c JavaScript\ub85c \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud560\uae4c? JavaScript\ub294 \uc6f9 \uac1c\ubc1c\uc758 \ud575\uc2ec \uc5b8\uc5b4\ub85c, \uc774\uc81c\ub294 \ubaa8\ubc14\uc77c \uc571 \uac1c\ubc1c\uae4c\uc9c0 \uc601\uc5ed\uc744 \ud655\uc7a5\ud588\ub2e4. \ud55c \ubc88\uc758 \ucf54\ub4dc [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":26817,"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-26816","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\/26816","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=26816"}],"version-history":[{"count":2,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26816\/revisions"}],"predecessor-version":[{"id":26822,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/posts\/26816\/revisions\/26822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media\/26817"}],"wp:attachment":[{"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/media?parent=26816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/categories?post=26816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hitek.com.vn\/ko\/wp-json\/wp\/v2\/tags?post=26816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}