웹사이트 링크 -> 앱으로 만들기 (웹앱만들기/EXPO웹뷰) 간단버전

 

안녕하세요~ 코드그림입니다!

오늘은 웹사이트 링크 하나로 앱을 만드는 방법을 공유합니다.

그럼 바로 실행해 볼게요!

 

※준비사항: C드라이브에 바로 새폴더를 하나 생성합니다.(프로젝트의 루트가 될 폴더입니다.)

 

 

1.Expo CLI설치

먼저 터미널에서 아래의 명령어를 입력해 주세요.

npm install -g expo-cli

 

 

 

2.Expo 프로젝트 생성

다음 명령어를 입력해 주세요. 

expo init my-project

(my-project는 내 프로젝트 영문으로 입력)

 

 

 

3.프로젝트 경로로 이동

cd my-project로 경로를 이동해주세요.

cd my-project

 

 

 

4.웹뷰설치

npx expo install react-native-webview

 

 

 

5.App.js파일 수정

프로젝트 경로에 웹뷰까지 설치했다면 아래의 코드를 App.js파일에 붙여넣기 해 줍니다.

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' }}
    />
  );
}

 source={{ uri: 'https://내사이트.com' }} -> 내 웹사이트 링크로 수정

 

 

 

6.expo실행으로 앱 미리보기

윈도우와 맥OS는 명령어가 다르니 주의해 주세요!

 

맥OS

npm run start

윈도우

npx expo start --tunnel

 

윈도우에서 npm run start로 실행했을 때 파란창과 함께 something went wrong 혹은 무한로딩 에러를 마주할 확률이 높습니다.

 

위와같은 방법으로 앱 미리보기를 통해 실시간 앱 코드수정 및 확인이 가능합니다.

 

 

 

 

7.expo계정에 로그인하세요

C:\expoWebApp>eas login (터미널 프로젝트 위치에서 eas login명령어 입력)
Log in to EAS with email or username (exit and run eas login for other options)
√ Email or username ...expo계정 이메일 입력
√ Password ... 비밀번호 입력
Logged in

 

 

 

 

 

8.앱 빌드 실행(터미널 명령어)

 

안드로이드 앱 빌드

eas build --platform android

 

ios앱 빌드

eas build --platform ios

 

 

윈도우,안드로이드 동시 빌드

eas build --platform all

 

 

 

 

 

명령어를 입력하고 한참을 기다리면 빌드큐에서 기다림이 시작됐다는 내용이 터미널에 나타납니다.

expo앱빌드 ⓒ코드그림

 

 

 

(저같은 경우는 단일페이지 웹 링크만 변경한 웹뷰 앱인데 30분이 넘게걸리길래 무료버전이라 한참을 기다리나 싶기도 했어요.....유료버전 쓰시는 분들은 어떠신지 궁금합니다 ㅎㅎ;)

 

 

 

expo무료버전을 사용하시면 한 달에 30번까지 빌드를 할 수 있습니다.

똑같은 앱이어도 빌드를 한번 시작했으면 빌드를 다 하지 않고 중단했더라도 다 카운팅이 되는 점 유의하세요.

 

 

 

 

 

 

9.앱파일 다운

빌드가 완료되고 나면 아래와 같이 파일을 다운로드 받을 수 있는 경로를 안내받습니다.

저는 안드로이드 앱을 빌드했기때문에 aab파일을 받았어요.

expo앱빌드 ⓒ코드그림

 

 

 

끝~~

 

 

 

 

이렇게 웹을 앱으로 바꾸는 방법을 알아보았습니다!

구글플레이, 애플앱스토어 개발자 멤버십 가입하시고 스토어에 배포까지 완료해 보세요 ㅎㅎ

저도 해보고 또 공유 글 남기도록 하겠습니다.

 

그럼 오늘도 간단하고 쉽게 개발하시고 즐코딩 하세요~!

코드그림이었습니다!