Pre-requisites

Webview

React Native 앱 내에서 웹 콘텐츠를 렌더링하는 컴포넌트입니다. 네이티브 앱 환경과 웹 콘텐츠 사이의 다리 역할을 하여, 앱과 웹 콘텐츠 간 양방향 통신이 가능해집니다.

PostMessage

React Native 앱(네이티브 측)과 WebView에 로드된 웹 콘텐츠 사이의 양방향 메시징을 가능하게 하는 통신 메커니즘입니다. 두 환경 사이에서 직렬화된 데이터를 안전하게 전달할 수 있는 채널을 제공합니다.

RequestMessage

한 환경에서 다른 환경으로 보내는 구조화된 메시지로, 일반적으로 앱에서 웹 콘텐츠로 또는 그 반대로 어떤 작업이나 데이터를 요청합니다. 보통 식별자, 타입/액션, 그리고 요청을 수행하는 데 필요한 페이로드 데이터를 포함합니다

ResponseMessage

RequestMessage에 대한 응답으로, 요청된 작업의 결과를 담고 있습니다. 일반적으로 원래 요청 ID에 대한 참조, 상태 정보(성공/실패), 그리고 요청 처리 결과로 얻어진 데이터를 포함합니다.

RequestMessageHandler

들어오는 RequestMessage를 처리하고, 메시지 타입에 따라 적절한 작업을 실행하며, ResponseMessage를 생성하는 역할을 하는 컴포넌트입니다. 메시지를 적절한 핸들러로 라우팅하고 통신 흐름을 관리하는 컨트롤러 역할을 합니다.

Directory Architecture

root/
└── apps/
    └── app/
    └── web/    
└── packages/
    └── common/
        └── message/
            ├── appMessage/
            │   ├── index.ts
            │   ├── README.md
            │   ├── request*.ts
            ├── appMessageHandlers/
            │   ├── *Handler.ts
            │   ├── index.ts
            │   └── README.md
            ├── webMessage/
            │   ├── index.ts
            │   ├── README.md
            │   └── request*.ts
            ├── webMessageHandlers/
            │   ├── index.ts
            │   ├── *Handler.ts
            │   └── README.md
            ├── index.ts
            ├── Message.types.ts
            ├── messageAtom.ts
            ├── MessageBridge.ts

Detailed Analysis

Message

Web, App 간의 통신 메시지의 형태를 의미합니다. RequestMessage, ResponseMessage 로 분류됩니다.

크게 4가지의 메시지 형태가 존재합니다.