[ReactJS] 웹앱 배포하기: github.io 만들기 & expo로 안드로이드 App APK 파일 생성하기

ReactJS로 웹사이트도 만들고 앱도 만드는 방법을 소개하겠다

0. 들어가기 전에

터미널에서 뭔가를 물어보고 YES/NO 선택하는 창이 뜨면
무조건 yes 하면 된다 설명글에 가끔 빠질 수 있으니 당황 노노~

1. React 웹사이트 만들기

앱을 만들고 싶어도 웹사이트 먼저 build해야 한다
가장 쉬운 방법은 github.io를 활용하는 방법이다

1) 깃허브 생성 & 연동하기

https://blog.naver.com/nayoung4089/222714719661
git init ... 이런 건 기본이니까 생략
내 예전 링크 참고하세요 ~

2) package.json 맨 밑에 아래의 코드 추가하기

"homepage":"{본인 깃허브 주소 (https://username.github.io/repository_name)}"

3) terminal에 아래 코드 입력

npm install gh-pages

4) 설치가 완료되면 package.json의 "script" 부분을 아래와 같이 수정

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

package.json 최종 코드

// package.json 전체 코드
{
  "name": {본인 앱 이름},
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ... 
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  ...
  
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://nayoung4089.github.io/2023_MackDiary"
}

5) 실행

npm run deploy // 아까 homepage로 적었던 url 한 1-2분 뒤에 들어가면 제대로 보일겁니다

2. React & Expo로 앱 만들기

react native만 expo 사용할 수 있는 건 아니다
왜냐하면 우린 이미 웹사이트 url이 존재하기 때무니지 ~
대신 언어는 React Native다 !!

1) expo 환경 구축하기

바탕화면에 빈 파일을 만들고, VScode를 켜준다
그 다음 expo app을 생성해주기 위해 아래의 코드를 작성한다

* node.js는 이미 깔려있다는 전제 하에 진행하는 과정입니다

(React로 만들었다면 당연히 깔려있음)
version 확인법: (terminal에) node -v

npx create-expo-app my-app // my-app은 본인 맘대로 이름 적으시면 됩니다
cd my-app // 새로 만든 앱 위치로 이동 -> 이 상태에서 뭘 깔아야지 오류가 안납니다!

2) webveiw 형성하기

https://docs.expo.dev/versions/latest/sdk/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
      source={{ uri: '위에서 만든 우리의 URL' }}
    />
  );
}

3) EAS Expo 활용하기

https://docs.expo.dev/build/setup/
이거 그대로 따라하면 된다

npm install -g eas-cli
eas login 
// 치고 나면 username 치라고 뜨는데 본인 expo 계정 아이디 쓰면 됩니다 비밀번호도 마찬가지 !
eas build:configure

그러면 "Which platforms would you like to configure for EAS build?" 라는 질문이 나오는데

윈도우 유저는 안드로이드만 빌드할 수 있다 ( 맥북 써야 ios 가능 )

이래서 내가 아이폰이 싫어~~
그러니까 우리는 "android"를 눌러주자 ~

4) apk 파일 만들기

https://docs.expo.dev/build-reference/apk/
3번까지 제대로 했으면 새로운 eas.json 파일이 생성될 거다
그 eas.json 파일을 아래와 같이 변경시켜준다

{
  "cli": {
    "version": ">= 3.5.2"
  },
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}

다음으로 아래 코드를 작성해준다

eas build -p android --profile preview

기다리다 보면 id 만들어달라는 창이 뜨는데

com.{본인 또는 본인 회사 영어로}.{앱 이름}
ex) com.bbiyock.mackdiary

이 기본적으로 쓰는 방식이다
이 다음 yes 나오는 창은 당연히 y 누르고 있다가 기다리면 "emulate 할건가요?" 질문이 뜨면 성공!
위에 살펴보면 링크가 있을 거다 그거를 복사해서 핸드폰에서 열어주면 끝 ~~

길다 ~~
드디어 4일만?에 맥진 앱 완성이다 물론 플레이스토어엔 안 올렸지만 ...
그건 상당히 귀찮은 일이니까 나중에 ... 할래 ~ 어차피 데이터는 저장되니까 ..
그럼 안녕 ~~