- React Native
- 개요
- 개발 환경
- 개발 환경 in Windows
- 개발 환경 in MacBook
- 주요 항목
- 참고 문헌
React Native
개요
컴포넌트
Native Code 호출
Java, 코틀린, Object-C, 스위프트
VSC
JSX : XML 형태로 작성된 코드
ESLint : 일관성있는 코드 규칙 지정
.eslintrc.js
Prettier : 코드 스타일을 자동으로 정리
.prettierrc.js
@format 키워드
--require-pragma
Flow : 정적 타입 분석기
@flow
Flow 대신 TypeScript 권장
라이브러리
ReactDOM : HTML과 DOM 라이브러리
JavaScriptCore : JavaScript 엔진
개발 환경
Node.js : https://nodejs.org/ko/download/
Python : https://www.python.org/downloads/
Java : https://www.oracle.com/java/technologies/javase-downloads.html
Chocolatey : https://chocolatey.org/install
Android Studio : https://developer.android.com/studio?hl=ko
Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device
Configure > SDK Manager : Show Package Details
SDK Platforms > Android SDK Platform 31
SDK Platforms > Intel x86 Atom_64 Image
SDK Tools > Android SDK Build-Tools 33-rc2 > 31.0.0
Xcode for iPhone in MAC
Window 시스템 변수 변수
ANDROID_HOME : %LOCALAPPDATA%\Android\Sd
Path : %LOCALAPPDATA%\Android\Sdk\platform-tools
개발 환경 in Windows
기본 환경
Node.js
Python
Java : 17 ~ 10 version
Android Studio
ADB : Android Debug Bridge
VisualStudio Code
node --version #--- 18.20.1
python --version #--- 3.7.7
java --version #--- openjdk 20.0.2
adb --version #--- 35.0.1
#--- React Native 설치
#--- Application 구성
cd /work
npx react-native init bluestone_mobile
# npx react-native init bluestone_mobile_window
cd bluestone_mobile
vi package.json
{
"scripts": {
"version": "react-native -v",
"doctor": "react-native doctor"
}
}
npm run version #--- react-native 14.0.0
#--- 설치 환경 점검
npm run start #--- 실행
npm run doctor #--- 환경 점검개발 환경 in MacBook
기본 환경
Homebrew (brew)
Ruby
Cocoapods (pod)
Node.js
Watchman
Android Studio
Xcode
VisualStudio Code
brew --version #--- Homebrew 4.3.14
ruby --version #--- 2.6.10
pod --version #--- Cocoapods 1.15.2
node --version #--- 18.20.1
watchman --version #--- 2024.08.05.00
#--- React Native 설치
#--- Application 구성
cd /Users/ghkim/work
npx react-native init bluestone_mobile
# npx react-native init bluestone_mobile_macbook
cd bluestone_mobile
vi package.json
{
"scripts": {
"version": "react-native -v",
"doctor": "react-native doctor"
}
}
npm run version #--- react-native 14.0.0
#--- 설치 환경 점검
npm run ios #--- 실행
npm run doctor #--- 환경 점검
#-----------------------------------------------------------
pod install
bundle exec pod install
#--- Ruby 설치
brew install rbenv
rbenv install 2.7.5 #--- Ruby 설치
rbenv global 2.7.5
rbenv local 2.7.5
rbenv rehash
gem install bundler
#--- Node.js 설치
brew install node
node --version
npm --version
#--- Watchman 설치
brew install watchman
watchman --version
#--- Cocoapods 설치
sudo gem install cocoapods
pod --version
#--- Android Studio 설치
brew install --cask android-studio
#--- JDK 설치
brew tap AdoptOpenJDK/openjdk
brew install -cask adoptopenjdk11
java --version
vi ~/.zshrc
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
#--- React Native 설치
npm install -g react-native-cli
npx react-native --version
npx react-native doctor
npx react-native init {AppName}
cd {AppName}
# ios/SampleApp.xcworkspace 파일 실행
npm start
# npm run ios주요 항목
//--- Storage
//--- State
const [visible, setVisible] = useState(true);