[React-Native] 공부 목적 / 환경 세팅 (mac, node, Xcode, iOS, Android)

* React Native를 공부하는 배경

Java를 통해 안드로이드 개발은 해봤으나, swift를 통해 iOS까지 개발은 힘들 것 같음

 

* 리액트 네이티브

웹 앱을 만들어서 네이티브 앱처럼 배포하는 ReactNative나, Flutter 존재

=> Flutter는 예전에 한번 사용해 봤으나, dart라는 언어를 깊게 배우지 못해 개발에 어려움이 있을것으로 예상

=> 현재 더 익숙한 JavaScript(TypeScript)를 사용하는 ReactNative를 통해 개발 예정

 

* 학습 목표

! 웹 기술을 바탕으로 모바일 앱을 만들어보자

 

* 특징

- JS로 작성했지만, 네이티브 코드로 랜더링된다!

- Corss-Platform

  - 공통적으로 쓰고, 일부만 android/ios로 구현

- 코드 저장 시 바로 적용됨 (FAST!)

 

* node 환경에서 실행

-> npx react-native init ProjectName

 

* Basic

리액트와 비슷하나, 웹 컴포넌트 대신 native 컴포넌트를 사용

- 비슷한거지 리액트 네이티브만의 기술도 있어 공부 필요

- div, p, button 이런 html tag쓰는게 아니라 View, Text, Button 텍스트를 사용하는 듯??

- style 적용도 StyleSheet를 통해 생성하고 적용 ?

 

* 리액트 네이티브 정리

- 모바일 디바이스 크로스플랫폼 개발

- React를 통해 ios, android 네이티브 앱 개발

- JS(TS)를 통해 작성한 걸 네이티브 코드로 렌더링

- 코드 저장 시 빠른 결과 확인 가능

 

 

* 개발 환경 세팅

- iOS

  - node, watchman 설치 (brew install node/watchman) 

    - Watchman : 파일 시스템 변화 감시를 위한 도구

  - Xcode 설치

    - iOS platform 관련 시뮬레이터 설치

  - CocoaPods  설치

    - Xcode 프로젝트의 라이브러리 종속성 관리

    - Ruby로 빌드되어있어, macOS에서 사용 가능

    -> gem install cocoapods

  - .xcode.env 에서 Xcode 환경 구성 가능

 

- Andorid

  - node, watchman 설치 (brew install node/watchman) 

  - OpenJDK 설치

    - brew install --cask zulu@17

    - brew info --cask zulu@17

    - ex. finder /opt/homebrew/Caskroom/zulu@17/<17.0.13,17.54.21>에 있는 패키지 설치

  - JDK 설치 후 JAVA_HOME에서 환경 변수를 추가하거나 업데이트

    - vim ~/.zshrc

      - export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

    -  source ~/.zshrc

  - Android Studio 설치

    - SDK Manger에서 Android 14 (UpsideDownCake) 체크

      -  SDK Platforms    

        -Show Package Details에서 아래 체크 확인

          - Intel x86 Atom_64 System Image

          - Google APIs Intel x86 Atom System Image

          - (Apple M1 Silicon의 경우)Google APIs ARM 64 v8a System Image

      - SDK Tools

        - Android SDK 34.0.0 선택

  - Andorid_Home 환경 변수 구성

    - vim ~/.zshrc

      - export ANDROID_HOME=$HOME/Library/Android/sdk

      - export PATH=$PATH:$ANDROID_HOME/emulator
      - exportPATH=$PATH:$ANDROID_HOME/platform-tool

    - source ~/.zshrc   

  - 안드로이드 기기 준비

    - 물리 장치 사용 (연결)

    - 가상 장치 사용

      - Android Studio -> Create Virtual Device -> 핸드폰 선택 -> API 레벨 34 이미지 선택

 

 

* 참고

  - 안드로이드 : https://reactnative.dev/docs/set-up-your-environment?platform=android

  - iOS : https://reactnative.dev/docs/set-up-your-environment?platform=ios