{"id":892,"date":"2024-09-02T05:51:59","date_gmt":"2024-09-02T05:51:59","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=892"},"modified":"2024-09-02T09:58:13","modified_gmt":"2024-09-02T09:58:13","slug":"reactnative-2","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/09\/02\/reactnative-2\/","title":{"rendered":"[ReactNative]\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0cCLI\uc2dc\uc791\/Getting started with React Native CLI"},"content":{"rendered":"\n<p>\ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub294 \ud398\uc774\uc2a4\ubd81(\uba54\ud0c0)\uc774 \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4.<br>React Native is an open source mobile application framework developed by Facebook(META).<\/p>\n\n\n\n<p>Expo\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc758 \ud504\ub808\uc784\uc6cc\ud06c \uc785\ub2c8\ub2e4.<br>Expo is a React Native framework.<\/p>\n\n\n\n<p>\uc774 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc77c\ubc18\uc801\uc778 \uc548\ub4dc\ub85c\uc774\ub4dc\uc640 ios\uc571\uc744 \ubaa8\ub450 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>Using React Native, you can develop both common Android and iOS apps.<\/p>\n\n\n\n<p>Expo\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc774 \ubaa8\ubc14\uc77c \uc571\uc744 \uac1c\ubc1c\ud558\ub294 \uac00\uc7a5 \ud3b8\ud55c \ubc29\ubc95\uc785\ub2c8\ub2e4.<br>Using Expo is the most convenient way to develop mobile apps.<\/p>\n\n\n\n<p>\ud558\uc9c0\ub9cc \uc571\uac1c\ubc1c\uc744 \ud558\ub2e4\ubcf4\uba74 \uc571\uac1c\ubc1c \uae30\ub2a5\uc5d0\uc11c \ud55c\uacc4\ub97c \ub290\ub08d\ub2c8\ub2e4. <br>However, when developing apps, you feel the limitations of app development functions.<\/p>\n\n\n\n<p>\uadf8\ub798\uc11c \uc774\ub7f0 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0cCLI\ub85c \uc571\uc744 \uac1c\ubc1c\ud558\uac8c \ub429\ub2c8\ub2e4.<br>So, to solve this problem, we develop an app with React Native CLI.<\/p>\n\n\n\n<p>\uc544\ub798\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c CLI\ud658\uacbd\uc124\uc815 \ubd80\ubd84\uacfc \uc571\uac1c\ubc1c\uc744 \uc2dc\uc791\ud558\ub294 \ubd80\ubd84\uc744 \uc124\uba85\ud569\ub2c8\ub2e4.<br>Below is an explanation of React Native CLI environment settings and starting app development.<\/p>\n\n\n\n<p><strong>1.\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \ud658\uacbd\uc124\uc815 (react native setup envirnment react-navite 0.75)<\/strong><br><a href=\"https:\/\/reactnative.dev\/docs\/set-up-your-environment\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/reactnative.dev\/docs\/set-up-your-environment<\/a><\/p>\n\n\n\n<p>-Open JDK \ub2e4\uc6b4\ub85c\ub4dc(Open JDK Download) <br><a href=\"https:\/\/openjdk.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/openjdk.org\/<\/a><\/p>\n\n\n\n<p>-\uc548\ub4dc\ub85c\uc774\ub4dc SDK \ub2e4\uc6b4\ub85c\ub4dc (Android SDK Download)<br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/tools\/releases\/platform-tools?hl=ko\" data-type=\"URL\" data-id=\"https:\/\/developer.android.com\/tools\/releases\/platform-tools?hl=ko\" target=\"_blank\">\ud55c\uad6d\uc5b4(KOREAN)<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/tools\/releases\/platform-tools\" data-type=\"URL\" data-id=\"https:\/\/developer.android.com\/tools\/releases\/platform-tools\" target=\"_blank\">\uc601\uc5b4(ENGLISH)<\/a><\/p>\n\n\n\n<p>-\uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624 \ub2e4\uc6b4\ub85c\ub4dc(Android Studio Download)<br><strong>\ud658\uacbd\ubcc0\uc218 \uc124\uc815 \ubd80\ubd84\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.(Setting environment variables is important.)<\/strong><\/p>\n\n\n\n<p><strong>\u203b \ucd94\uac00 \uc124\uba85\uc774 \ud544\uc694\ud558\ub2e4\uba74 \ub098\uc911\uc5d0 \ucd94\uac00\ub85c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<br>If further explanation is needed, I will explain further later.<\/strong><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/studio\/?gclid=Cj0KCQiAjJOQBhCkARIsAEKMtO3zEhdK4_I0CEZic3UH4dl-9gVXuHFR9dCl3TOHKjmv3xWLU3UxfhYaApfAEALw_wcB&amp;gclsrc=aw.ds&amp;hl=ko\" data-type=\"URL\" data-id=\"https:\/\/developer.android.com\/studio\/?gclid=Cj0KCQiAjJOQBhCkARIsAEKMtO3zEhdK4_I0CEZic3UH4dl-9gVXuHFR9dCl3TOHKjmv3xWLU3UxfhYaApfAEALw_wcB&amp;gclsrc=aw.ds&amp;hl=ko\" target=\"_blank\">\ud55c\uad6d\uc5b4(KOREAN)<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/studio\/?gclid=Cj0KCQiAjJOQBhCkARIsAEKMtO3zEhdK4_I0CEZic3UH4dl-9gVXuHFR9dCl3TOHKjmv3xWLU3UxfhYaApfAEALw_wcB&amp;gclsrc=aw.ds\" data-type=\"URL\" data-id=\"https:\/\/developer.android.com\/studio\/?gclid=Cj0KCQiAjJOQBhCkARIsAEKMtO3zEhdK4_I0CEZic3UH4dl-9gVXuHFR9dCl3TOHKjmv3xWLU3UxfhYaApfAEALw_wcB&amp;gclsrc=aw.ds\" target=\"_blank\">\uc601\uc5b4(ENGLISH)<\/a><\/p>\n\n\n\n<p>-nodejs\uc124\uce58<br><a href=\"https:\/\/nodejs.org\/en\/download\/prebuilt-installer\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nodejs.org\/en\/download\/prebuilt-installer<\/a><\/p>\n\n\n\n<p>-VIsual Studio Code\uc124\uce58(Install Visual Studio Code)<br><strong>\ud544\uc218 \uc0ac\ud56d\uc740 \uc544\ub2d9\ub2c8\ub2e4. (It is not required.)<\/strong><br><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a><\/p>\n\n\n\n<p><strong>2.react native\uc124\uce58<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/reactnative.dev\/docs\/integration-with-existing-apps\" target=\"_blank\">https:\/\/reactnative.dev\/docs\/integration-with-existing-apps<\/a><br>-Power Shell(\ub610\ub294 \ube44\uc8fc\uc5bc\uc2a4\ud29c\ub514\uc624 \ucf54\ub4dc \ud130\ubbf8\ub110)\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<br>Run the following command in Power Shell (or Visual Studio Code Terminal):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># npm install react-native<\/code><\/pre>\n\n\n\n<p><strong>3.USB\uc5f0\uacb0 \ubc0f \uccb4\ud06c(USB Debugging)<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/reactnative.dev\/docs\/running-on-device\" target=\"_blank\">https:\/\/reactnative.dev\/docs\/running-on-device<\/a><br>-\uba3c\uc800 \uc5ec\ub7ec\ubd84\uc758 \ubaa8\ubc14\uc77c\ud3f0\uacfc PC\uac00 USB\ub97c \ud1b5\ud574\uc11c \uc5f0\uacb0\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. <br>First, your mobile phone and PC must be connected via USB.<\/p>\n\n\n\n<p>-adb devices \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud574\uc11c device\uac00 \ud45c\uc2dc\ub418\uba74 \uc5f0\uacb0\ub41c\uac81\ub2c8\ub2e4.<br>If you run the adb devices command and the device is displayed, it is connected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"275\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/adb.png\" alt=\"\" class=\"wp-image-898\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/adb.png 548w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/adb-300x151.png 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<p><strong>4.\uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624 \uc2e4\ud589(Run Android Studio)<\/strong><br>-\uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uac00 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc73c\uba74 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\ub97c \uc2e4\ud589 \ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4<br>If Android Studio is not running, You can&#8217;t run React Native.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"552\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/androidStudio-1024x552.png\" alt=\"\" class=\"wp-image-897\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/androidStudio-1024x552.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/androidStudio-300x162.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/androidStudio-768x414.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/androidStudio.png 1126w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>4.\ud504\ub85c\uc81d\ud2b8 \uc2dc\uc791(Get Started with React Native)<\/strong><br><a rel=\"noreferrer noopener\" href=\"https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework\" target=\"_blank\">https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework<\/a><br>\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c0.75\ubc84\uc804\uc5d0\uc11c \uc57d\uac04 \ubc14\ub010 \ubd80\ubd84\uc785\ub2c8\ub2e4.<br>This is a slightly changed part in React Native version 0.75.<\/p>\n\n\n\n<p>\uae30\uc874\uc5d0\ub294 npm init [Appname]\uc73c\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud588\ub2e4\uba74 0.75\ubc84\uc804 \uc774\ud6c4\ubd80\ud130\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc2e4\ud589 \ud569\ub2c8\ub2e4.<br>Previously, if you started the project with npm init [Appname], from version 0.75 onwards, run it as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx @react-native-community\/cli@latest init App1 <\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"721\" height=\"712\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start1.png\" alt=\"\" class=\"wp-image-899\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start1.png 721w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start1-300x296.png 300w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/figure>\n\n\n\n<p>-\ud574\ub2f9\ub514\ub809\ud1a0\ub9ac\uc5d0 \ud504\ub85c\uc81d\ud2b8 \uc14b\ud305\uc774 \uc644\ub8cc\ub41c \ubaa8\uc2b5\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can see that the project settings have been completed in the relevant directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"505\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start3.png\" alt=\"\" class=\"wp-image-917\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start3.png 594w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start3-300x255.png 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/figure>\n\n\n\n<p><strong>5.\ud504\ub85c\uc81d\ud2b8 \uc2e4\ud589(Run project)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># npm run android<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"355\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start5.png\" alt=\"\" class=\"wp-image-903\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start5.png 846w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start5-300x126.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/project_start5-768x322.png 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/figure>\n\n\n\n<p>-\ubaa8\ubc14\uc77c \ud3f0\uc5d0\uc11c \uc571\uc124\uce58\uc640 \uc2e4\ud589 \uc0c1\ud0dc\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can see the app installation and execution status on your mobile phone.<\/p>\n\n\n\n<p>-\uc67c\ucabd \uc774\ubbf8\uc9c0\ub294 \uc571\uc774 \uc2e4\ud589\ub41c \ubaa8\uc2b5\uc774\uace0 \uc624\ub978\ucabd  App1\uc740 \uc571\uc774 \uc124\uce58\ub41c \ubaa8\uc2b5\uc785\ub2c8\ub2e4.<br>The image on the left shows the app running, and App1 on the right shows the app installed.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" data-id=\"905\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-461x1024.jpg\" alt=\"\" class=\"wp-image-905\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-461x1024.jpg 461w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-135x300.jpg 135w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-768x1707.jpg 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-691x1536.jpg 691w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx-922x2048.jpg 922w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_tsx.jpg 1080w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"2400\" data-id=\"906\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/app_install.jpg\" alt=\"\" class=\"wp-image-906\"\/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub294 \ud398\uc774\uc2a4\ubd81(\uba54\ud0c0)\uc774 \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4.React Native is an open source mobile application framework developed by Facebook(META). Expo\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc758 \ud504\ub808\uc784\uc6cc\ud06c \uc785\ub2c8\ub2e4.Expo is a React Native framework. \uc774 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\ub97c \uc0ac\uc6a9\ud558\uba74 \uc77c\ubc18\uc801\uc778 \uc548\ub4dc\ub85c\uc774\ub4dc\uc640 ios\uc571\uc744 \ubaa8\ub450 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.Using React Native, you can develop both common Android and iOS apps. Expo\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc774 \ubaa8\ubc14\uc77c \uc571\uc744 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-892","post","type-post","status-publish","format-standard","hentry","category-reactnative","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":10,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/892\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/892\/revisions\/918"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}