nodejs9-리액트네이티브 로그인/ReactNative Login(1)

ReactNative Login 앱에 대한 설명입니다.
Description of the ReactNative Login app.
아래는 프로젝트 생성과 셋팅에 대한 설명입니다.
Below are instructions for creating and setting up a project.

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

2.안드로이드 설정 / Android Settings

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

2)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)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.

1)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>

4.실행화면 / Run Screen

-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.