Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축

목록
1. Next.js, 웹뷰 도입 과정(1) - Expo 설치
2. [현재 글] Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축
3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록

 

본 글은 웹뷰를 도입하면서 경험한 주관적인 과정입니다.
리액트 네이티브의 확장 표준 라이브러리 Expo(v52), 안드로이드 스튜디오(v21)를 사용합니다.

 

1. 디버그 환경 구축

# 스마트폰

스마트폰은 다른 설정하지 않고 Expo 프로젝트를 바로 확인할 수 있어 편하지만 충전이 필요합니다.

스마트폰에서 사용하는 방법은 웹뷰 URI에 IP주소를 할당한 다음 Expo 프로젝트를 CLI를 통해 구동합니다. 그 후 터미널로 QR 코드와 명령어가 출력됩니다. 스마트폰에서 Expo Go 앱을 다운로드 하고 QR코드를 인식하면 앱에서 웹뷰를 확인할 수 있습니다.

웹뷰는 웹에서 확인할 수 없습니다.
모바일 장치에서 웹뷰가 보이지 않는다면 오류 해결 목록글에서 확인해보세요.

Expo 안드로이드 장치 환경설정 공식문서 확인

 

# 안드로이드 애뮬레이터

애뮬레이터는 모니터로 바로 확인 가능해 스마트폰보다 편리하지만 사전 준비가 번거롭습니다.

안드로이드 스튜디오, 자바를 설치합니다. 이후 환경변수로 안드로이드와 자바를 등록합니다. CMD를 통해 안드로이드와 자바 환경변수 등록을 확인할 수 있습니다. 빈 값을 출력하는 경우 환경변수가 등록되지 않은 상태입니다.

> echo %ANDROID_HOME% 
# android 설치 경로 출력

> echo %JAVA_HOME%
# java 설치 경로 출력

환경변수가 등록되었다면 안드로이드 스튜디오에서 애뮬레이터를 생성합니다. 

projects > more actions > Virtual Device Manager 

생성한 다음 Expo 프로젝트를 CLI를 통해 구동시킵니다. 그 후 터미널로 출력되는 명령어 중에서 'a'를 누릅니다. 안드로이드 스튜디오 애뮬레이터가 가동 중이어야 합니다.

Expo에서 자동으로 안드로이드 애뮬레이터를 인지해 가상 기기에서 앱을 실행시킵니다.

만약 안드로이드로 빌드하는데 오류가 발생한다면 오류 해결 목록글에서 확인해보세요.

Expo 안드로이드 애뮬레이터 환경설정 공식문서 확인

 

# iOS 애뮬레이터 

애플 전용 개발자 도구 Xcode 프로그램이 필요합니다.

해당 프로그램은 맥에서 다운로드 할 수 있지만 애플 외 OS에서는 다운로드할 수 없지만 가상 머신으로 우회하여 설치할 수 있습니다. 가상 머신은 인텔 CPU에서 원활하게 동작하지만 AMD CPU에서는 동작하지 않을 수 있습니다.

맥북 사용을 권장드립니다.

가상 머신 설치 방법 및 오류 해결 방법

1. 가상 머신 설치 방법 영상
2. 가상 머신 실행 오류 'VERR_INVALID_HANDLE'
3. 가상 머신 터미널 진행 오류 'LOG:EXITBS:START'

 

2. 오류 해결 목록

다음 글에서 이어집니다.