홈페이지 웹뷰 앱 만들기

여러 홈페이지와 쇼핑몰등을 운영하다 보니

내가 만든 홈페이지를 웹뷰 형태로 만들어 배포하고자 하는 욕심이 생긴다.

전문적으로 앱을 개발하는 것은 아니지만 웹뷰 앱 정도는 스스로 만들 수 있을거 같다.

 

그래서 각종 자료들을 취합해서 간단한 웹뷰 만들기 및 플레이스토어에 등록을 시도해본다.

 

개발을 위해서 각종 스튜디오를 사용하다보니 추가로 설치해야 하는 프로그램들의

번거로움이 너무 많다. 더군다나 전문 개발자도 아닌데 무언가를 꼭 하나 해놓으면

그 사이 다른 것들을 까먹게 된다. 그러다 보니 좀 더 편한 환경을 찾게 되었다.

 

그래서 React Native 와 Expo 개발환경을 통해서 시도를 하게 되었다. 이를 위해서

구름 IDE를 사용한다.

(참고로 Expo 는 React Native 개발을 편리하게 테스트하고 도와준다)

 

첫번째, https://ide.goorm.io/에 접속하여 우측 상단에 IDE 시작하기를 클릭하면 회원가입 또는

로그인 창이 나온다. 기존 구글등을 통하여 가입을 하거나, 이미 가입이 되었다면 로그인을 한다.

 

두번째, 로그인을 하면 우측 상단에 새 컨테이너 생성을 클릭한다. 

 

 

세번째, 컨테이너 생성 화면이 나오면 컨테이너 이름만 설정하고, 소프트웨어 스택에서는 

React - Native 를 체크한다.

 

네번째, 다른것들은 궂이 건들 필요없고, 우측 상단에 생성을 클릭한다.

       그럼 아래와 같은 낯이 익은 화면이 나타난다.

 

 

다섯번째, 터미널 창에 expo install react-native-webview 를 입력하고 엔터를 치면 설치 시작

 

여섯번째, 왼쪽 App.js 를 더블 클릭하여 나온 창에 있는 내용을 없애고 아래와 같이 입력하고 저장한다.

import * as React from 'react';

import { WebView } from 'react-native-webview';

export default class App extends React.Component {

   render() {

      return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;

   }

}

 

일곱번째, 위 uri 부분에 미리 만들어 둔 웹 주소를 넣는다.

 

여덜번째, 아래 화면 오른쪽 상단의 플레이 버튼을 클릭하면 실행이 되면서 QR코드가 생성이 된다.

 

아홉번째, 구글 플레이 스토어 - Expo 검색 설치 - scan qr 코드를 클릭하여 모니텨 상의 qr 코드를 촬영하면, 

스마트폰에서 직접 앱을 테스트해볼 수 있다.

 

 

apk 파일 만들기는 다음시간에 해보자....