{"id":1422,"date":"2025-05-06T03:10:34","date_gmt":"2025-05-06T03:10:34","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1422"},"modified":"2025-05-06T04:24:31","modified_gmt":"2025-05-06T04:24:31","slug":"1422","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/05\/06\/1422\/","title":{"rendered":"Nodejs+ReactNative Login,SocketMessage"},"content":{"rendered":"\n

\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : https:\/\/drive.google.com\/drive\/folders\/1_OyFm6FHicyc4fuYNRbduT3fDi0svsqc?usp=drive_link<\/a><\/p>\n\n\n\n

— \uc774 \uc571\uc740 \ub85c\uadf8\uc778\uacfc \uc18c\ucf13\uba54\uc138\uc9c0 \ubc1c\uc1a1\uae30\ub2a5\uc774 \uc788\uc2b5\ub2c8\ub2e4.(\uc6f9,\ubaa8\ubc14\uc77c \uc571[\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c])
This app has login and socket message sending functions. (Web, mobile app [React Native])<\/p>\n\n\n\n

1.\ub514\ub809\ud1a0\ub9ac\/Directory<\/strong><\/p>\n\n\n\n

1)nodejs+socketMessage\/SocketMessage\/ : \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\/ReactNative<\/p>\n\n\n\n

— src<\/strong> : \uc571 \uc18c\uc2a4\ucf54\ub4dc\/App souce code
-> MainScreen.js,LoginScreen.js,index.js\ub294 \uae30\uc874 \ub85c\uadf8\uc778 \ud30c\uc77c\uacfc \ub3d9\uc77c\ud568
MainScreen.js, LoginScreen.js, and index.js are the same as the existing login files.
-> SocketMessage.js\ub294 \uc18c\ucf13\uba54\uc138\uc9c0 \uc218\uc2e0 \ubc0f \ubc1c\uc1a1 \ud074\ub77c\uc774\uc5b8\ud2b8
SocketMessage.js is a socket message receiving and sending client.
— ios\/info.plist<\/strong> : IOS \uc124\uc815\ud30c\uc77c(http\ud5c8\uc6a9)
— android\/local.properties<\/strong> : Android SDk\uc704\uce58 \/ Android SDK location<\/p>\n\n\n\n

2)nodejs+socketMessage\/login+socketmessage : Nodejs
— public : ejs \ud30c\uc77c \/ ejs files
— server.js : \uc11c\ubc84 \/ server <\/p>\n\n\n\n

2.\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc124\uce58 \/ ReactNative Install<\/strong>
1)\ud504\ub85c\uc81d\ud2b8 \uc0dd\uc131 : Project creation<\/strong>
https:\/\/reactnative.dev\/docs\/getting-started-without-a-framework<\/a>
– \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \/ Create a project with the following command.<\/p>\n\n\n\n

npx @react-native-community\/cli@latest init Your Project name<\/code><\/pre>\n\n\n\n
— \ubaa8\ub4c8\uc124\uce58 \/ modules install<\/p>\n\n\n\n
->package.json\ud30c\uc77c\uc5d0\uc11c \uc544\ub798 \ubd80\ubd84\uc758 \ubaa8\ub4c8\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can see the modules in the following section in the package.json file.<\/p>\n\n\n\n
-> npm install @react-native-async-storage\/async-storage \uc774\ub807\uac8c \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
You can install it like this: npm install @react-native-async-storage\/async-storage.<\/p>\n\n\n\n
  \"dependencies\": {\r\n    \"@react-native-async-storage\/async-storage\": \"^2.1.2\",\r\n    \"@react-navigation\/native\": \"^7.1.8\",\r\n    \"@react-navigation\/stack\": \"^7.3.1\",\r\n    \"react\": \"19.0.0\",\r\n    \"react-native\": \"0.79.2\",\r\n    \"react-native-gesture-handler\": \"^2.25.0\",\r\n    \"react-native-safe-area-context\": \"^5.4.0\",\r\n    \"react-native-screens\": \"^4.10.0\",\r\n    \"socket.io-client\": \"^4.8.1\"\r\n  },<\/code><\/pre>\n\n\n\n
2)\uc548\ub4dc\ub85c\uc774\ub4dc\uc124\uc815 \/ android settings<\/strong><\/p>\n\n\n\n
— sdk location\uc124\uc815 \/ sdk location settings
project\/android\/locals.properties\ud30c\uc77c\uc774 \uc5c6\uc73c\uba74 \uc0dd\uc131<\/p>\n\n\n\n
— locals.properties\ud30c\uc77c\uc5d0 \uc548\ub4dc\ub85c\uc774\ub4dc sdk\uc704\uce58\ub97c \uc785\ub825 \/ 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\/gimdaegyeong\/Library\/Android\/sdk<\/p>\n\n\n\n
3)IOS \uc124\uc815 \/ IOS Settings<\/strong><\/p>\n\n\n\n
\u2013 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.<\/p>\n\n\n\n
— info.plist\ud30c\uc77c \uc218\uc815
\u2013 \ud30c\uc77c\uc704\uce58 \/ file location : project\/ios\/project name directory\/info.plist
\u2013 \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.
\u2013 \uc800\uc758 \uacbd\uc6b0\ub294 \ub85c\uceec nodejs\uc708\ub3c4\uc6b0\uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uae30 \ub54c\ubb38\uc5d0 \ud5c8\uc6a9 \uc124\uc815\uc744 \ud55c \uad70\ub370 \ud574\uc92c\uc2b5\ub2c8\ub2e4.
In my case, I am using a local nodejs Windows server, so I set the permission in one place.
— \ud074\ub77c\uc6b0\ub4dc\/\ud638\uc2a4\ud305 \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uc5d0\ub294 ipaddress\ub098 \ub3c4\uba54\uc778\uc744 \uc0ac\uc6a9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
If you are using a cloud\/hosting server, you can use ipaddress or domain.<\/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>SocketMessage<\/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\n<!--http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815-->\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>\n\n    <\/dict>\n<\/dict>\n<!--\/\/ http\ud5c8\uc6a9\uc744 \uc704\ud55c \ubcf4\uc548\uc124\uc815-->\n\n\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><\/code><\/pre>\n\n\n\n
4)\uc2e4\ud589\/Run<\/strong>
– npm install android \ub610\ub294 npm install ios\uba85\ub839\uc5b4\ub85c \uc2e4\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can run it with the command npm install android or npm install ios.<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
3.NODEJS\uc124\uce58 \/ NODEJS install<\/strong>
1)\uc18c\uc2a4\ucf54\ub4dc \ub2e4\uc6b4 \ubc1b\uae30
– \uc704\uc758 \uad6c\uae00 \ub4dc\ub77c\uc774\ube0c\uc5d0\uc11c nodejs+socketMessage\/login+socketmessage \ub514\ub809\ud1a0\ub9ac\ub97c \ub2e4\uc6b4 \ubc1b\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
2)\ubaa8\ub4c8\uc124\uce58 \/ module install
— \uba3c\uc800 npm init\uba85\ub839\uc5b4\ub85c package.json\ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.
First, create a package.json file using the npm init command.
-package.json\ud30c\uc77c\uc5d0\uc11c \uc544\ub798 \ubd80\ubd84\uc758 \ubaa8\ub4c8\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can see the modules in the following section in the package.json file.<\/p>\n\n\n\n
  \"dependencies\": {\r\n    \"bcrypt\": \"^5.1.1\",\r\n    \"express\": \"^5.1.0\",\r\n    \"express-session\": \"^1.18.1\",\r\n    \"http\": \"^0.0.1-security\",\r\n    \"socket.io\": \"^4.8.1\"\r\n  }<\/code><\/pre>\n\n\n\n
– npm init \uba85\ub839\uc5b4\ub85c \ubaa8\ub4c8\uc744 \uc124\uce58 \ud569\ub2c8\ub2e4. \/ npm install express express-session bcrypt http socket.io –save<\/p>\n\n\n\n
3)\uc2e4\ud589\/run
— node server.js\ub85c nodejs\uc11c\ubc84\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
4)\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\uc744 \uc2e4\ud589\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u203b \ub85c\uadf8\uc778 ID\ub294 testuser,testuser2\uc774\uba70 \ud328\uc2a4\uc6cc\ub4dc\ub294 \ubaa8\ub450 11111111\uc785\ub2c8\ub2e4.
The login ID is testuser,testuser2 and the password is 11111111.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : https:\/\/drive.google.com\/drive\/folders\/1_OyFm6FHicyc4fuYNRbduT3fDi0svsqc?usp=drive_link — \uc774 \uc571\uc740 \ub85c\uadf8\uc778\uacfc \uc18c\ucf13\uba54\uc138\uc9c0 \ubc1c\uc1a1\uae30\ub2a5\uc774 \uc788\uc2b5\ub2c8\ub2e4.(\uc6f9,\ubaa8\ubc14\uc77c \uc571[\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c]) This app has login and socket message sending functions. (Web, mobile app [React Native]) 1.\ub514\ub809\ud1a0\ub9ac\/Directory 1)nodejs+socketMessage\/SocketMessage\/ : \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\/ReactNative — src : \uc571 \uc18c\uc2a4\ucf54\ub4dc\/App souce code-> MainScreen.js,LoginScreen.js,index.js\ub294 \uae30\uc874 \ub85c\uadf8\uc778 \ud30c\uc77c\uacfc \ub3d9\uc77c\ud568MainScreen.js, LoginScreen.js, and index.js are the same as the existing login files.-> SocketMessage.js\ub294 \uc18c\ucf13\uba54\uc138\uc9c0 […]<\/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],"tags":[],"class_list":["post-1422","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-reactnative","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422","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=1422"}],"version-history":[{"count":26,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422\/revisions"}],"predecessor-version":[{"id":1453,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1422\/revisions\/1453"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}