React Native로 크로스 플랫폼 웹뷰앱 만들기

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

쥰내 쉽네 ㅋㅋㅋ

웹뷰란 무엇인가?

웹뷰(WebView)란?

웹뷰(WebView)란 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 것을 말한다.

즉, 앱 안에 HTML iframe을 넣어놓은 것이다.

즉, WebView는 앱 내에 웹 브라우저를 넣는 것이다.

웹 페이지를 보기 위해서 혹은 앱 안에서 HTML을 호출하여 앱을 구현하는 하이브리드 형태의 애을 개발하는데에도 많이 사용된다.

하이브리드 앱

👍 장점

• 하이브리드 앱은 안드로이드 네이티브 앱 개발에 비해서 개발이 비교적 쉽다.
• 특히 기기간의 호환성을 해결하기가 상대적으로 편하다.
• 타 웹 사이트 링크로 가는 기능등을 지원하기 위해서 많이 사용된다.

👎 단점

• HTML 기반인 만큼 상대적으로 반응성이 약하고, 애니메이션등의 다양한 UI 효과를 넣기 어렵다.
• OS에 맞게 일부 기능들을 제외하고 작게 만든 웹 브라우저로 HTML5 호환성 등 기능의 제약을 많이 가지고 있다.

참조 : https://hanamon.kr/%EC%9B%B9%EB%B7%B0-webview/

 

 

일단 시작할려면 아래 3가지를 설치해야한다 ! 

1. node.js

2. visual  studio code

3. git 

그리고 뚜둥

반응형

https://expo.dev/

Expo

엑스포에 들어가서 회원 가입 해줘야한다. 

아잇 귀찮아 ! 

웹을 -> 앱으로 만들 계획인데 

내 종주중독 홈페이지를 변환 해볼 예정이다.

https://hikehigh-deploy-next.vercel.app/

종주중독 | 사진첩

import React from 'react';
import { Text, View } from 'react-native';
import { styles } from './styles';

function App() {
  return (
    <View style={styles.container}>
      <Text>
       Centum Joonho 🎉
      </Text>
    </View>
  );
}

export default App;

바로 반영된다.

QR 코드도 나오는데 

휴대폰에서 Expo 어플을 다운 받고 

카메라를 통해서 해당 QR 코드를 리딩시키면 내가 작성한 코드가 휴대폰 앱에서도 동일하게 확인 가능하다 

검색해보자 

https://docs.expo.dev/build/setup/

Creating your first build

 

일단 윈도우를 쓰시면 최대한 C드라이브에 가깝게 들어가서 

빈 폴더를 영어로 만들어 줍니다. 

vscode로 열어줍니다. 

터미널을 열어줍니다. 

위 명령어를 넣어줍니다. 

npm install -g eas-cli

eas login

reactexpoapp/my-app$ npm install -g eas-cli
npm WARN deprecated @oclif/screen@3.0.4: Deprecated in favor of @oclif/core

added 362 packages, and audited 363 packages in 22s

35 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
reactexpoapp/my-app$ eas login
Log in to EAS
✔ Email or username … ghwnsgkgk
✔ Password … ************
Logged in

eas build:configure

reactexpoapp/my-app$ eas build:configure
EAS project not configured.
✔ Would you like to automatically create an EAS project for @ghwnsgkgk/my-app? … yes
✔ Created @ghwnsgkgk/my-app on Expo
✔ Linked local project to EAS project 0ba095a1-d836-4b95-95eb-8784e768abf5
💡 The following process will configure your iOS and/or Android project to be compatible with EAS Build. These changes only apply to your local project files and you can safely revert them at any time.

✔ Which platforms would you like to configure for EAS Build? › Android

✔ Generated eas.json

🎉 Your project is ready to build.

- Run eas build when you are ready to create your first build.
- Once the build is completed, run eas submit to upload the app to app stores.
- Learn more about other capabilities of EAS Build

아따 iOS 앱 은 맥북에서만 개발되기때문에 일단은 안드로이드로만 개발

 

Run a build

Build for Android Emulator/device or iOS Simulator

The easiest way to try out EAS Build is to create a build that you can run on your Android device/emulator or iOS Simulator. It's quicker than uploading it to a store, and you don't need store developer membership accounts. If you'd like to try this, read about creating an installable APK for Android and creating a simulator build for iOS.

https://docs.expo.dev/build-reference/apk/

Building APKs for Android Emulators and devices

Now you can run your build with eas build -p android --profile preview. Remember that you can name the profile whatever you like. We named the profile "preview", however, you can call it "local", "simulator", or whatever makes the most sense for you.

apk 파일이 생성 될꺼다 

https://docs.expo.dev/versions/latest/sdk/webview/

WebView

 

npx expo install react-native-webview

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://hikehigh-deploy-next.vercel.app' }}
    />
  );
}

내 홈페이지 url 을 넣어주면 된다. 

꾸밀꺼 꾸며주고 다시 

eas build -p android --profile preview

빌드 해서 apk 파일을 안드로이드 폰으로 옮기거나 내려 받으면 된다. 

정작 나는 맥북은 없는데 아이폰 써서 ㅋㅋㅋ 내일 맥북으로 다시 해봐야지