리액트 웹앱만들기

5o_hyun·2024년 10월 14일

Expo reactnative

스마트폰 앱 종류

1. 네이티브앱

os에 특화된 개발
많은 기능을 사용할수있지만, 지식이많이 필요해 개발속도느림
안드로이드 ios

2. 크로스플랫폼

하나의 언어로 여러 플랫폼 개발
빠른개발가능하지만, 네이티브대비 낮은 성능 및 기능제한
react native

3. 하이브리드앱

하나의 언어로 여러 플랫폼 개발
html,css,js로 이루어진 웹페이지(웹앱이라써도 결국 웹페이지)

=> 나는 React Native로 웹뷰앱을 만들건데, React Native를 한번 더 감싸서 쉽게나온 expo로 만들거다.

환경세팅

1. nodejs, visual studio code, git설치

자바스크립트가 실행될수있는 환경을 만들어주는게 nodejs다.

2. Expo가입, Expo앱 설치

expo가입은 https://expo.dev/ 에 들어가서 signup을 눌러 회원가입
expo앱은 구글앱스토어 들어가서 다운로드 제일 많은거 설치 (나는expo go로)

개발 전 기본앱 만들어보기

1. 공식문서 찾기

https://docs.expo.dev/build/setup/ 이걸보면서 하면된다.

만약 위 주소가 안된다면 구글에 치면 왠만하면 나온다.
expo react native build 라고 구글에 치면 doce.expo.dev~~가 나온다

2. 개발환경 만들기

일단 오류가 굉장히 많이 나온다고한다.
c드라이브에 하면 왠만하면 오류가 안나온다고하니 c드라이브에 영어로 폴더를 만들어준다.

vscode로 폴더를열고 터미널에 +버튼을 눌러 cmd로 연다.

3.개발

npx create-expo-app my-app 앱설치

npm install -g eas-cli EAS CLI설치
eas login expo로그인
eas build:configure 프로젝트구성

여기서 위에 오류가 나온다면 cd my-app으로 폴더를 들어가준다음에 하면 해결된다.
어떤앱에 빌드할거냐 뜨는데, ios에서는 all이 되지만, window라면 android밖에안된다.
나는 윈도우라 안드로이드만했는데,,, 빌드를 나중에 맥에서 하면 all로 할수있다고 하니 상심하지말고 일단 해보자.
이렇게하면 eas.json이 생긴걸 확인할수있다.

apk파일은 안드로이드용 설치파일인데, 이걸만들면 앱스토어에 올리기전에 내 스마트폰에서 돌아가는지 확인할수있다.
원래는 AAB/.aab 파일을 만들어야한다.
https://docs.expo.dev/build-reference/apk/
이 링크를 보면 apk파일을 만드려면 eas.json을 다음과같이 설정해주면된다고한다.
한번해보자.

//eas.json build부분을 다음거로 바꿔준다

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

eas build -p android --profile preview 이제 이 명령어로 빌드를해준다,

com.회사이름.앱이름 고유해야하며, 꼭 영어로 작성해야한다.
빌드가 좀 오래걸린후, 빌드가 완료되면 Andeoid app : 으로 주소가 하나 뜨는데,
안드로이드 폰에서 접속하면 앱을 다운받을수있다

웹뷰앱만들기

이제 기본앱으로 배포를해서 다운이 잘 받아졌다면 내 웹사이트를 연결할차례다.
expo webview를 구글에 검색한다. https://docs.expo.dev/versions/latest/sdk/webview/

공식문서 그대로하면 웹뷰를만들수있다.

현재 공식문서에서는 이렇게되어있다. (2024.10.15기준)
npx expo install react-native-webview 설치

이후 usage를 보면 어떻게 사용해야할지 나온다.

//index.tsx

import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import { StyleSheet } from "react-native";

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

eas build -p android --profile preview 로 빌드.