{"id":1175,"date":"2025-04-25T10:43:19","date_gmt":"2025-04-25T10:43:19","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1175"},"modified":"2026-07-18T09:52:07","modified_gmt":"2026-07-18T00:52:07","slug":"nodejs9-reactnative-login","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/25\/nodejs9-reactnative-login\/","title":{"rendered":"nodejs9-\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \ub85c\uadf8\uc778\/ReactNative Login(1)"},"content":{"rendered":"\n

\u2705 \ucf54\ub4dc \ub2e4\uc6b4\ub85c\ub4dc \/ Code Download
https:\/\/github.com\/gideonslife01\/flm-js-nodejs<\/a><\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffbReactNative Login \uc571\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.(expo\uc544\ub2d8)
Description of the ReactNative Login app.(Not Expo.)<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb\uc544\ub798\ub294 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\uacfc \uc14b\ud305\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.
Below are instructions for creating and setting up a project.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub97c \uc0ac\uc6a9\ud560\uacbd\uc6b0 \uae30\ubcf8\uc801\uc73c\ub85c \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\uc774\ub3c4\uc640 Xcode\uac00 \uc124\uce58\ub418\uc5b4 \uc788\uc5b4\uc57c\ud569\ub2c8\ub2e4.
When using React Native, you generally need to have Android Studio and Xcode installed.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb Xcode\ub294 \ub9e5OS\uc5d0\uc11c\ub9cc \uc124\uce58\uac00\ub2a5\ud569\ub2c8\ub2e4.
Xcode can only be installed on macOS.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb1.RN\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131<\/strong> \/ Create ReactNative Project
https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework<\/a><\/p>\n\n\n\n

\u2714\ufe0f\uc544\ub798\uc758 \uba85\ub839\uc5b4\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.
Create a project with the command below.<\/p>\n\n\n\n

npx @react-native-community\/cli@latest init [Your Project name]<\/code><\/pre>\n\n\n\n
nodejs9 % npx @react-native-community\/cli@latest init rnlogin<\/strong>\n                                                          \n               ######                ######               \n             ###     ####        ####     ###             \n            ##          ###    ###          ##            \n            ##             ####             ##            \n            ##             ####             ##            \n            ##           ##    ##           ##            \n            ##         ###      ###         ##            \n             ##  ########################  ##             \n          ######    ###            ###    ######          \n      ###     ##    ##              ##    ##     ###      \n   ###         ## ###      ####      ### ##         ###   \n  ##           ####      ########      ####           ##  \n ##             ###     ##########     ###             ## \n  ##           ####      ########      ####           ##  \n   ###         ## ###      ####      ### ##         ###   \n      ###     ##    ##              ##    ##     ###      \n          ######    ###            ###    ######          \n             ##  ########################  ##             \n            ##         ###      ###         ##            \n            ##           ##    ##           ##            \n            ##             ####             ##            \n            ##             ####             ##            \n            ##          ###    ###          ##            \n             ###     ####        ####     ###             \n               ######                ######               \n                                                          \n\n              Welcome to React Native 0.86.0!                \n                 Learn once, write anywhere               \n\n\u2714 Downloading template\n\u2714 Copying template\n\u2714 Processing template\n\u2714 Installing dependencies\n\u2714 Do you want to install CocoaPods now? Needed for running iOS project \u2026 yes\n\u2714 Installing Ruby Gems\n\u2714 Installing CocoaPods dependencies  (this may take a few minutes)\n\u2714 Initializing Git repository\n\n  \n  Run instructions for Android:\n    \u2022 Have an Android emulator running (quickest way to get started), or a device connected.\n    \u2022 cd \"\/Users\/gimdaegyeong\/Desktop\/app\/nodejs\/nodejs9\/rnlogin\" && npx react-native run-android\n  \n  Run instructions for iOS:\n    \u2022 cd \"\/Users\/gimdaegyeong\/Desktop\/app\/nodejs\/nodejs9\/rnlogin\"\n    \n    \u2022 npx react-native run-ios\n    - or -\n    \u2022 Open rnlogin\/ios\/rnlogin.xcworkspace in Xcode or run \"xed -b ios\"\n    \u2022 Hit the Run button\n    \n  Run instructions for macOS:\n    \u2022 See https:\/\/microsoft.github.io\/react-native-macos for the latest up-to-date instructions.<\/code><\/pre>\n\n\n\n
\u2b50\ufe0f \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uc5c8\uc73c\uba74 \uba3c\uc800 \ud14c\uc2a4\ud2b8\ub85c \uc571\uc774 \uc5d0\ubbac\ub808\uc774\ud130\ub85c \uc2e4\ud589\ub418\ub294\uc9c0 \uba3c\uc800 \ud655\uc778\ud574\ubcf4\uc138\uc694
Once the project has been created, first check if the app runs on the emulator as a test.<\/p>\n\n\n\n
\uadf8\ub798\uc11c \uc544\ub798\uc758 adb devices\uc640 npm run android or ios\ub97c \uba3c\uc800 \uc2e4\ud589\ud574\ubd05\ub2c8\ub2e4.
So, first try running adb devices<\/code> and npm run android<\/code> (or ios<\/code>) as shown below.<\/p>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb2.\uc548\ub4dc\ub85c\uc774\ub4dc \uc124\uc815 \/ Android Settings <\/strong>

\u2714\ufe0fsdk location\uc124\uc815 \/ sdk location settings
<\/strong>project\/android\/locals.properties\ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \uc0dd\uc131<\/p>\n\n\n\n
\u2714\ufe0flocals.properties\ud30c\uc77c\uc5d0 \uc548\ub4dc\ub85c\uc774\ub4dc sdk\uc704\uce58\ub97c \uc785\ub825<\/strong> \/ Enter the Android SDK location in the locals.properties file
\u203bsdk\uc704\uce58\ub294 \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624 \uba54\ub274\uc758 settings->Language & Frameworks->Android SDK->Android SDK Location\uc5d0\uc11c \ud655\uc778 \uac00\ub2a5
You can check the SDK location in the Android Studio menu: settings->Language & Frameworks->Android SDK->Android SDK Location<\/p>\n\n\n\n
sdk.dir=\/Users\/username\/Library\/Android\/sdk<\/code><\/pre>\n\n\n\n
\u2714\ufe0fAndroidManifest.xml \uc124\uc815 \/ AndroidManifest.xml settings
<\/strong>– \uc778\ud130\ub137 \uad8c\ud55c \uc124\uc815\uc774 \ud544\uc694\ud55c\ub370 \uc800\uac19\uc740 \uacbd\uc6b0\ub294 \ubcc4\ub3c4\ub85c \uc218\uc815\ud558\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4
Internet permission settings are required, but in my case, I didn’t change anything separately.
– \uae30\ubcf8\uac12\uc73c\ub85c \uc778\ud130\ub137 \uc0ac\uc6a9\uc774 \ud5c8\uc6a9\uc73c\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.
By default, Internet access was set to Allowed.
– \ud30c\uc77c\uc744 \uc5f4\uc5b4\ubcf4\uace0 <uses-permission android:name=”android.permission.INTERNET” \/> \uc774 \ubd80\ubd84\uc774 \uc788\uc73c\uba74 \ub429\ub2c8\ub2e4.
Open the file and you should see this line:
– file location : project\/android\/app\/src\/main\/AndroidManifest.xml<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb3.ios\uc124\uc815<\/strong> \/ ios settings
– https\uac00 \uc544\ub2cc http\ud504\ub85c\ud1a0\ucf5c\uc744 \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 http\ud504\ub85c\ud1a0\ucf5c \ud5c8\uc6a9 \uc124\uc815\uc744 \ud574\uc57c\ud569\ub2c8\ub2e4.
Since we are using the http protocol instead of https, we need to allow the http protocol.

\u2714\ufe0finfo.plist\ud30c\uc77c \uc218\uc815<\/strong>
– \ud30c\uc77c\uc704\uce58 \/ file location : project\/ios\/project name directory\/info.plist 
– \uc624\ub80c\uc9c0 \uceec\ub7ec \ubd80\ubd84\uc744 \uc5ec\ub7ec\ubd84\uc758 \ud615\ud3b8\uc5d0 \ub9de\uac8c \ubc14\uafc9\ub2c8\ub2e4.
Change the orange colored part to suit your needs.
– \uc800\uc758 \uacbd\uc6b0\ub294 \ub85c\uceec nodejs\uc708\ub3c4\uc6b0\uc11c\ubc84\uc640 \ud074\ub77c\uc6b0\ub4dc \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uae30 \ub54c\ubb38\uc5d0 \ud5c8\uc6a9 \uc124\uc815\uc744 \ub450 \uad70\ub370 \ud574\uc92c\uc2b5\ub2c8\ub2e4. 
In my case, I am using a local nodejs Windows server and a cloud server, so I set the permission in two places.
<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-\/\/Apple\/\/DTD PLIST 1.0\/\/EN\" \"http:\/\/www.apple.com\/DTDs\/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion<\/key>\n\t<string>en<\/string>\n\t<key>CFBundleDisplayName<\/key>\n\t<string>flmLogin<\/string>\n\t<key>CFBundleExecutable<\/key>\n\t<string>$(EXECUTABLE_NAME)<\/string>\n\t<key>CFBundleIdentifier<\/key>\n\t<string>$(PRODUCT_BUNDLE_IDENTIFIER)<\/string>\n\t<key>CFBundleInfoDictionaryVersion<\/key>\n\t<string>6.0<\/string>\n\t<key>CFBundleName<\/key>\n\t<string>$(PRODUCT_NAME)<\/string>\n\t<key>CFBundlePackageType<\/key>\n\t<string>APPL<\/string>\n\t<key>CFBundleShortVersionString<\/key>\n\t<string>$(MARKETING_VERSION)<\/string>\n\t<key>CFBundleSignature<\/key>\n\t<string>????<\/string>\n\t<key>CFBundleVersion<\/key>\n\t<string>$(CURRENT_PROJECT_VERSION)<\/string>\n\t<key>LSRequiresIPhoneOS<\/key>\n\t<true\/>\n<!--http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815:http security settings-->\n<key>NSAppTransportSecurity<\/key>\n<dict>\n    <key>NSAllowsArbitraryLoads<\/key>\n    <false\/>\n    <key>NSExceptionDomains<\/key>\n    <dict>\n\n        <key>192.168.0.10<\/key><\/mark>\n        <dict>\n            <key>NSExceptionAllowsInsecureHTTPLoads<\/key>\n            <true\/>\n            <key>NSExceptionRequiresForwardSecrecy<\/key>\n            <false\/>\n            <key>NSIncludesSubdomains<\/key>\n            <false\/>\n        <\/dict><\/strong>\n\t\t\n        <key>media.freelifemakers.org<\/key><\/mark>\n        <dict>\n            <key>NSExceptionAllowsInsecureHTTPLoads<\/key>\n            <true\/>\n            <key>NSExceptionRequiresForwardSecrecy<\/key>\n            <false\/>\n            <key>NSIncludesSubdomains<\/key>\n            <true\/>\n        <\/dict>\n\n    <\/dict>\n<\/dict>\n<!--\/\/ http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815:http security settings--><\/strong>\n\t<key>NSLocationWhenInUseUsageDescription<\/key>\n\t<string><\/string>\n\t<key>UILaunchStoryboardName<\/key>\n\t<string>LaunchScreen<\/string>\n\t<key>UIRequiredDeviceCapabilities<\/key>\n\t<array>\n\t\t<string>arm64<\/string>\n\t<\/array>\n\t<key>UISupportedInterfaceOrientations<\/key>\n\t<array>\n\t\t<string>UIInterfaceOrientationPortrait<\/string>\n\t\t<string>UIInterfaceOrientationLandscapeLeft<\/string>\n\t\t<string>UIInterfaceOrientationLandscapeRight<\/string>\n\t<\/array>\n\t<key>UIViewControllerBasedStatusBarAppearance<\/key>\n\t<false\/>\n<\/dict>\n<\/plist>\n<\/code><\/pre>\n\n\n\n
\u2b50\ufe0f ios\uc758 \uacbd\uc6b0 npm \uba85\ub839\uc5b4\ub85c \ucd94\uac00 \ubaa8\ub4c8 \uc124\uce58\ub97c \ud588\ub2e4\uba74 \uc544\ub798\ucc98\ub7fc pod install\uc744 \ud574\uc918\uc57c\ud569\ub2c8\ub2e4.
For iOS, if you have installed additional modules using npm commands, you need to run pod install<\/code> as shown below.<\/p>\n\n\n\n
— ios\ub514\ub809\ud1a0\ub9ac\ub294 project directory\ub0b4\uc5d0 \uc788\ub294 ios\ub514\ub809\ud1a0\ub9ac \uc785\ub2c8\ub2e4.
The iOS directory refers to the iOS directory located within the project directory.<\/p>\n\n\n\n
cd ios\npod install\ncd ..<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb4.\uc2e4\ud589\ud654\uba74<\/strong> \/ Run Screen<\/p>\n\n\n\n
\u2714\ufe0f \uc5d0\ubbac\ub808\uc774\ud130 \uc778\uc2dd\uc2dc\ud0a4\uae30
Configuring the Emulator<\/p>\n\n\n\n
— \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\ub97c\uc5d0\uc11c \uc5d0\ubbac\ub808\uc774\ud130\ub97c \uc2e4\ud589 \uc2dc\ud0a4\uace0 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.
Launch the emulator in Android Studio and run the following command.<\/p>\n\n\n\n
rnlogin % adb devices<\/strong>\n\nemulator-5554\tdevice<\/code><\/pre>\n\n\n\n
\u2714\ufe0fnpm run android \ub610\ub294 npm run ios\ub85c \uae30\ubcf8 \uc571\uc774 \uc2e4\ud589\ub418\ub294\uc9c0 \ud655\uc778 \ud569\ub2c8\ub2e4.
Make sure the native app runs with npm run android or npm run ios .<\/p>\n\n\n\n
\u2b50\ufe0f \uc548\ub4dc\ub85c\uc774\ub4dc \uc2e4\ud589\uc2dc\uc5d0\ub294 \ubc18\ub4dc\uc2dc \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uac00 \uc2e4\ud589\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4.
Android Studio must be running when running Android.<\/p>\n\n\n\n
\u2b50\ufe0fios\uc5d0\uc11c\ub294 \uc5d0\ubbac\ub808\uc774\ud130 \ubc14\ub85c \uc2e4\ud589\ub429\ub2c8\ub2e4.(xcode)
On iOS, the emulator launches immediately.(xcode)<\/p>\n","protected":false},"excerpt":{"rendered":"
\u2705 \ucf54\ub4dc \ub2e4\uc6b4\ub85c\ub4dc \/ Code Download https:\/\/github.com\/gideonslife01\/flm-js-nodejs \ud83d\udc49\ud83c\udffbReactNative Login \uc571\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.(expo\uc544\ub2d8)Description of the ReactNative Login app.(Not Expo.) \ud83d\udc49\ud83c\udffb\uc544\ub798\ub294 \ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131\uacfc \uc14b\ud305\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.Below are instructions for creating and setting up a project. \ud83d\udc49\ud83c\udffb \ub9ac\uc561\ud2b8 \ub124\uc774\ud2f0\ube0c\ub97c \uc0ac\uc6a9\ud560\uacbd\uc6b0 \uae30\ubcf8\uc801\uc73c\ub85c \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\uc774\ub3c4\uc640 Xcode\uac00 \uc124\uce58\ub418\uc5b4 \uc788\uc5b4\uc57c\ud569\ub2c8\ub2e4.When using React Native, you generally need to have Android Studio and Xcode […]<\/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-1175","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\/1175","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=1175"}],"version-history":[{"count":50,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":6666,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1175\/revisions\/6666"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}