[비개발자의 앱 개발 수난기 #3] 리액트 네이티브 설치

비개발자가 앱 개발을 위해 필요한 리액트 네이티브 설치 과정을 다루고 있습니다. 주로 안드로이드 스튜디오와 리액트 네이티브의 설치에 대해 설명하고 있습니다. 포스트를 통해 리액트 네이티브 설치에 관심이 있는 비개발자들에게 도움을 제공하고자 합니다.

안드로이드 스튜디오 설치

안드로이드 에뮬레이터

안드로이드 개발 환경에는 실제 하드웨어가 없어도 앱을 개발하고 테스트할 수 있는 안드로이드 에뮬레이터(Emulator)가 제공됩니다. 안드로이드 에뮬레이터는 안드로이드 스튜디오 설치 시 함께 제공되는 소프트웨어로, 단순히 앱을 실행하는 수준이 아니라 개발자가 지정한 안드로이드 시스템을 시뮬레이션하여 화면에 표시합니다. 에뮬레이터는 PC 화면에 안드로이드 단말 기기를 옮긴 것과 같은 역할을 합니다.

안드로이드 에뮬레이터는 개발자가 설정한 여러 스펙(버전, 화면 크기, 메모리 등)으로 생성된 안드로이드 시스템, 즉 Android Virtual Device(AVD)를 실행시킵니다. 하나의 안드로이드 시스템을 실행하기 위해서는 해당 시스템에 대한 AVD를 생성해야 합니다.

안드로이드 에뮬레이터에서 실행될 AVD를 만들기 위해서는 AVD Manager(Android Virtual Device Manager)를 사용합니다.

AVD Manager 실행 및 생성

안드로이드 스튜디오를 설치하면 초기에는 AVD Manager 버튼이 비활성화되어 있습니다. AVD Manager를 실행하려면 여러 가지 방법이 있지만, 가장 안정적인 방법은 어플리케이션을 실행하여 하나를 실행시켜 보는 것입니다. 안드로이드 스튜디오에서 필요한 추가 모듈들도 설치가 되고 AVD Manager까지도 실행할 수 있는 환경을 제공해 줍니다.

1. Create New Project

2. Next

3. Save Location에서 프로젝트 하나를 선택

4. 프로젝트가 열리면 필요한 파일들이 자동으로 설치되고,
상단 Tool Bar에서 Tool 탭을 열어보면 AVD Manager가 설치된 것을 확인할 수 있다.

5. AVD Manager를 선택하면 이와 같은 화면이 열리고,
하단에 [Create Virtual Device] 버튼을 선택해 준다.

6. 원하는 디바이스를 선택 후 Next

7. 원하는 API 선택 후 Next

8. Finish 버튼 선택

9. Actions에 있는 Play 버튼을 선택

10. 에뮬레이터가 실행되는 것을 확인할 수 있습니다.

SDK 버전 설치

SDK Manager 에서 개발에 필요한 안드로이드 SDK 버전들을 설치합니다.

리액트 네이티브 설치

watchman 설치

리액트 네이티브 공식 홈페이지에서는 watchman 설치를 권장하고 있습니다. watchman은 파일시스템의 변화를 캐치하기 위해 만든 툴입니다. 보다 나은 성능을 위해 설치할 것을 추천합니다.

brew install watchman

react-native-cli 설치

npm 패키지를 로컬하게 관리할 수도 있고, 글로벌하게 관리할 수도 있습니다. 글로벌하게 관리한다는 의미는 어느 디렉토리에 가도 명령어가 실행이 될 수 있도록 제공해 주는 것을 말합니다.

npm install -g react-native-cli

리액트 네이티브 프로젝트 생성

이제 프로젝트를 생성해 보십다. (주의 – 프로젝트 이름을 적을 때 대괄호는 포함하지 않음)

react-native init [PROJECT_NAME]

리액트 네이티브 프로젝트 실행

$ cd [PROJECT_NAME]
// run ios
$ react-native run-ios
// run android
$ react-native run-android

Visual Studio에서 iOS 프로젝트를 실행(run-ios) 결과

설치 과정은 강의 내용대로 정리해 두었으나, 사실 설치하면서 Error 메시지가 계속 떴습니다. 그 중 리액트 네이티브 프로젝트를 실행하는 과정에서 cocoapods install error가 있었고, 이걸 해결하기 위해 구글링하느라 꽤나 시간을 보냈습니다. 제가 가장 도움이 되었던 해결 방법은 이거였습니다.

https://github.com/react-native-community/cli/issues/487#issuecomment-513208098