React Native Study 1 | Install

SoosDev·2021년 1월 1일

AndroidStudio Java Start Xcode cocoapod install node.js npm nvm reactnative reactnativecli visualstudiocode

React Native Study

목록 보기

1/4

공부 시작

블로그의 글들은 강의를 들으며 복습 & 공부용으로 기록합니다.
오타와 틀린 부분은 지적해주시면 감사하겠습니다.

글에 문제가 있을 경우 알려주시면 바로 삭제하겠습니다.

React Native

페이스북에서 만든 오픈소스 모바일 응용 프로그램
네이티브 앱 개발을 위한 자바스크립트 프레임 워크
크로스 플랫폼
하나의 코드 개발을 통해 IOS 와 안드로이드에서 동일하게 동작시킬 수 있는 API
자바스크립트를 기본 언어로 사용
Java, Kotlin 언어에 의존하는 안드로이드 네이티브 앱, 혹은 Swift 언어에 의존하는 ios 네이티브 앱 개발보다 진입 장벽이 낮고, 훨씬 쉽다는 장점을 가지고 있다.

html, css, 자바스크립트, ES6, 리액트의 선수 지식이 도움이 됨

원리

사진 & 영상 출처

2가지 방법

Expo CLI
- Pros
  - 개발 환경 구축 용이
  - 실제 개발이 쉽고 편함
- Cons
  - OS Layer와 직접 상호작용 불가능
    (Java, Kotlin, Obj-C, Swift 로 추가 작성 불가)
  - Expo에서 제공해주는 모듈만 사용 가능
  - Expo Client에서는 잘 동작하지만
    실제 Simulator & 단말기에서 동작하지 않을 수 있음
  - 개발 관점에서의 자유도 낮음
React Native CLI
- Pros
  - Expo로는 접근하지 못하는 Native 기능에 접근 가능
    (Native 모듈 사용 자유도 높음)
  - 원하는 언어로 추가 작성 가능
    (Custom Native 모듈 사용 가능)
  - 필요한 기능이 있는 경우 모듈을 직접 제작 가능
  - OS Layer와 직접적인 상호작용 가능
- Cons
  - 초기 개발환경 구축 및 실제 앱 개발 시, 다소 시간이 소요
  - 단, Mac 환경일 경우에만, IOS & Android 시뮬 지원
    (윈도우에서는 IOS 시뮬을 지원하지 않음)

초기 환경 구축 & 설치할 항목

nvm ( Node Version Manager )
node.js
npm ( Node Package Manager )
Android Studio
Java
Xcode
visual Studio Code
CocoaPod
React Native CLI

nvm ( MacOS )

터미널 열어 코드를 복사 & 붙여넣기 , 비밀번호 입력
0.33.11 version을 사용했습니다.

설치 참고 : https://gist.github.com/falsy

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

에러 : xcrun error
해결방법 참고 : swtpumpkin

// 에러 코드
xcrun: error: invalid active developer path
(/Library/Developer/CommandLineTools), missing xcrun at:
/Library/Developer/CommandLineTools/usr/bin/xcrun

해결 방법 : 터미널 열고 아래 코드를 한 개씩 순서대로 추가

// 설치
xcode-select --install

// 확인
xcode-select -v
-> xcode-select version 2384.

// 다시 nvm 설치
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

(에러 없으면 진행) 확인

nvm ls
-> -bash: nvm: command not found
// 이렇게 떠도 정상

아래 코드를 통해 vi 에디터를 실행

vi ~/.bash_profile

'i' 버튼을 눌러 아래 코드를 insert

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

위 코드를 복붙했다면, 'ESC' 키 -> ':wq' (저장 후 종료) 치고 엔터
만약 E45: 'readonly' option is set~ 이 뜬다면 :wq! 치고 엔터
재시작 합니다. 아래 코드 치고 엔터

source ~/.bash_profile

버전 확인 -> nvm 설치 완료

nvm --version
0.33.11

node.js

설치한 nvm 을 사용하여 설치가 가능합니다.
터미널에 코드를 입력합니다.

nvm install 10.15.1 

-> 실행하면 
~ Creating default alias: default -> 10.15.1 (-> v10.15.1) 라고 뜸

10.15.1 version을 사용했습니다.

확인 -> node.js 설치완료

node -v
v10.15.1

nvm 을 통해 node.js 여러 버전을 사용할 수 있다.
-> nvm install ?.?.? 코드를 통해 설치가 가능하고
-> nvm ls 를 통해 설치한 모든 항목을 볼 수 있다.
(이 때, -> 가 있는 버전이 선택된 버전이다.)
-> 10.15.1 혹은 선택한 버전을 사용하기 위해 nvm use 10.15.1 입력

npm

node.js로 개발된 프로그램을 편리하게 설치, 업데이트, 삭제 해주는 프로그램

node.js로 생성 & 작성된 패키지를 관리하는 프로그램

npm은 node.js가 설치하면 함께 설치가 된다.
1. 확인은 해준다.

 npm --version
6.4.1

Android Studio

Android Studio 에 가서 dmg 파일 다운로드
다운받은 dmg 파일을 더블 클릭, Android Studio -> Applications로 옮긴다.
다 옮겨지면 런치패드에서 실행
Do not import settings 선택
Welcome, Next -> Standard, Next -> UI Theme 선택 후 Next -> Finish -> Downloading Components -> 완료되면 Finish
설치가 완료되면 하단 Configure을 눌러 SDK Manager 열기

android 10.0(Q) version을 사용했습니다.
하단의 Show Package Detail -> 설치할 항목들을 클릭하여 체크 표시

체크로 선택한 후 아래 Apply - OK 를 눌러 설치한다.

이번에는 Configure -> AVD Manager 을 열어준다. 하단의 + Create Virtual Device.. (definition) 을 클릭
Phone에서 원하는 가상 디바이스를 선택 후 Next - 다운받은 SDK 버전을 확인하고 Next - Finish

Android Studio 환경 변수 설정

zsh, bash 환경설정 참고

환경 변수 설정, 터미널 열고 아래 코드 입력 ->

vi ~/.bash_profile

알파벳 E -> i 를 순서대로 눌러 수정을 한다. -> 아래 코드 복사해서 상단에 붙여넣기

export ANDROID_HOME=/Users/Soo/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

주의사항 : export ANDROID_HOME=/Users/Soo/Library/Android/sdk
이 부분에서 주소는 SDK Manager 에서 상단 주소와 같게 타이핑해준다.

입력을 하고 ESC 키 -> :wq -> 엔터
확인

adb 
// 상단으로 올라가보면 아래처럼 확인할 수 있다.
Soo@Park-MacBookPro ~ % adb
Android Debug Bridge version 1.0.41
Version 30.0.5-6877874

만약, zsh: command not found: adb

adb version
zsh: command not found: adb
// 이렇게 나온다면, vi를 다시 열어 하단 빈 곳에 코드 한 줄을 추가시킨다. ->
export PATH=${PATH}:/Users/*이름*/library/android/sdk/tools:${PATH}:/Users/*이름*/library/android/sdk/platform-tools
// *이름* 은 내 맥북 사용자 명

여기까지 안드로이드 스튜디오 설치 완료

JAVA

Oracle 홈페이지 - Java SE 11 (LTS) Oracle JDK Download 에서 macOS Installer .dmg 파일을 다운받아준다.
( 약 166.82 MB, 로그인 필수 )
다운받은 .dmg 파일을 더블 클릭 -> JDK .pkg 파일 더블 클릭 -> 설치를 진행한다.
확인

java --version

java 11.0.9 2020-10-20 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.9+7-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.9+7-LTS, mixed mode)

자바 경로는

cd /Library/Java/JavaVirtualMachines/
ls
-> jdk-11.0.9.jdk

설치 완료

Xcode

앱스토어 - Xcode 검색 후 받기를 통해 설치하면 된다.

추가로 Xcode 실행 후 상단 메뉴 Xcode - Preferences... - Locations - Command Line Tools -> Xcode ?.?.? 가 설정되어 있는지 확인한다.
안되어 있으면 설정

Visual Studio Code

visual studio code 홈페이지에서 다운
혹은
버전 선택 하여 다운

January 2020 (version 1.42를 추천?)

Mac을 사용하기 때문에 Mac 클릭

CocoaPod, 블로그 링크

터미널을 열고
sudo gem install cocoapods -v 1.8.4 (사용할 버전)

만약 오류가 뜬다면, 사용하는 Mac버전과 호환되는 코코아팟 버전을 찾아 설치

pod --version

입력하여 설치가 잘 되었는지 확인한다.

React Native CLI

(글로벌 설치)
npm install -g react-native-cli

react-native --version

->react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

똑같이 설치가 잘 되었는지 확인한다.

SoosDev

IOS 개발 공부를 하면서 기록하는 중입니다.

다음 포스트

React Native Study 1 | Install