본문 바로가기
React Native/iOS

[React Native]맥에서 앱 개발 환경 갖추기 #2 (Xcode, 코코아팟, 왓치맨, 안드로이드 스튜디오)

by ssollacc 2021. 8. 19.
728x90

1편에 이어 mac 개발 환경을 소개합니다.

https://ssollacc.tistory.com/entry/mac-reactnative1

 

[iOS] 맥에서 앱 개발 환경 갖추기 #1 (홈브루, 비주얼스튜디오코드, Node.js, 자바8 JDK )

맥에서 앱 개발 환경을 갖추는 방법입니다. 홈브루 설치 https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 방문하여 다음 명령을 복사한 후 터미널에서 실행합니다..

ssollacc.tistory.com

 


Xcode 설치

iOS 앱을 개발하려면 Xcode가 필요합니다. 

그러려면 먼저 developer.apple.com에서 계정을 만들어야 합니다.

https://developer.apple.com/downloads/

 

로그인 - Apple

 

idmsa.apple.com

App Store에서 설치하는 것을 권장하고 있으나,

시간이 오래걸리는 오류가 지속되고 있으니 사이트에서 다운 받아줍니다.

계정을 만들고 사이트에 로그인하여 Xcode를 내려 받아 설치합니다.

 

Xcode 업데이트에 따라 명령 줄 도구가 제대로 설정되지 않으면

CocoaPods 의존성 설치에서 오류가 발생할 수 있어 설치가 끝난 후

[Xcode -> Preferences -> Locations]로 이동하여 Command Line Tools에 Xcode를 지정합니다.

 

 


코코아팟 설치

 

리액트 네이티브 ios 앱을 만들려면(즉, 빌드하려면)

오브젝티브-C로 구현된 네이티브 모듈(native module)이라는 부분을 빌드해야 합니다. 

 

그런데 오브젝티브-C는 자바와 달리 원격 저장소(remote repository)에 호스팅된

오픈소스 패키지를 내려받아 개발 컴퓨터에 설치하는 기능이 없습니다. 

 

그러므로 오브젝티브-C 프로젝트를 빌드할 때는 코코아팟(CocoaPods)이라는 프로그램을 사용하여

원격 저장소에 호스팅된 각종 패키지를 내려받아 설치하는 과정이 필요합니다.

 

코코아 팟은 테미널에서 다음 명령으로 설치합니다.

 

sudo gem install cocoapods
pod --version

 

 


왓치맨 설치

리액트 네이티브 프로젝트는 VSCode 편집기에서 소스 파일을 변경하고 저장하면

이를 자동탐지하여 변경된 내용을 시뮬레이터 앱에 자동으로 반영하는데,

이 기능을 사용하려면 페이스북에서 만든 왓치맨(watchman)이란 프로그램이 있어야 합니다.

워치맨은 홈브루로 다음과 같이 설치 합니다.

 

brew install watchman
watcman --version

 

 


안드로이드 스튜디오 설치

 안드로이드 스튜디오 내려받기 페이지에서 <Download Android Studio> 버튼을 눌러 설치합니다.

https://developer.android.com/studio?hl=ko&gclid=CjwKCAjwgviIBhBkEiwA10D2jyIbKgOGTYI6RtpnRwLsHJ00KGqbwXJJjk1uUmzmXXgu2WMN-6tcVxoC8GIQAvD_BwE&gclsrc=aw.ds 

 

Download Android Studio and SDK tools  |  Android Developers

developer.android.com

설치가 끝나면 론치패드에서 안드로이드 스튜디오 아이콘을 찾아 실행합니다.

그리고 초기화면 아래 [Configure]를 클릭한 다음 [SDK Manager]를 실행하고 [SDK Tools]탭을 선택하여 설치합니다.

만일 Status가 'Update Available'라면 해당 항목을 업데이트 합니다.

 

이제 터미널에서 다음 명령을 실행하여 VSCode로 .zshrc 파일을 편집합니다.

 

code $HOME/.zshrc

 

 

$HOME/.zshrc에 다음 내용을 삽입하고 source .zshrx 명령을 실행합니다. 

 

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK/emulator
export PATH=$PATH:$ANDROID_SDK/tools
export PATH=$PATH:$ANDROID_SDK/tools/bin
export PATH=$PATH:$ANDROID_SDK/platform-tools

 

 

 

다음 내용은 '리액트 네이티브 앱프로그래밍(Do it!)' 책을 참고하여 작성하였습니다.

 

 

 

 

 

728x90

댓글