구글드라이브/Google Drive : https://drive.google.com/drive/folders/1_OyFm6FHicyc4fuYNRbduT3fDi0svsqc?usp=drive_link
— 이 앱은 로그인과 소켓메세지 발송기능이 있습니다.(웹,모바일 앱[리액트네이티브])
This app has login and socket message sending functions. (Web, mobile app [React Native])
1.디렉토리/Directory
1)nodejs+socketMessage/SocketMessage/ : 리액트네이티브/ReactNative
— src : 앱 소스코드/App souce code
-> 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/info.plist : IOS 설정파일(http허용)
— android/local.properties : Android SDk위치 / Android SDK location
2)nodejs+socketMessage/login+socketmessage : Nodejs
— public : ejs 파일 / ejs files
— server.js : 서버 / server
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"
},2)안드로이드설정 / android settings
— 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
– 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
– 오렌지 컬러 부분을 여러분의 형편에 맞게 바꿉니다.
Change the orange colored part to suit your needs.
– 저의 경우는 로컬 nodejs윈도우서버를 사용하고 있기 때문에 허용 설정을 한 군데 해줬습니다.
In my case, I am using a local nodejs Windows server, so I set the permission in one place.
— 클라우드/호스팅 서버를 사용하는 경우에는 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 init 명령어로 모듈을 설치 합니다. / npm install express express-session bcrypt http socket.io –save
3)실행/run
— node server.js로 nodejs서버를 시작합니다.
4)브라우저에서 http://localhost:3000을 실행하면 다음과 같은 화면을 볼 수 있습니다.
※ 로그인 ID는 testuser,testuser2이며 패스워드는 모두 11111111입니다.
The login ID is testuser,testuser2 and the password is 11111111.