{"id":1261,"date":"2025-04-30T04:38:56","date_gmt":"2025-04-30T04:38:56","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1261"},"modified":"2025-05-01T01:11:30","modified_gmt":"2025-05-01T01:11:30","slug":"nodejs10-reactnative","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/30\/nodejs10-reactnative\/","title":{"rendered":"nodejs10-Nodejs\uc11c\ubc84,ReactNative \ud68c\uc6d0\uac00\uc785 \/ Nodejs Server,ReactNative Signup"},"content":{"rendered":"\n<p>\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : <a href=\"https:\/\/drive.google.com\/drive\/folders\/1DR4lNIQUgMdkizV_Uy-tzQLI917B1Fmd?usp=drive_link\">https:\/\/drive.google.com\/drive\/folders\/1DR4lNIQUgMdkizV_Uy-tzQLI917B1Fmd?usp=drive_link<\/a><\/p>\n\n\n\n<p>\u203b\uc774 \uc571\uc740 \ubcc4\ub3c4\uc774 \ubcf4\uc548\uc124\uc815 \uc5c6\uc774 \ub3d9\uc791\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc5f0\uacb0 \ubb38\uc81c\uac00 \uc0dd\uae38 \uacbd\uc6b0 \ub85c\uadf8\uc778 \ud3ec\uc2a4\ud2b8\uc758 \uc124\uc815 \ubd80\ubd84\uc744 \ucc38\uc870 \ud558\uc138\uc694<br>This app works without any separate security settings. However, if you have connection problems, please refer to the settings section of the login post.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-freelifemakers-org wp-block-embed-freelifemakers-org\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"09LlpVYSPd\"><a href=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/25\/nodejs9-reactnative-login\/\">nodejs9-\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \ub85c\uadf8\uc778\/ReactNative Login(1)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;nodejs9-\ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c \ub85c\uadf8\uc778\/ReactNative Login(1)&#8221; &#8212; freelifemakers.org\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/25\/nodejs9-reactnative-login\/embed\/#?secret=qq9GMiOQsq#?secret=09LlpVYSPd\" data-secret=\"09LlpVYSPd\" width=\"560\" height=\"315\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>1.signup\ud3f4\ub354<\/strong> \/ signup folder<br>&#8211; \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc571 \ud3f4\ub354 \uc785\ub2c8\ub2e4.<br>This is the react native app folder.<br>-index.js\ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c \ucc98\ub7fc \ucf54\ub4dc\ub97c \uc218\uc815 \ud569\ub2c8\ub2e4.<br>Open the index.js file and modify the code 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);\n<\/code><\/pre>\n\n\n\n<p>&#8211; package.json\ud30c\uc77c\uc744 \uc5f4\uc5b4 \ubcf4\uc2dc\uace0 signup\ud3f4\ub354 \ub0b4\uc5d0\uc11c npm install &#8220;module name&#8221; \uba85\ub839\uc73c\ub85c \uc544\ub798\uc758 \ubaa8\ub4c8 \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>Open the package.json file and install the module below with the npm install &#8220;module name&#8221; command in the signup folder.<br>&#8211; package.json\ud30c\uc77c\uc740 \ubaa8\ub4c8\uc744 \uc124\uce58 \ud558\uba74 \uc790\ub3d9\uc801\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\uc9c0\ub9cc \uc790\ub3d9 \uc0dd\uc131\ub418\uc9c0 \uc54a\uc744 \uacbd\uc6b0npm init\uba85\ub839\uc73c\ub85c \uc0dd\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>The package.json file is automatically created when you install a module, but if it is not automatically created, you can create it with the npm init command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"signup\",\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-navigation\/stack\": \"^7.2.10\",\n    \"react\": \"19.0.0\",\n    \"react-native\": \"0.79.1\",\n    \"react-native-calendars\": \"^1.1311.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>&#8211; npm run android \ub610\ub294 npm run ios\uba85\ub839\uc73c\ub85c \uc571\uc744 \uc2e4\ud589 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>You can run the app with the npm run android or npm run ios command. <\/p>\n\n\n\n<p>&#8211; \uc571\uc744 \uc2e4\ud589\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ud654\uba74\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>When you run the app, you will see a screen like this.<\/p>\n\n\n\n<p>&#8211; \uc5d0\ubbac\ub808\uc774\ud130\uc5d0\uc11c \uc2e4\ud589\ud55c \ud654\uba74\uc73c\ub85c \uc624\ub978\ucabd\uc740 ios\uc67c\ucabd\uc740 \uc548\ub4dc\ub85c\uc774\ub4dc \ud654\uba74\uc785\ub2c8\ub2e4.<br>The screen running on the emulator is iOS on the right and Android on the left.<\/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=\"1275\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/android-460x1024.png\" alt=\"\" class=\"wp-image-1275\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/android-460x1024.png 460w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/android-135x300.png 135w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/android.png 684w\" 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=\"486\" height=\"1024\" data-id=\"1276\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/ios-486x1024.png\" alt=\"\" class=\"wp-image-1276\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/ios-486x1024.png 486w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/ios-142x300.png 142w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/ios.png 678w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>2.nodeSignup\ud3f4\ub354 : nodejs\uc11c\ubc84\uc785\ub2c8\ub2e4.<\/strong> \/ nodeSignup folder: This is the nodejs server.<br>-nodeSignup\ud3f4\ub354\ub85c \uc774\ub3d9 \ud6c4 package.json\ud30c\uc77c\uc744 \uc5f4\uace0 \ubaa8\ub4c8\uc744 \uc124\uce58 \ud569\ub2c8\ub2e4.<br>Go to the nodeSignup folder, open the package.json file, and install the module.<br>-\uc5ec\uae30\ub294 \ubaa8\ub4c8\uc774 express\ud558\ub098 \ubc16\uc5d0 \uc5c6\uc2b5\ub2c8\ub2e4. \uadf8\ub798\uc11c npm install express \uc774\ub807\uac8c \uc124\uce58 \ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.<br>There is only one module here, express. So, you can install it like this: npm install express.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"signup\",\n  \"version\": \"1.0.0\",\n  \"description\": \"signup for reactnative app\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\n  },\n  \"author\": \"daekyeong kim\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    <strong>\"express\": \"^5.1.0\"<\/strong>\n  }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>3.\uc11c\ubc84\uc2e4\ud589<\/strong>  \/ Run server<br>&#8211; node server.js start \uba85\ub839\uc73c\ub85c \uc11c\ubc84\ub97c \uc2e4\ud589 \ud569\ub2c8\ub2e4.<br>Run the server with the node server.js start command.<\/p>\n\n\n\n<p>-\uadf8\ub7ec\uba74 \uc544\ub798\uc640 \uac19\uc740 \uba54\uc138\uc9c0\uac00 \ubcf4\uc774\uba74 \uc815\uc0c1\uc785\ub2c8\ub2e4.<br>If you see a message like the one below, it is normal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Express \uc11c\ubc84\uac00 http:\/\/localhost:3000 \uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.<\/code><\/pre>\n\n\n\n<p><strong>4.\uc571\uacfc \uc11c\ubc84 \uc5f0\ub3d9<\/strong> \/ App and server integration<br>&#8211; singnup\/src\/SignupScreen.js\ud30c\uc77c 41\ubc88\uc9f8 \ub77c\uc778\uc5d0\uc11c 192.168.0.10:3000\uc744 \uc5ec\ub7ec\ubd84 \uc544\uc774\ud53c \uc8fc\uc18c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<br>In line 41 of the SignupScreen.js file, change 192.168.0.10:3000 to your IP address.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const response = await fetch(`http:\/\/<strong>192.168.0.10:3000<\/strong>\/checkUsername?username=${encodeURIComponent(username)}`);<\/code><\/pre>\n\n\n\n<p>&#8211; \uc571\uc744 \uc2e4\ud589 \ud6c4 \uc815\ubcf4\ub97c \uc785\ub825\ud558\uace0 \uc804\uc1a1\ud558\uba74 \uc11c\ubc84\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc804\uc1a1\ub41c \ub370\uc774\ud130 \uba54\uc138\uc9c0\uac00 \ubcf4\uc774\uba74 \uc815\uc0c1 \uc785\ub2c8\ub2e4.<br>After running the app, entering the information and sending it, if you see the following data message sent to the server, it is normal.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"670\" height=\"153\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/nodejs10-server.jpg\" alt=\"\" class=\"wp-image-1292\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/nodejs10-server.jpg 670w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/04\/nodejs10-server-300x69.jpg 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive : https:\/\/drive.google.com\/drive\/folders\/1DR4lNIQUgMdkizV_Uy-tzQLI917B1Fmd?usp=drive_link \u203b\uc774 \uc571\uc740 \ubcc4\ub3c4\uc774 \ubcf4\uc548\uc124\uc815 \uc5c6\uc774 \ub3d9\uc791\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc5f0\uacb0 \ubb38\uc81c\uac00 \uc0dd\uae38 \uacbd\uc6b0 \ub85c\uadf8\uc778 \ud3ec\uc2a4\ud2b8\uc758 \uc124\uc815 \ubd80\ubd84\uc744 \ucc38\uc870 \ud558\uc138\uc694This app works without any separate security settings. However, if you have connection problems, please refer to the settings section of the login post. 1.signup\ud3f4\ub354 \/ signup folder&#8211; \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc571 \ud3f4\ub354 \uc785\ub2c8\ub2e4.This is the react native [&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-1261","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\/1261","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=1261"}],"version-history":[{"count":30,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1261\/revisions"}],"predecessor-version":[{"id":1296,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1261\/revisions\/1296"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}