2020-01-30-1. 리엑트 네이티브 시작하기

2020-01-30

리액트 네이티브란

리액트 네이티브는 리액트 라이브러리를 사용하는 크로스 플랫폼 개발 프레임워크 입니다.

리액트 네이티브는 웹 컴포넌트 대신 네이티브 컴포넌트를 사용합니다.

리액트를 이미 알고있으면 리액트 네이티브에서 사용하는 것만 알면, 바로 시작 가능합니다.

시작하기

본 튜토리얼은 expo를 사용하지 않고 진행하겠습니다. 본 튜토리얼 진행 환경은 맥 os에서 진행됩니다. 이점 참고해주세요

IOS

ios 를 타겟으로 개발환경을 구축해봅시다. 우선 우리는 node, Watchman, react-native command line interface(cli), Xcode가 필요합니다.

에디터는 상관 없습니다. 저는 vscode를 선호합니다.

Node & Watchman 설치

Homebrew를 사용하는 것을 추천합니다. 터미널에서 다음 명령어를 따라해봐요

brew install node
brew install watchman

node의 버전은 8.3이상이어야 합니다. Watchman은 페이스북에서 파일 시스템 변경을 포착하기위해 만들었습니다.

Xcode & CocoaPods 설치

맥 앱스토어에 접속하여 Xcode를 다운받습니다. Xcode를 다운받으면 iOS 시뮬레이터와 그외 필요한 툴을 같이 다운받게 됩니다. 버전은 9.4 이상이어야 합니다.

command line tool

Xcode Command Line Tool이 필요합니다. Xcode를 열고, CMD 키와 ,키를 동시에 누릅시다. xcode 로케이션 탭을 눌러 최근 버전의 tool을 설치합니다.

iOS 시뮬레이터 설치

시뮬레이터를 설치하고 싶으면, 다시 CMD키와 ,키를 동시에 눌른 뒤, Components 탭을 선택합니다. 그 뒤, 마음에 드는 iOS 버전을 선택합니다.

CocoaPods

CocoaPod은 Ruby로 개발되었습니다. 코코아팟은 Xcode에서 사용하는 프로젝트 매니저 입니다. (npm, chocolately등을 떠올려봐요) 자세한 사항은 사이트를 통해 확인해봅시다. 맥 OS에서 기본적으로 Ruby를 사용할 수 있기 때문에, 아래와 같은 명령어로 CocoaPod을 설치합시다. sudo gem install cocoapods

Android

우선, Node, Watchman, react native cli, jdk, Android Studio가 필요합니다.

Node & Watchman 설치

Homebrew를 사용하는 것을 추천합니다. 터미널에서 다음 명령어를 따라해봐요

brew install node
brew install watchman

node의 버전은 8.3이상이어야 합니다. Watchman은 페이스북에서 파일 시스템 변경을 포착하기위해 만들었습니다.

Java Development kit

[Homebrew]로 JDK파일 설치 합시다. 아래 커멘드를 따라해보세요 ` brew tag AdoptOpenJDK/openjdk brew cask install adoptopenjdk8` JDK는 8이상이어야 합니다.

Android 개발 환경 설정

다음 순서들을 확실하게 따라해 주세요 안드로이드가 처음이시면 다소 지루할 수 있습니다.

  1. 안드로이드 스튜디오 설치 안드로이드 스튜디오 설치하는 곳 설치 타입이 나오면 Custom을 누르고 다음을 모두 체크해주세요
    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM)
    • Android Virtual Device

Next를 눌러 위의 항목들을 전부 설치합니다.

다운로드가 완료되면 welcome 화면이 보일거에요.

  1. 안드로이드 SDK 설치 안드로이드 스튜디오를 설치하면, 최근 Android SDK를 default로 설치합니다. native코드와 함께 React Native 앱을 만들려면 Android 9 (Pie) SDK를 특별히 필요합니다. 추가적으로 Android SDK를 SDK Manager 에서 설치합시다. android studio 오른쪽 아래 Configure에서 SDK Manager를 선택해주세요.

SDK Platforms 탭을 누르고 Show Package Details를 선택해주세요.

Android 9 (Pie)와 관련된 아래 선택항목들을 체크해주세요.

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

다음으로, SDK Tools 탭을 선택한 뒤 Show Package Details 를 누르고 Android SDK Build-Tools를 눌러 28.0.3이 눌려있는지 확인해보세요

그 뒤, Apply를 눌러 설치를 시작합시다.

  1. ANDROID_HOME 환경변수 설정 React Native tools는 native code와 함께 앱을 개발하려면 환경변수 설정이 필요합니다. 아래 라인들을 $HOME/.bash_profile 이나 $HOME/.bashrc config file에 넣어주세요 
    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

    만약 bash 쉘 말고 다른 걸 쓰신다면 .bash_profile에 설정하지 말고 사용하고 있는 쉘에 맞는 설정 파일에 설정해주세요.

source $HOME/.bash_profile 을 입려하여 현재 쉘에 설정을 로드해주세요. ANDROID_HOME이 환경 경로에 설정 되어있는 지 echo $PATH를 입력해 확인해보세요.

새로운 어플리케이션을 만들어 봅시다.

npx react-native init 프로젝트 이름 을 입력해주세요. [Homebrew]: https://brew.sh/ [CocoaPod]:https://cocoapods.org/