Boilerplate-webview 사용 방법

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

환경 설정

Bundle ID 설정

1. 프로젝트의 bundle ID를 원하는 값으로 변경합니다.
2. 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

1. Firebase 연동

   • 원하는 Firebase 계정에 새로운 App을 등록하고 GoogleService-Info.plist 및 google-services.json 파일을 교체합니다.
   • 이때, bundle ID는 동일해야 합니다. Android와 iOS의 bundle ID 규칙이 다르므로 com.companyName.AppName 형식을 사용하는 것을 추천드립니다.

2. Provisioning Profile 생성

   • Profiles에서 identifier와 연동되는 Provisioning Profile을 생성합니다.
   • 생성한 Profile을 다운로드하여 Xcode > Signing & Capabilities > Provisioning Profile을 교체합니다.

3. APN 인증 키 등록

   • Apple Developer 페이지에서 새로운 Key를 생성하고 해당 파일을 Firebase 설정 > Cloud Messaging > iOS APN 인증 키에 등록합니다.

4. 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.