[React Native] 윈도우 개발 환경 설정#6 - 안드로이드 스튜디오 설치 및 환경 설정

리액트 네이티브(React Native) 윈도우 개발 환경 설정 - 안드로이드 스튜디오 설치 및 환경 설정

 

[설치 순서]

1. Chocolatey 설치 
2. Nodejs 설치
3. Phthon 설치
4. React Native CLI 설치
5. JDK 설치
6. 안드로이드 스튜디오(android studio) 설치 및 환경 설정
7. 비주얼 스튜디오 코드(vscode) 설치
8. 타입스크립트(TypeScript) 설치
9. toruch 설치

 

 

안드로이드 스튜디오(android studio)

React-Native로 안드로이드 앱을 개발하려면 안드로이드 스튜디오를 설치해야 합니다. 
아래에 링크를 통해 안드로이드 스튜디오 사이트로 이동하고, 설치 파일을 다운로드합니다

 

> 공식 홈페이지(최신 버전 다운로드) 바로가기

 

> 과거 버전 다운로드 바로가기

 

[설치 방법]

 

1. 안드로이드 스튜디오 다운로드

 

 

참고로 아래 이미지는 스튜디오 버전에 따라 조금 상이 할 수 있습니다

 

2. 안드로이드 스튜디오 설치

 

1) Next 버튼 클릭

 

 

2) Choose Components 화면이 나옵니다. Android Virtual Device를 선택하고 Next 버튼을
눌러 다음으로 진행합니다

 

 

3) 안드로이드 스튜디오의 설치 위치를 설정 선택하고 Next 버튼을 눌러 다음으로 진행합니다

   주의 : 한글 이름이 포함된 폴더가 설치 시 문제가 발생될 수 있으므로 한글 포함 경로 사용 금지 

 

 

4) 특별히 수정할 것 없이 , Install 버튼을 눌러 설치를 진행합니다

 

 

 

5) Start Android Studio 가 체크된 상태에서 Finish 버튼을 눌러 안드로이드 스튜디오 설치를 완료합니다

 

 

6) "Do not import settings"을 선택하고 OK 버튼을 눌러 안드로이드 스튜디오를 실행

 

 

7) Next 버튼을 눌러 다음으로 진행

 

 

8) Custom을 선택하고 Next 버튼을 눌러 다음으로 진행합니다

 

 

9) 자신이 좋아하는 테마를 선택하고 Next 버튼을 눌러 다음으로 진행합니다

 

 

10) SDK Components Setup 화면을 확인할 수 있습니다 
     Performance (Intel ® HAXM)와 Android Virtual Device를 선택하고

     Next 버튼을 눌러 설치를 진행합니다

 

 

11) 특별히 수정할 것 없이 Next 버튼을 눌러 다음으로 진행합니다

 

---

 

[안드로이드 스튜디오 환경 설정]

 

1. Android SDK 설정

  설정은 Tool Box의 SDK Manager 아이콘을 클릭하거나, Tools 메뉴의 SDK Manager 이용

아이콘은 버전에 따라 상이할 수 있음​

Android SDK 설정 화면의 오른쪽 하단의 "Show Pacakge Details"를 선택 후

아래의 항목을 체크 후 OK 버튼을 클릭해 설치해 줍니다

(혼선을 줄이기 위해 아래 외 나머지 항목은 모두 체크 해제)

▣ Android 10.0 (Q) 
▣ Intel x86 Atom System Image
▣ Google APIs Intel x86 Atom System Image
▣ Google APIs Intel x86 Atom_64 System Image 

 

​

 

 

설치 진행.. (설치에 시간이 다소 소요됨)

 

 

 

2. AVD(안드로이드 에뮬레이터) 설정

 

1) 설정은 Tool Box의 AVD Manager (상위 버전의 경우 Device Manager) 아이콘을 클릭하거나,

   Tools 메뉴의 AVD Manager 이용

아이콘은 버전에 따라 상이할 수 있음

 

 

2) + CREATE VIRTUAL DEVICE.. 선택

 

3) Phone > Pixel 3a 선택 및 Next

 

 

4) x86 Images 탭에서 아래 항목 Download (Install Emulator) 및 Next

Release Name	API Level	ABI	Targt
Q	29	x86_64	Android 10.0(Google APIs)

 

 

4) Verify Configuration 아래와 같이 설정 후 Finish

Graphics : Software - GLES 2.0으로 선택
Device Frame : Software > Enable Device Frame 체크 해제

 

 

 

5) 설치 완료 후 Actions의 ▶ 버튼을 눌러 애뮬레이터 실행 확인

 

 

실행된 애뮬레이터

 

안드로이드 스튜디오의 설치와 설정 끝.

---

 

[안드로이드 스튜디오 윈도우 환경 변수 설정]

 

1. 내 PC에서 마우스 우클릭 > 속성(R) 메뉴 선택

 

 

 

2.  "고급 시스템 설정" 선택

 

 

 

3. 고급 > 환경 변수(N)... 선택

 

 

 

4. 환경 변수 설정 화면에서 시스템 변수(S) 아래 "새로 만들기(W)..." 선택 후 변수 이름(N) 및 변수 값(V) 입력   

   

변수 이름(N) : ANDROID_HOME
변수 값(V) : 아래 설명 "변수 값" 설명 참조

 

변수값은

위 [안드로이드 스튜디오 환경 설정] 의 1. Android SDK 설정의 Android SDK Location:의 경로를 복사하여 사용합니다 

 

 

5. 안드로이드 스튜디오의 platform-tools 를 설정.

   1) 사용자 변수 리스트에서 Path를 선택

   2) 편집(E)... 선택

   3) 환경 변수 편집 화면 > 새로 만들기(N) 선택 후 아래와 같이 입력 후
      확인 버튼을 눌러 환경 변수 설정을 완료 합니다

%ANDROID_HOME%\platform-tools

 

 

 

 

6. 환경 변수 설정이 잘 되었다면 아래와 같은 결과를 확인할 수 있습니다

adb --version

 

---

 

[React-Native 프로젝트 생성 및 확인]

 

1. React-Native 프로젝트 생성

 

이제 아래와 같이 React-Native CLI 명령어를 통해 react-native 프로젝트를 생성합니다

생성 명령은 "npx react-native init [프로젝트명]"으로 프로젝트명으로 디렉토리는 자동 생성 됩니다

npx react-native init HelloApp
또는
react-native init HelloApp

 

 

2. 안드로이드에서 확인

cd HelloApp
npm run android

 

문제없이 잘 실행되었다면 아래와 같은 화면을 확인 할 수 있습니다

(자동으로 cmd 창이 2개가 뜨고 난 후 "Welcome to React Native" 애뮬레이터가 출력 됩니다)

 

 

 

애뮬레이터가 출력되지 않고 에러가 발생한다면 

1. 개발환경 설정1~7까지 다시 한번 체크
2. 안드로이드 스튜디오에서 "애뮬레이터를  실행" 시켜 놓은 것이 있는지 확인
   (애뮬레이터가 실행되고 있다면 전부 닫고 나서 다시 npm run android 명령 실행)  

좀 더 자세한 사항은 "리액트 네이티브 에러 및 문제 해결" 포스팅을 참고