개발, 코딩/웹사이트, 앱 개발

Expo와 React-native-webview를 사용한 웹뷰앱 만들기

우주관리자 2023. 5. 8.

React Native WebView

 

1차 웹서비스 완성

지난 번 포스팅에서 타로봇 1차 웹서비스 완성을 다뤘습니다.

2023.05.06 - [개발, 코딩/타로봇 개발] - ChatGPT를 이용한 인공지능 타로술사 타로봇 개발기 (Feat. 조코딩님 강의)

 

ChatGPT를 이용한 인공지능 타로술사 타로봇 개발기 (Feat. 조코딩님 강의)

대 ChatGPT 시대 ChatGPT 의 발표 이후 세상이 급변하고 있습니다. 처음엔 호기심으로 몇 번 사용해본 것이 전부였으나 회사 업무 시에 정말 옆에 모르는 것이 없는 척척박사 한명이 있는 것처럼 도

ourhertz.com

 

이후 자잘한 안내 멘트, CSS 등의 수정이 있었으나 큰 틀은 거의 같은 상태입니다.

 

어렵게 만든 웹페이지를 버리고 안드로이드 앱을 개발하기는 아까워서 알아보니 React Native의 웹뷰를 사용하면 웹페이지 URL만 교체하여 쉽게 앱을 만들 수 있다는 것을 알 수 있었습니다.

 

아직 완성은 못하였으나 계속 반복하여 테스트를 하기 위해 필요한 개발 환경 및 빌드 순서를 기억하기 어려워서 간단하게나마 정리를 해보려고 합니다 (Mac이 없는 관계로 Windows 환경으로만 정리하였습니다)

 

해당 과정은 아래 조코딩님 강의 영상을 참고하여 진행하였습니다.

https://www.youtube.com/watch?v=yjPl8Injlbw

 

Node.js 설치

https://nodejs.org/ko

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

LTS 버전을 받으면 된다.

 

저의 경우 이미 웹서비스의 백엔드 구축을 위해 설치하였으나 그렇지 않은 분들은 Node.js 설치가 필요합니다.

기본값으로 진행하여 설치해주시면 됩니다.

 

 

Visual Studio Code 설치

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

Stable Build로 설치하면 된다.

 

수많은 언어를 지원하고 편리한 확장 플러그인과 Git 지원 등으로 엄청나게 편리한 통합 개발 환경입니다.

이것 또한 기본값으로 설치 진행하면 됩니다.

 

 

Git 설치

https://git-scm.com/download/win

 

Git - Downloading Package

Download for Windows Click here to download the latest (2.40.1) 32-bit version of Git for Windows. This is the most recent maintained build. It was released 13 days ago, on 2023-04-25. Other Git for Windows downloads Standalone Installer 32-bit Git for Win

git-scm.com

본인 OS에 맞는 버전을 받아서 설치하면 된다. 요즘엔 대부분 64-bit 환경이므로 64-bit부터 시도해보면 된다.

 

이것 또한 기본값으로 설치 진행하시기 바랍니다.

 

 

Expo 가입 및 설치

https://expo.dev/

 

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

expo.dev

Sign Up 버튼을 눌러서 가입

 

일반 사이트처럼 가입하시면 됩니다.

요즘엔 크롬 브라우저 등에서 로그인 정보를 기억해주므로 ID/PW를 기억하지 않는 경우가 많은데 Expo 가입 정보를 커맨드라인을 통해 입력하여 로그인해야 할 일이 있으므로 꼭 기억해놓으시기 바랍니다.

 

 

환경 구성 및 expo-cli, eas-cli  설치, 설정

환경 구성

우선 웹뷰앱을 만들 폴더를 영문으로 원하는 위치에 생성 후 해당 폴더를 우클릭하여 CODE로 열기를 선택합니다.

VSCODE를 설치해야 나오는 메뉴

 

폴더를 신뢰하겠냐는 메세지를 확인 후 수락합니다.

 

상단 메뉴의 터미널(T) 선택 후 새 터미널을 눌러줍니다.

새 터미널을 열자.

 

VSCODE 하단에 분할 화면이 만들어지며 터미널이 열립니다.

기본값은 powershell로 열림

 

기본적으로 powershell로 열리는데 권한 문제 등이 있기 때문에 CMD 창으로 다시 열어줍니다.

+ 우측 아이콘을 눌러서 Command Prompt를 선택하자.

 

expo-cli 설치

npm install -g expo-cli

expo를 커맨드라인에서 사용할 수 있도록 설치합니다.

npm 명령이 실행되지 않으면 Node.js 설치를 다시 확인해야합니다.

-g 옵션은 해당 폴더/프로젝트 외에도 사용할 수 있도록 하는 전역 설치 옵션입니다.

자주 사용되므로 expo와 eas는 -g 옵션을 주어 전역으로 설치하길 권장드립니다.

 

설치 진행 중

 

자잘한 경고(WARN)는 보통 최신 버전을 사용하길 권고하는 내용이므로 일단 무시해도 된다.

 

eas-cli 설치

npm install -g eas-cli

같은 방법은 eas-cli를 설치합니다.

eas는 빌드를 위한 것이라고 생각하면 편할 것 같습니다.

 

설치 진행 중

 

설치 완료. 이번에도 경고는 일단 무시하자

 

eas 로그인

eas login

위 명령어를 입력한 뒤 expo.dev에 가입했던 ID와 PW를 입력하여 로그인합니다.

 

이메일 또는 username 입력

 

PW 입력

 

로그인 완료

 

로그인 완료 메세지를 확인합니다.

 

프로젝트 생성

npx create-expo-app my-app

이번엔 npx 명령어인 것에 주의합니다.

프로젝트를 생성하기 원하는 폴더가 맞는지 터미널에서 경로를 다시 한번 확인한 뒤 위의 명령을 입력합니다.

'my-app' 이라는 이름은 원하는 앱 이름으로 변경하시면 됩니다.

 

프로젝트 생성 중

 

완료! 위로 올려보면 많은 경고들이 있지만 일단 무시해도 된다.

 

VSCODE 좌측의 탐색기를 보면 자동으로 생성된 프로젝트 파일 및 폴더 구조를 확인할 수 있습니다.

자동으로 프로젝트에 필요한 구조가 생성되었다.

 

cd my-app

이후 모든 명령어는 생성한 프로젝트 폴더 내에서 이루어져야 하므로 위와 같이 cd 명령을 통해 해당 폴더로 이동합니다.

 

 

eas 빌드 구성

eas build:configure

프로젝트 폴더 내에 들어와있는 것을 확인한 상태에서 위 명령을 실행해줍니다.

중간에 콜론(:) 기호를 유의하셔서 입력하시면 됩니다.

 

프로젝트 이름을 자동으로 추천해준다

 

expo 아이디와 프로젝트 폴더명으로 자동으로 EAS 프로젝트 이름을 추천해주니 특별한 경우가 아니라면 그대로 사용하면 됩니다.

 

iOS는 Mac이 필요하다. Windows PC 환경일 경우 Android를 선택하자.

 

Windows PC 환경의 경우 iOS 빌드가 불가능하므로 화살표 키를 움직여서 Android를 선택한 뒤 엔터키를 입력합니다.

 

EAS 빌드 준비 완료

 

EAS 빌드 준비 완료 메세지를 확인합니다.

 

빌드를 위한 eas.json 파일 수정

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}

 

VSCODE 좌측의 탐색기에서 eas.json을 선택한 뒤 모든 내용을 위의 코드로 바꿔줍니다.

자동 완성되었던 eas.json의 기존 코드

 

복사-붙여넣기로 변경한 eas.json 코드

 

변경 후 Ctrl+S를 눌러서 저장해줍니다.

 

 

WebView 컴포넌트 설치

npx expo install react-native-webview

 

웹뷰를 사용한 앱을 만들기 위해 WebView 컴포넌트를 위 명령어를 통해 설치합니다.

 

설치 진행 중

 

설치 완료

 

 

기본 WebView 코드 입력

import * as React from 'react';
import { WebView } from 'react-native-webview';


export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

 

VSCODE 좌측의 탐색기에서 App.js 를 선택한 뒤 위 코드를 입력해줍니다.

다음과 같이 기본 코드가 만들어져있을텐데, style 관련 코드는 남겨두는 것이 좋습니다.

사용하지 않는 첫줄의 import 코드와 두번째 줄의 Text, View는 삭제합니다.

 

기존 App.js 코드

 

아래는 변경한 코드입니다.

import { StyleSheet } from 'react-native';

import * as React from 'react';
import { WebView } from 'react-native-webview';


export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

 

원하는 웹페이지 주소 적용

똑같이 따라한 뒤 이 부분만 변경하면 된다.

 

코드 중 위의 부분만 원하는 웹페이지의 주소로 변경해주면 됩니다.

저는 제가 만든 타로봇 웹페이지의 주소를 입력하였습니다.

https://tarobot.ourhertz.com 

 

인공지능 타로술사 - 타로봇

안녕하세요. 인공지능 타로술사 타로봇입니다. 타로점을 통해 알고 싶은 것을 질문해주세요. (타로점과 무관한 내용일 경우 답변이 어려울 수 있으므로 가능한 명확하게 질문해주세요) 서버 상

tarobot.ourhertz.com

 

변경 완료

 

변경 후 Ctrl + S 를 눌러서 저장해줍니다.

 

 

테스트용 apk 파일 생성을 위한 eas build

eas build -p android --profile preview

 

위와 같은 명령어를 입력하면 테스트용 apk 파일을 생성하기 위한 빌드 과정이 진행됩니다.

 

안드로이드 앱을 위한 ID를 Expo ID와 프로젝트명을 기반으로 추천해준다

 

실제 구글 스토어에 출시를 하기 위해서도 필요한 ID로, 일반적으로 'com.회사명.앱이름' 의 구조로 사용합니다.

Expo ID와 현재 프로젝트명을 기반으로 ID를 추천해주니 그대로 엔터를 입력하면 자동 적용됩니다.

 

안드로이드 키스토어 생성을 자동으로 하려면 그대로 엔터

 

서버에 EAS 빌드가 대기 중

 

빌드 진행 중

 

서버 대기열에 EAS 빌드가 들어간 뒤 잠시 후 빌드가 진행됩니다.

 

 

빌드 완료 및 테스트

빌드 완료 후 안드로이드 에뮬레이터 실행 여부를 묻고 있다

 

빌드가 완료된 이후 expo.dev에 임시로 만들어진 apk 다운로드 링크와 함께 안드로이드 에뮬레이터의 실행 여부를 묻습니다.

 

apk 파일 링크 전달 및 설치, 실행

해당 apk 링크를 카톡이나 구글 드라이브 등을 통해 실제 안드로이드용 스마트폰으로 전달한 뒤 브라우저를 통해 접속하면 빌드된 apk 파일을 다운로드 받을 수 있게 됩니다.

 

스마트폰에 설정된 정책에 따라 보안 경고가 뜨면서 설치 여부를 몇차례 확인하게 되는데 모두 무시하고 설치를 진행해주면 본인의 스마트폰 또는 태블릿 등의 안드로이드 기기에서 동작을 직접 확인해볼 수 있습니다.

 

안드로이드 에뮬레이터 설치 및 실행

아직 확실하진 않은데, 제가 사용하는 다른 환경에서는 안드로이드 스튜디오가 설치되어있음에도 이 단계에서 계속 오류가 발생하였습니다.

안드로이드 스튜디오가 아예 설치되어있지않더라도 자체적으로 실행이 가능한 것인지, 선택 가능한 에뮬레이터 종류가 항상 저렇게 표시되는 것인지 아니면 환경에 따라 다른 것인지는 조금 더 확인이 필요한 부분입니다.

 

어쨌든 내 환경에서는 두개의 에뮬레이터 중에서 선택이 가능하다

 

저는 첫번째 것으로 선택을 해보았습니다.

화면 정렬에 약간 문제가 있어보이나 어쨌든 다음과 같이 정상적으로 실행되었습니다.

 

에뮬레이터에서 정상 동작 확인

 

실제 앱 배포를 위해서 최소한 앱종료 기능이나 (현재는 뒤로 가기를 누르면 그냥 백그라운드에 남아있는 상태로 꺼짐) 뒤로 가기 등의 네비게이션 버튼을 추가해야할 것 같습니다.

 

 

마치며

웹페이지 주소 입력을 제외한 99%의 과정이 모두 그대로 따라하면 되는 부분이나 매번 기억나지 않는 부분을 유튜브 영상을 통해서 찾다보니 조금 힘들어져서 이렇게 정리를 해보았습니다.

유튜브 영상과 순서가 조금 다를 수 있는데 제 나름대로 최적화를 시킨 것이니 (실제로 다시 처음부터 해보면서 기록, 정리하였습니다) 자잘한 설명은 대충 넘기시고 순서대로 따라만 해보신다면 일단 기본적인 웹뷰 앱 빌드까지는 성공하실 것으로 생각됩니다.

 

1차적으로 여기에 간단한 네비게이션 정도만 추가하여 구글 스토어 배포를 해보려고 합니다.

성공하면 다시 포스팅하도록 하겠습니다.

 

반응형