웹뷰로 하이브리드 앱 개발하기

Question

안녕하세요. 현재 Flutter로 앱을 개발완료한 상태입니다.

이벤트를 할 때마다 ui를 조금씩 바꾸고 앱을 수시로 업데이트해야 하는 상황이라서 웹뷰를 담은 하이브리드 앱으로 전환하려고 합니다. (토스도 비슷한 방식으로 알고 있습니다.)

Next.js 또는 React 웹뷰를
Flutter 또는 네이티브 앱에 연결하고 싶은데

둘 사이에서 소통할 때 로그인 정보나 위치 정보 등을 어떻게 주고 받는지, 보안은 어떻게 처리해야 하는지 등 정보를 찾아봐도 잘 나오지 않아 여기 질문 드립니다.

참고할만한 좋은 글이나 영상이 있을까요?

감사합니다.

손정현 · Answer

안녕하세요!

웹뷰와 네이티브간 통신은 주로 메세지를 통해서 합니다. 예를 들면, 회원가입, 로그인을 웹뷰에서 처리한뒤 로그인 정보를 메세지에 담아서 네이티브로 보내주는 방법이 있습니다.

window.postMessage라는 기능을 사용해서 구현하실 수 있어요. RN 기준으로 말씀드리면 기본 틀은 RN과 웹뷰 모두 메세지 이벤트 리스너를 만들고 해당 메세지 이벤트로 서로 보내줄 데이터를 보내주면됩니다.

참고하시면 좋을 것 같은 링크를 첨부할게요 :)
- https://evanjin.oopy.io/react-native/webview
- https://velog.io/@imzzuu/React-Native-%EC%9B%B9%EB%B7%B0-%ED%86%B5%EC%8B%A0%ED%95%98%EA%B8%B0
- https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
- https://42kchoi.tistory.com/370