{"id":1202,"date":"2025-04-27T03:03:15","date_gmt":"2025-04-27T03:03:15","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1202"},"modified":"2025-04-27T07:52:38","modified_gmt":"2025-04-27T07:52:38","slug":"nodejs9-reactnative-login2","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/27\/nodejs9-reactnative-login2\/","title":{"rendered":"nodejs9-\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \ub85c\uadf8\uc778\/ReactNative Login(2)"},"content":{"rendered":"\n<p><strong>1.\ud504\ub85c\uc81d\ud2b8 \uc218\uc815<\/strong><br>\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google drive : <br><a href=\"https:\/\/drive.google.com\/drive\/folders\/1dj8TfcDCeaLoRzHU5YRlBJoUgh4AcBdg?usp=drive_link\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/drive.google.com\/drive\/folders\/1dj8TfcDCeaLoRzHU5YRlBJoUgh4AcBdg?usp=drive_link<\/a><\/p>\n\n\n\n<p><strong><br>1)src\ub514\ub809\ud1a0\ub9ac<\/strong> \/ src directory<br>&#8211; \uc544\ub798 \uc774\ubbf8\uc9c0\ub294 vscodes\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub97c \uc5f4\uc5c8\uc744 \ub54c \ubaa8\uc2b5\uc785\ub2c8\ub2e4.<br>The image below is what the project folder looks like when opened in vscodes<br>&#8211; src\ub514\ub809\ud1a0\ub9ac\uc640 \ud30c\uc77c\uc740 \uc704\uc758 \uad6c\uae00 \ub4dc\ub77c\uc774\ube0c \uc18c\uc2a4\ucf54\ub4dc\ub97c \ub2e4\uc6b4\ubc1b\uc544\uc11c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \uc548\uc5d0 \ubd99\uc5ec\ub123\uae30 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>For the src directory and files, download the Google Drive source code above and paste it into your project folder.<br><br><strong>2) index.js<\/strong><br>&#8211; \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\uc2dc \uae30\ubcf8\uc801\uc73c\ub85c \uc0dd\uc131\ub418\ub294 \ud30c\uc77c\ub85c \uc774 \ubd80\ubd84\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4.<br>This is a file that is created by default when creating a project. Modify this part as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * @format\n *\/\n\nimport {AppRegistry} from 'react-native';\n<strong>import App from '.\/src\/index';<\/strong>\nimport {name as appName} from '.\/app.json';\n\nAppRegistry.registerComponent(appName, () =&gt; App);<\/code><\/pre>\n\n\n\n<p><strong>3)package.json<\/strong><br>-\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\uc2dc \uae30\ubcf8\uc801\uc73c\ub85c \uc0dd\uc131\ub418\ub294 \ud30c\uc77c\ub85c \uc124\uce58\ub41c \ubaa8\ub4c8\uc815\ubcf4\ub97c \uac00\uc9c0\uace0 \uc788\uace0 \uc218\uc815\ud560 \ud544\uc694\ub294 \uc5c6\uc2b5\ub2c8\ub2e4.<br>The files that are created by default when creating a project contain information about the installed modules and do not need to be modified.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"1024\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-26-\uc624\ud6c4-6.47.16-532x1024.png\" alt=\"\" class=\"wp-image-1206\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-26-\uc624\ud6c4-6.47.16-532x1024.png 532w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-26-\uc624\ud6c4-6.47.16-156x300.png 156w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-26-\uc624\ud6c4-6.47.16.png 734w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>2.\ubaa8\ub4c8\uc124\uce58 \/ install modul<\/strong>e<br>&#8211; \uc544\ub798\uc758 dependencies\ubd80\ubd84\uc5d0 \uc124\uce58\ub41c \ubaa8\ub4c8 \uc815\ubcf4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<br>The installed module information is in the dependencies section below.<br>&#8211; \uc774 \ud30c\uc77c\uc744 \ubcf5\uc0ac \ubd99\uc5ec\ub123\uae30 \ud558\uc9c0 \ub9c8\uc2dc\uace0 \ubaa8\ub4c8\uc744 \uc124\uce58\ud558\uc2dc\uba74 \uc774 \ud30c\uc77c\uc774 \uc790\ub3d9\uc0dd\uc131\ub429\ub2c8\ub2e4.<br>Do not copy and paste this file; install the module and this file will be automatically generated.<br>\uba85\ub839\ud504\ub86c\ud504\ud2b8\/\uc708\ub3c4\uc6b0\ud30c\uc6cc\uc258\/\uc258\uc5d0\uc11c <strong>npm install @react-native-async-storage\/async-storage<\/strong> \uc774\ub807\uac8c \ubaa8\ub4c8\uc744 \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>You can install it like this: <strong>npm install @react-native-async-storage\/async-storage<\/strong> in the command prompt\/Windows Powershell\/Shell.<br>\u203b ios\uc758 \uacbd\uc6b0 \ubaa8\ub4c8 \uc124\uce58 \ud6c4 \ubc18\ub4dc\uc2dc \uc258\uc5d0\uc11c ios\ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud6c4 pod install\uc744 \ud558\uc154\uc57c \uc124\uce58\ud55c \ubaa8\ub4c8\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<br>For iOS, after installing the module, you must move to the ios directory in the shell and run pod install for the installed module to be applied.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"flmLogin\",\n  \"version\": \"0.0.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"android\": \"react-native run-android\",\n    \"ios\": \"react-native run-ios\",\n    \"lint\": \"eslint .\",\n    \"start\": \"react-native start\",\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {<strong>\n    \"@react-native-async-storage\/async-storage\": \"^2.1.2\",\n    \"@react-navigation\/native\": \"^7.1.6\",\n    \"@react-navigation\/stack\": \"^7.2.10\",\n    \"react\": \"19.0.0\",\n    \"react-native\": \"^0.79.1\",\n    \"react-native-gesture-handler\": \"^2.25.0\",\n    \"react-native-safe-area-context\": \"^5.4.0\",\n    \"react-native-screens\": \"^4.10.0\"<\/strong>\n  },\n  \"devDependencies\": {\n    \"@babel\/core\": \"^7.25.2\",\n    \"@babel\/preset-env\": \"^7.25.3\",\n    \"@babel\/runtime\": \"^7.25.0\",\n    \"@react-native-community\/cli\": \"18.0.0\",\n    \"@react-native-community\/cli-platform-android\": \"18.0.0\",\n    \"@react-native-community\/cli-platform-ios\": \"18.0.0\",\n    \"@react-native\/babel-preset\": \"0.79.1\",\n    \"@react-native\/eslint-config\": \"0.79.1\",\n    \"@react-native\/metro-config\": \"0.79.1\",\n    \"@react-native\/typescript-config\": \"0.79.1\",\n    \"@types\/jest\": \"^29.5.13\",\n    \"@types\/react\": \"^19.0.0\",\n    \"@types\/react-test-renderer\": \"^19.0.0\",\n    \"eslint\": \"^8.19.0\",\n    \"jest\": \"^29.6.3\",\n    \"prettier\": \"2.8.8\",\n    \"react-test-renderer\": \"19.0.0\",\n    \"typescript\": \"5.0.4\"\n  },\n  \"engines\": {\n    \"node\": \"&gt;=18\"\n  }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>3.\uc2e4\ud589 \/ run<\/strong><br>&#8211; npm run ios \ub610\ub294 npm run android\uba85\ub839\uc73c\ub85c \uc2e4\ud589 \uc571\uc744 \uc2e4\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can run the executable app with the npm run ios or npm run android command.<br>\u203b\uc548\ub4dc\ub85c\uc774\ub4dc\ub85c \uc2e4\ud589 \ud560 \uacbd\uc6b0 \ubc18\ub4dc\uc2dc \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uac00 \uc2e4\ud589\ub418\uc5b4 \uc788\uc5b4\uc57c\ud569\ub2c8\ub2e4.<br>If you are running on Android, Android Studio must be running.<\/p>\n\n\n\n<p>-\uc2e4\ud589\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>When you run it, you will see the following screen.<br>&#8211; \uc5d0\ubbac\ub808\uc774\ud130\uc5d0\uc11c \uc67c\ucabd\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc ,\uc624\ub978\ucabd\uc740 ios\ubaa8\ub4dc\ub85c \uc2e4\ud589\ud55c \ubaa8\uc2b5\uc785\ub2c8\ub2e4. <br>The left side of the emulator is Android mode, and the right side is iOS mode.<\/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=\"460\" height=\"1024\" data-id=\"1233\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_android-460x1024.png\" alt=\"\" class=\"wp-image-1233\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_android-460x1024.png 460w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_android-135x300.png 135w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_android-691x1536.png 691w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_android.png 696w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"1024\" data-id=\"1234\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_ios-484x1024.png\" alt=\"\" class=\"wp-image-1234\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_ios-484x1024.png 484w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_ios-142x300.png 142w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/login_ios.png 712w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1.\ud504\ub85c\uc81d\ud2b8 \uc218\uc815\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google drive : https:\/\/drive.google.com\/drive\/folders\/1dj8TfcDCeaLoRzHU5YRlBJoUgh4AcBdg?usp=drive_link 1)src\ub514\ub809\ud1a0\ub9ac \/ src directory&#8211; \uc544\ub798 \uc774\ubbf8\uc9c0\ub294 vscodes\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\ub97c \uc5f4\uc5c8\uc744 \ub54c \ubaa8\uc2b5\uc785\ub2c8\ub2e4.The image below is what the project folder looks like when opened in vscodes&#8211; src\ub514\ub809\ud1a0\ub9ac\uc640 \ud30c\uc77c\uc740 \uc704\uc758 \uad6c\uae00 \ub4dc\ub77c\uc774\ube0c \uc18c\uc2a4\ucf54\ub4dc\ub97c \ub2e4\uc6b4\ubc1b\uc544\uc11c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354 \uc548\uc5d0 \ubd99\uc5ec\ub123\uae30 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.For the src directory and files, download the Google Drive source code above [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,5,1],"tags":[],"class_list":["post-1202","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1202","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=1202"}],"version-history":[{"count":27,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1202\/revisions"}],"predecessor-version":[{"id":1235,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1202\/revisions\/1235"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}