앱스토어 등록 일지 01. 안드로이드 개발 환경 구축 & 안드로이드 스튜디오 연동하기 (React Native)

예전에 싸피에서 프로젝트로 했던 안드로이드 애플리케이션을 앱 등록 직전에 싸피를 졸업하면서 흐지부지 된 적이 있었다. 앱스토어에 내 앱을 등록한 경험이 없다는 것이 조금 아쉬워서 오늘부터 아무 앱이나 만들어서 앱 스토어에 심사, 등록을 목표로 달려보려고 한다.

 

 

오늘은 그 첫 번째로 개발환경 설정에 대해 끄적여보겠다. 나는 React Native로 개발을 할 것이고 vscode와 android studio를 사용할 것이다. React Native 개발은 expo cli와 react-native-cli 개발로 나뉘는데, 예전에 정리해둔 내용으로 따로 포스팅을 하겠다. 그리고 난 IOS는 잠시 뒤로 미뤄두고 안드로이드 애플리케이션을 개발할 생각이다.

일단 개발에 필요한 프로그램들을 모두 설치해주자.

 

필요한 파일 설치

1. Visual Studio Code

 VSCode는 Microsoft에서 개발한 무료 오픈소스 편집기로 장점이 꽤 많다. windows, macOS, Linux 모두 실행할 수 있어 플랫폼 호환성이 높고, 저사양 컴퓨터에서도 잘 동작할 만큼 가볍다. 또한 커뮤니티가 활성화 되어 있어서 필요한 확장팩을 클릭 몇 번으로 가져다 쓸 수 있다.

 

 그래도 이번에 편집기로 VSCode를 선택한 건 그 동안 내가 개발하면서 가장 많이 사용했기 때문에 손에 익어서이다.

다운로드는 아래 링크에서 가능하다.

Visual Studio Code - Code Editing. Redefined

 해당 링크에서 windows 버전으로 다운받아주면 된다.

전역 설정을 건드려서 조금 더 개발을 편하게 하고 싶거나, 한글 설정으로 바꾸고 싶거나, 다양한 플러그인을 설치하고 싶다면 검색창에 'VSCode 한글 설정', 'VSCode 플러그인 추천' 이런 키워드로 검색하면 금방금방 원하는 것들을 찾을 수 있을 것이다. 나는 일단 ctrl+ art + p로 user setting을 검색하여 tabSize 하나만 넣어주었다.

// settings.json
{
  ...
  "editor.tabSize": 2,
}

 

 

2.  Android Studio

 폰에 직접 연결해서 개발하기 귀찮아서 에뮬레이터를 쓰기 위해 설치한다. 아래 링크에서 windows버전으로 받았다.

Android 스튜디오 설치  |  Android Studio  |  Android Developers

 다운로드를 받고 환경변수 설정을 해줬다. 내 PC > 속성 > 고급 시스템 설정 > 고급 > 환경 변수를 들어간다.

거기서 시스템 변수에  ANDROID_HOME으로 변수를 하나 만들어주고, 사용자 변수의 Path를 들어가 새로만들기하여 %ANDROID_HOME%\platform-tools 변수를 만들어준다.

이후 cmd를 열어 adb -- version을 입력하여 설치가 정상적으로 됐는지 확인해준다.

 

3. JDK

Download the Latest Java LTS Free

 나는 LTS 버전으로 다운 받았다.

설치한 다음 마찬가지로 환경변수를 설정해줘야 한다.

다음과 같이 JAVA_HOME 변수에 jdk 파일 경로를 입력하면 된다.

확인은 프롬프트에 java -version이라 쳐본다.

 

4. React Native

 나는 React Native cli로 개발을 할 생각이므로 설치해준다.

cmd 또는 본인이 사용하는 터미널에서 아래 명령어를 입력한다.

npm install -g react-native-cli

 

npm 패키지 매니저가 없다면 Node.js를 다운받고 진행한다.

이런 식으로 버전이 나온다면 설치가 잘 되어있는 상태니까 다시 한 번 명령어를 입력해본다.

 

정상적으로 설치가 되었다면 이제 프로젝트를 생성하러 가보자.

 

프로젝트 시작 및 안드로이드 에뮬레이터 실행

프로젝트 생성

일단 react-native-cli 프로젝트를 생성하자.

react-native-cli init {{앱 이름}}

해당 명령어로 프로젝트를 생성한다. 나는 앱 이름에 tester이라 넣었다.

앞으로는 이 명령어를 쓰지 않았으면 좋겠다고 경고를 해준다.

npx @react-native-community/cli init {{앱 이름}}

이렇게 쓰도록 하자.

프로젝트가 잘 생성된 것을 볼 수 있다.

프로젝트 실행 & 에뮬레이터 실행하기

일단 adb devices 명령어를 통해 현재 작동중인 에뮬레이터가 있는 지 확인할 수 있다.

지금은 리스트가 비어있다.

 

아래 명령어로 프로젝트를 실행한다.

react-native run-android

 아 예전엔 분명 잘 됐는데;;;

실행을 하려니 이런 에러가 생겼다.

 

상태를 확인하기 위해 아래 명령어를 입력했다.

react-native doctor

에러가 두 개나 있다.

 

Adb는 에뮬레이터 실행을 하면 될 것 같아 일단 Android SDK 먼저 해결해보려 했다.

 

안드로이드 스튜디오 메뉴 중 Tools > SDK Manager에 들어가서

Languages & Frameworks > Android SDK

여기서 SDK Tools에 들어간다.

여기에서 Android SDK Command-line Tools (latest) 이 부분을 설치해준다.

Android SDK가 체크로 바뀌었다. 이제 Adb를 해결해보자.

 

안드로이드 스튜디오 Device Manager에서 디바이스 하나를 실행시켰다.

모든 부분이 파랗게 바뀌었다.

예전에는 프로젝트 실행하면 자동으로 에뮬레이터가 동작했던 것 같은데, 이 부분은 나중에 다시 살펴봐야겠다.

 

암튼 이렇게 해서 다시 run-android 해주면!!

짜잔~ 고작 이 화면 하나 본다고 긴 여정을 했다.

이제 VSCode에서 ReactNative로 컴포넌트나 만져봐야겠다.