android/app/build.gradle
: 안드로이드 앱을 빌드, 배포할 때 사용하는 파일
android/app/src/main/java/com/[프로젝트 이름]/MainActivity.java, MainApplication.java
: 안드로이드 앱의 메인 파일
android/app/src/main/res
: 안드로이드 앱의 아이콘 또는 시작 화면 등의 리소스를 관리하는 폴더
ios/[프로젝트 명]/AppDelegate.h, AppDelegate.m
: ios 앱의 메인 파일들
ios/[프로젝트 명]/Info.plist
: ios 프로젝트 설정파일
ios/[프로젝트 명].xcworkspace
: ios 프로젝트를 Xcode로 시작하기 위한 파일
ios/Podfile
: 코코아포드(ios의 의존성 관리자)의 의존성 관리 파일
android/build.gradle
에서 minSdkVersion
와 compileSdkVersion
, targetSdkVersion
으로 확인 가능합니다.
minSdkVersion
는 안드로이드 디펜던시(패키지)에 따라서 올리기도 한다고 합니다.
또한, 앱 사용자 타겟을 Android 6.0 미만으로 두지 않을거라면 minSdkVersion을 6.0으로 올리는 것은 문제가 될거 같지 않다고 하는 커뮤니티 분들의 답변을 받아서 6.0으로 지정해도 무방하다면 올려도 나쁘진 않을거 같습니다.
https://facebook.github.io/metro/docs/configuration
기본적인 설정인 experimentalImportSupport : false
는 const a = import("asdf");
같은 실험적인 임포트 문법을 허용하지 않는 것이고
inlineRequires : false
은 require으로 export된 모듈을 부를때 인라인에서 호출 가능한 옵션입니다.
Metro는 React Native를 위한 자바스크립트 번들러로써 jsx 문법을 js로 번들링 해주고 에셋들이 제대로 인식될 수 있도록 도와주는 역할을 하고 있습니다.
https://medium.com/@sw.lee/reactnative-webview-f7759d06ea3b
ios에서 기본적인 작업 (레이아웃, 데이터 연동) -> aos에서 복잡한 애니메이션&인터렉션 확인 -> ios에 특화된 ux작업
iOS 및 Android의 다양한 기본 스토리지 유형에 의해 지원되는 React Native의 기능입니다. AOS/IOS 둘 다 해당 스마트폰 저장공간(앱의 로컬 디비)에 저장되게 됩니다. 다른 앱에서 억세스할 수 없으며 앱에 바인딩 되어있고 앱을 삭제하는 경우 같이 삭제되게 됩니다.
사용방법 : https://github.com/react-native-community/async-storage/blob/master/packages/core/docs/API.md
보통 jwt 토큰을 Async Storage에 많이 저장하여서 사용하고 있습니다.
https://reactnavigation.org/docs/stack-navigator
https://reactnavigation.org/docs/modal
https://reactnavigation.org/docs/drawer-navigator
https://reactnavigation.org/docs/bottom-tab-navigator
https://reactnavigation.org/docs/material-bottom-tab-navigator
https://reactnavigation.org/docs/material-top-tab-navigator
https://reactnavigation.org/docs/auth-flow
https://reactnavigation.org/docs/custom-android-back-button-handling
아이폰의 백스와이프는 따로 처리할 수 없습니다.
https://reactnavigation.org/docs/navigation-prop#reset
node & watchman 설치
$ brew install node
$ brew install watchman
Xcode 설치 후 Preferences => Locations 에서 Command Line Tools에서 선택하여 설정
CocoaPods 설치
sudo gem install cocoapods
Java 설치
위에 사이트에서 adoptopenjdk8를 설치해줍니다.
안드로이드 스튜디오 설치시 Custom으로 설정하여 아래의 설정을 해주어야 합니다.
Appearance & Behavior → System Settings → Android SDK
에서 설치 가능합니다.
android 9 (Pie), Android SDK Platform 28, Intel x86 Atom_64 System Image, Google APIs Intel x86 Atom System Image를 체크 박스 하여 적용하고 설치합니다
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
위의 설정을 ~/.zshrc
에 저장하여 줍니다.
https://www.npmjs.com/package/babel-plugin-root-import
기기 선택 후 시스템 이미지 선택시 Google APIs에 x86인 것을 고릅니다.
다음으로 에뮬 설정에서 퍼포먼스에서 Hardware - GLES 2.0을 선택해줍니다.
다음으로 Show Advanced Settings를 눌러줍니다. VM Heap 을 512로 설정해줍니다.
일반적인 알림 (제목과 내용만 있는 알림)
"message":{
"token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title" : "안녕",
"body" : "안녕하세요",
}
}
이미지 포함된 알림 (해당 이미지는 안드로이드에서만 사용되게 되며 Large icon과 메시지를 아래로 펼쳤을때 이미지로 사용되게 됩니다.)
"message":{
"token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title" : "안녕",
"body" : "안녕하세요",
"image" : "https://blabla.com/image.png"
}
}
AOS 및 apns(IOS) 추가 설정하기
"message":{
"token" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
"notification":{
"title" : "안녕하세요",
"body" : "안녕하세요",
"image" : "https://blabla.com/image.png"
}
"android": {
"notification": {
"default_sound": false
}
},
"apns": {
"payload": {
"badge": 1,
"sound": "bingbong.aiff"
}
}
}
AOS에서는 제목, 내용, 채널아이디, 알림의 진동, 소리, 빛 등을 설정할 수 있으며 더 많은 옵션은 아래를 통해서 확인하실 수 있습니다.
https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages?hl=ko#Notification
IOS에서도 payload안에서 옵션을 바꾸어서 알림 제목, 내용을 바꿀 수 있고 알림의 소리와 배지 갯수를 설정할 수 있습니다. 더 많은 옵션은 아래 링크를 통해서 확인할 수 있습니다.
기본적으로 AOS에서는 여러가지 것들은 알림에서 지정해줄 수 있습니다. (React Native에서 설정 가능)
https://rnfirebase.io/docs/v5.x.x/notifications/reference/AndroidNotification
IOS도 여러 옵션을 가지고 있습니다. (React Native에서 설정 가능)
https://rnfirebase.io/docs/v5.x.x/notifications/reference/IOSNotification
아래글을 참고하여 apn 인증서 추가합니다.
https://firebase.google.com/docs/cloud-messaging/ios/certs
다음으로 프로젝트 폴더에서 [앱이름].xcworkspace
를 눌러서 Xcode를 실행시켜주고 Signing & Capabliities
탭에서 바로 아래 + Capabliities
눌러서 추가 설정합니다.
push를 검색하여 Push Notification
을 추가해줍니다.
추가로 Background Modes
를 검색해서 추가하고 Remote notification
을 선택해줍니다.