Midas_boilerplate_webview NPM

Boilerplate-webview 사용 방법

이 문서는 Boilerplate-webview 프로젝트의 환경 설정 및 빌드 방법에 대한 가이드를 제공합니다.

환경 설정

Bundle ID 설정

프로젝트의 bundle ID를 원하는 값으로 변경합니다.
Apple 계정을 등록하고 identifier를 설정합니다.

Apple Developer 웹사이트

Apple Developer 계정을 통해 identifier를 설정하고 인증서를 관리합니다.
링크: Apple Developer Certificates

Webview Change

App.tsx에서 localhost:3000으로 등록되어 있는 원하는 주소로 변경하면 됩니다. = yarn android:local-link을 통해서 localhost:3000을 링크 연결 시키고 재실행 하면 localhost가 연결이 됩니다!

iOS 설정

Pod 설치

M1 Mac 및 특정 React Native 버전과 react-native-image-picker 버전의 호환성 문제로 인해 yarn pod-install 명령어를 사용하여 iOS pod를 설치합니다. (별다른 문제가 없다면 iOS 디렉토리에서 pod install 명령어를 사용해도 됩니다.)
Pod install시 RNSVG.podspec file: undefined method `visionos' 문제가 있다면 cocoapods 버전 update 필요합니다. pod --version 1.14.3 버전 이상 필요합니다. 혹은 react-native-clipboard v1.13.2 버전으로 다운그레이드 하면 됩니다.

[sudo] gem install cocoapods

https://github.com/getsentry/sentry-react-native/issues/3547#issuecomment-1911977140

iOS 빌드

yarn start > i 명령어를 사용하여 ios 시뮬레이터를 빌드할 수 있습니다.
Xcode에서 직접 빌드할 경우 최신 변경 사항이 반영되지 않을수도 있으므로 build:ios 명령어를 사용하여 main.jsbundle 파일을 최신화합니다.

iOS FCM 설정

링크: React Native Firebase

Firebase 연동
- 원하는 Firebase 계정에 새로운 App을 등록하고 GoogleService-Info.plist 및 google-services.json 파일을 교체합니다.
- 이때, bundle ID는 동일해야 합니다. Android와 iOS의 bundle ID 규칙이 다르므로 com.companyName.AppName 형식을 사용하는 것을 추천드립니다.
Provisioning Profile 생성
- Profiles에서 identifier와 연동되는 Provisioning Profile을 생성합니다.
- 생성한 Profile을 다운로드하여 Xcode > Signing & Capabilities > Provisioning Profile을 교체합니다.
APN 인증 키 등록
- Apple Developer 페이지에서 새로운 Key를 생성하고 해당 파일을 Firebase 설정 > Cloud Messaging > iOS APN 인증 키에 등록합니다.
FCM Push Message 테스트
- FCM Push Message는 iOS 시뮬레이터에서 지원되지 않으므로 실제 디바이스에 빌드하여 테스트합니다.

Android 설정

Android 빌드

yarn start > a 명령어를 사용하여 Android 시뮬레이터를 빌드할 수 있습니다.
Android Studio에서 Virtual Device를 미리 실행시킨 후 빌드해야 App이 실행됩니다.

참고 사항

사용하지 않는 React Native 라이브러리는 제거할 수 있습니다. 라이브러리를 제거한 후 AndroidManifest 및 Info.plist 파일에서 관련 권한도 제거해야 합니다.
iOS 최소 버전은 13.4로 설정되어 있습니다. 사용하는 라이브러리 버전에 따라 변경이 가능하지만, 빌드 실패 가능성이 있으므로 주의가 필요합니다.

RN과 Webview 통신 방법

Webview와의 통신

handler.ts에 정의된 handleMessage 함수에서 Webview에서 보내는 postMessage를 받아서 처리합니다.
정의된 action을 통해서 App 관련 로직을 처리합니다.

Webview에서 보내는 메시지 형식

const handleClick = () => {
  if (window.ReactNativeWebView && typeof window.ReactNativeWebView.postMessage === 'function') {
    const message = {
      action: 'SHARE_CLIPBOARD', // action 정의
      key: 'SHARE_CLIPBOARD', // key 정의
    };
    window.ReactNativeWebView.postMessage(JSON.stringify(message));
  }
};

type문제가 있으면 global.ts로 정의

// global.d.ts
interface
Window
{
  ReactNativeWebView: {
    postMessage: (message: string) => void,
  }
  ;
}

Webview에서 받는 메시지 형식

useEffect(() => {
   document.addEventListener("message", handleMessage as EventListener);
   window.addEventListener("message", handleMessage as EventListener);

   return () => {
      document.removeEventListener("message", handleMessage as EventListener);
      window.removeEventListener("message", handleMessage as EventListener);
   };
}, []);

const handleMessage = (event: MessageEvent) => {
  const message: Message = JSON.parse(event.data);

  switch (message.action) {
    case 'SHARE_CLIPBOARD':
        // 관련 로직 처리
      break;
    default:
      break;
  }
};

Project Version

아래 해당 환경 정보를 기반으로 만들어진 프로젝트입니다. 참고해주세요.

System:

OS: macOS 14.0
CPU: (10) arm64 Apple M1 Max
Shell: 5.9 - /bin/zsh
Xcode: 15.0.1

Binaries:

Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
Yarn: 3.6.4 - /usr/local/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm

Languages:

Bash: 3.2.57 - /bin/bash
Java: 21.0.3 - /usr/bin/javac
Perl: 5.30.3 - /usr/bin/perl
Python3: 3.9.6 - /usr/bin/python3
Ruby: 2.6.10 - /usr/bin/ruby
CocoaPods: 1.15.2
cocoapods-clean (0.0.1)
cocoapods-deintegrate (1.0.5)

환경 정보 수집

환경 정보를 수집하려면 다음 명령어를 실행하세요:

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages --languages

License

This project is an internal project of Midas IT. Unauthorized copying, distribution, or use is prohibited.