React Native와 웹이 공존하는 또 하나의 방법 (2)

• React Native와 웹이 공존하는 또 하나의 방법 (1)
• React Native와 웹이 공존하는 또 하나의 방법 (2)

앞선 글에서는 웹과 리액트 네이티브의 통신 문제와 해결 방법을 소개했으며, 이번 글에서는 실제 사례를 통해 Type-Safe와 웹, 앱 동기화 과정을 설명할 것입니다.

실제 사례 해결

사례에서 발생한 문제를 해결하는 방법으로 브릿지를 활용하여 네이티브 화면 호출 시 오류 발생 시 레거시 페이지로 대체 가능하도록 구성하였습니다.

문제 해결 방안을 요약하자면, 복잡한 로직은 메소드 별 관리로 분리하고, 반복적인 통신 함수를 자동으로 생성했습니다. 단방향 통신은 프로미스 구조로 개선하였고, 하위 호환성 문제는 유틸을 통해 일정 부분 해결하였습니다.

타입 세이프

타입 세이프는 타입 불일치 문제를 방지하기 위해 중요합니다. 프론트엔드와 백엔드가 독립이라면 타입에 대한 정의가 필요하며, 잘못된 정의는 타입 불일치로 이어질 수 있습니다.

타입 불일치의 문제

API 호출 시 타입을 정의하지 않으면, 런타임 에러가 발생할 수 있습니다. 이를 해결하기 위해 옵셔널 체이닝을 사용하는 방법이 있습니다.

타입 불일치를 해결하기 위한 노력

타입 스크립트를 활용하여 버그를 미리 발견하고, 오픈API와 GraphQL 등의 도구를 통해 타입을 자동 생성하려고 노력하고 있습니다.

타입 추론 활용

타입 추론을 통해 명시적으로 타입을 정의하지 않고도 코드의 타입 안정성을 높일 수 있습니다. typeof와 keyof 등을 활용하여 타입을 추론하고 이를 통해 개발 경험을 개선할 수 있습니다.

generic의 활용

Generic을 통해 입력에 따라 타입이 완성되며, 이를 통해 효율적인 타입 관리를 할 수 있습니다. 이렇게 타입 추론을 통해 모든 타입의 안전성을 보장할 수 있습니다.

리액트 네이티브와 웹의 동기화

인증 정보 관리

리액트 네이티브와 웹 간의 인증 정보를 유지하기 위해 Shared State를 도입하여 상태를 동기화하였습니다.

Shared State 구현

웹 코어 로직을 분리하여 상태 관리 라이브러리를 개발하였으며, Zustand의 개념을 차용하여 리액트 네이티브와 동기화할 수 있게 하였습니다.

마무리 및 교훈

타입 세이프한 웹뷰 통신 라이브러리를 개발하면서, 사용자 경험을 최우선으로 고려하여 성공적인 개발 결과물을 얻었습니다. 웹 코어 로직을 기반으로 통합성을 고려한 구조로 만들며, 다양한 개발 경험을 쌓을 수 있었습니다.

현재 이 라이브러리는 webview-bridge로 공개되어 있으며, 더 많은 기능을 확인하고 싶은 분들은 관련 문서를 확인하시면 좋겠습니다.

• React Native와 웹이 공존하는 또 하나의 방법 (1)
• React Native와 웹이 공존하는 또 하나의 방법 (2)