✅ 코드 다운로드 / Code Download
https://github.com/gideonslife01/flm-js-nodejs
👉🏻ReactNative Login 앱에 대한 설명입니다.(expo아님)
Description of the ReactNative Login app.(Not Expo.)
👉🏻아래는 프로젝트 생성과 셋팅에 대한 설명입니다.
Below are instructions for creating and setting up a project.
👉🏻 리액트 네이티브를 사용할경우 기본적으로 안드로이드 스튜이도와 Xcode가 설치되어 있어야합니다.
When using React Native, you generally need to have Android Studio and Xcode installed.
👉🏻 Xcode는 맥OS에서만 설치가능합니다.
Xcode can only be installed on macOS.
👉🏻1.RN프로젝트 생성 / Create ReactNative Project
https://reactnative.dev/docs/getting-started-without-a-framework
✔️아래의 명령어로 프로젝트를 생성합니다.
Create a project with the command below.
npx @react-native-community/cli@latest init [Your Project name]nodejs9 % npx @react-native-community/cli@latest init rnlogin
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native 0.86.0!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Do you want to install CocoaPods now? Needed for running iOS project … yes
✔ Installing Ruby Gems
✔ Installing CocoaPods dependencies (this may take a few minutes)
✔ Initializing Git repository
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "/Users/gimdaegyeong/Desktop/app/nodejs/nodejs9/rnlogin" && npx react-native run-android
Run instructions for iOS:
• cd "/Users/gimdaegyeong/Desktop/app/nodejs/nodejs9/rnlogin"
• npx react-native run-ios
- or -
• Open rnlogin/ios/rnlogin.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for macOS:
• See https://microsoft.github.io/react-native-macos for the latest up-to-date instructions.⭐️ 프로젝트가 생성되었으면 먼저 테스트로 앱이 에뮬레이터로 실행되는지 먼저 확인해보세요
Once the project has been created, first check if the app runs on the emulator as a test.
그래서 아래의 adb devices와 npm run android or ios를 먼저 실행해봅니다.
So, first try running adb devices and npm run android (or ios) as shown below.
👉🏻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/username/Library/Android/sdk✔️AndroidManifest.xml 설정 / AndroidManifest.xml settings
– 인터넷 권한 설정이 필요한데 저같은 경우는 별도로 수정하지 않았습니다
Internet permission settings are required, but in my case, I didn’t change anything separately.
– 기본값으로 인터넷 사용이 허용으로 설정되어 있었습니다.
By default, Internet access was set to Allowed.
– 파일을 열어보고 <uses-permission android:name=”android.permission.INTERNET” /> 이 부분이 있으면 됩니다.
Open the file and you should see this line:
– file location : project/android/app/src/main/AndroidManifest.xml
👉🏻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 and a cloud server, so I set the permission in two places.
<?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>flmLogin</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허용을 위한 보안설정:http security settings-->
<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>
<key>media.freelifemakers.org</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSExceptionRequiresForwardSecrecy</key>
<false/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>
<!--// http허용을 위한 보안설정:http security settings-->
<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>
⭐️ ios의 경우 npm 명령어로 추가 모듈 설치를 했다면 아래처럼 pod install을 해줘야합니다.
For iOS, if you have installed additional modules using npm commands, you need to run pod install as shown below.
— ios디렉토리는 project directory내에 있는 ios디렉토리 입니다.
The iOS directory refers to the iOS directory located within the project directory.
cd ios
pod install
cd ..👉🏻4.실행화면 / Run Screen
✔️ 에뮬레이터 인식시키기
Configuring the Emulator
— 안드로이드 스튜디오를에서 에뮬레이터를 실행 시키고 다음 명령어를 실행합니다.
Launch the emulator in Android Studio and run the following command.
rnlogin % adb devices
emulator-5554 device✔️npm run android 또는 npm run ios로 기본 앱이 실행되는지 확인 합니다.
Make sure the native app runs with npm run android or npm run ios .
⭐️ 안드로이드 실행시에는 반드시 안드로이드 스튜디오가 실행되어 있어야 합니다.
Android Studio must be running when running Android.
⭐️ios에서는 에뮬레이터 바로 실행됩니다.(xcode)
On iOS, the emulator launches immediately.(xcode)
