Nodejs+ReactNative Login,SocketMessage

✅ 코드 다운로드 / Code Download

https://github.com/gideonslife01/flm-js-nodejs

🌐 이 앱은 로그인과 소켓메세지 발송기능이 있습니다.(웹,모바일 앱[리액트네이티브])
This app has login and socket message sending functions. (Web, mobile app [React Native])

🌐 SockeetMessage는 리액트네이티브입니다. 프로젝트를 새롭게 생성해서 사용하세요
SocketMessage is for React Native. Please create a new project to use it.

🌐1.디렉토리/Directory

1)nodejs+socketMessage/ReactNativeApp/ : 리액트네이티브 / ReactNative

— 파일 및 디렉토리

android		index.js	ios		package.json	src

— src 디렉토리

src : 앱 소스코드/App souce code
- files : MainScreen.js,LoginScreen.js,index.js

- MainScreen.js,LoginScreen.js,index.js는 기존 로그인 파일과 동일합니다.
MainScreen.js, LoginScreen.js, and index.js are the same as the existing login files.

- SocketMessage.js는 소켓메세지 수신 및 발송 클라이언트입니다.
SocketMessage.js is a socket message receiving and sending client.

— ios 디렉토리 / ios direactory

ios : ios설정파일로 http허용설정파일이 있습니다. / There is an iOS configuration file for allowing HTTP connections.
- info.plist

— android 디렉토리 / android directory

android : Android SDk위치가 있습니다. / There is an Android SDK location.
- local.properties

2)nodejs+socketMessage/login+socketmessage : Nodejs

— 파일 및 디렉토리 / files and directory

node_modules		package.json		server.js
package-lock.json	public

— public : ejs 파일 / ejs files

login.ejs		SocketMessage.ejs

— server.js : 서버 실행파일입니다. / This is the server executable file.

---

🌐2.리액트네이티브설치 / ReactNative Install
1)프로젝트 생성 : Project creation
https://reactnative.dev/docs/getting-started-without-a-framework
– 다음 명령어로 프로젝트를 생성합니다. / Create a project with the following command.

npx @react-native-community/cli@latest init Your Project name

— 모듈설치 / modules install

✔️package.json파일에서 아래 부분의 모듈을 볼 수 있습니다.
You can see the modules in the following section in the package.json file.

✔️npm install @react-native-async-storage/async-storage 이렇게 설치 하시면 됩니다.
You can install it like this: npm install @react-native-async-storage/async-storage.

  "dependencies": {
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-navigation/native": "^7.1.8",
    "@react-navigation/stack": "^7.3.1",
    "react": "19.0.0",
    "react-native": "0.79.2",
    "react-native-gesture-handler": "^2.25.0",
    "react-native-safe-area-context": "^5.4.0",
    "react-native-screens": "^4.10.0",
    "socket.io-client": "^4.8.1"
  },

npm install @react-native-async-storage/async-storage@latest
npm install @react-navigation/native@latest
npm install @react-navigation/stack@latest
npm install react-native-gesture-handler@latest
npm install react-native-safe-area-context@latest
npm install react-native-screens@latest
npm install socket.io-client@latest

2)안드로이드설정 / android settings

–📓 이 부분은 오류 발생시에만 적용합니다.
This part applies only when an error occurs.

— sdk location설정 / sdk location settings
project/android/locals.properties파일이 없으면 생성

— locals.properties파일에 안드로이드 sdk위치를 입력 / Enter the Android SDK location in the locals.properties file
※sdk위치는 안드로이드 스튜디오 메뉴의 settings->Language & Frameworks->Android SDK->Android SDK Location에서 확인 가능
You can check the SDK location in the Android Studio menu: settings->Language & Frameworks->Android SDK->Android SDK Location

sdk.dir=/Users/gimdaegyeong/Library/Android/sdk

3)IOS 설정 / IOS Settings

— 모듈을 설치하면 반드시 ios디렉토리에 들어가서 ‘pod install’명령을 실행합니다.
After installing the module, be sure to navigate to the ios directory and run the pod install command.

— pod install 명령을 실행하지 않으면 ios앱에 모듈이 적용되지 않습니다.
If you do not run the pod install command, the module will not be applied to the iOS app.

– https가 아닌 http프로토콜을 사용하기 때문에 http프로토콜 허용 설정을 해야합니다.
Since we are using the http protocol instead of https, we need to allow the http protocol.

— info.plist파일을 수정합니다.

– 파일위치 / file location : project/ios/project name directory/info.plist

— 클라우드/호스팅 서버를 사용하는 경우에는 ipaddress나 도메인을 사용하시면 됩니다.
If you are using a cloud/hosting server, you can use ipaddress or domain.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleDevelopmentRegion</key>
	<string>en</string>
	<key>CFBundleDisplayName</key>
	<string>SocketMessage</string>
	<key>CFBundleExecutable</key>
	<string>$(EXECUTABLE_NAME)</string>
	<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
	<key>CFBundleInfoDictionaryVersion</key>
	<string>6.0</string>
	<key>CFBundleName</key>
	<string>$(PRODUCT_NAME)</string>
	<key>CFBundlePackageType</key>
	<string>APPL</string>
	<key>CFBundleShortVersionString</key>
	<string>$(MARKETING_VERSION)</string>
	<key>CFBundleSignature</key>
	<string>????</string>
	<key>CFBundleVersion</key>
	<string>$(CURRENT_PROJECT_VERSION)</string>
	<key>LSRequiresIPhoneOS</key>
	<true/>

<!--http허용을 위한 보안설정-->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <false/>
    <key>NSExceptionDomains</key>
    <dict>

        <key>192.168.0.10</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <false/>
            <key>NSIncludesSubdomains</key>
            <false/>
        </dict>

    </dict>
</dict>
<!--// http허용을 위한 보안설정-->


	<key>NSLocationWhenInUseUsageDescription</key>
	<string></string>
	<key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
	<key>UIRequiredDeviceCapabilities</key>
	<array>
		<string>arm64</string>
	</array>
	<key>UISupportedInterfaceOrientations</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
</dict>
</plist>

4)실행/Run
– npm install android 또는 npm install ios명령어로 실행 할 수 있습니다.
You can run it with the command npm install android or npm install ios.

3.NODEJS설치 / NODEJS install
1)소스코드 다운 받기
– 위의 구글 드라이브에서 nodejs+socketMessage/login+socketmessage 디렉토리를 다운 받습니다.

2)모듈설치 / module install
— 먼저 npm init명령어로 package.json파일을 생성합니다.
First, create a package.json file using the npm init command.
-package.json파일에서 아래 부분의 모듈을 볼 수 있습니다.
You can see the modules in the following section in the package.json file.

  "dependencies": {
    "bcrypt": "^5.1.1",
    "express": "^5.1.0",
    "express-session": "^1.18.1",
    "http": "^0.0.1-security",
    "socket.io": "^4.8.1"
  }

– npm install 명령어로 모듈을 설치 합니다. / Install the module using the npm install command.

npm install express express-session bcrypt http socket.io --save

3)실행 / run
— node server.js로 nodejs서버를 시작합니다.
Start the Node.js server with node server.js.

4)브라우저에서 http://localhost:3000을 실행하면 다음과 같은 화면을 볼 수 있습니다.
If you run http://localhost:3000 in your browser, you will see a screen like the following.

※ 로그인 ID는 testuser,testuser2이며 패스워드는 모두 11111111입니다.
The login ID is testuser,testuser2 and the password is 11111111.