목록1. 외부 링크 연결, 쿠키 연동: 웹뷰 기능 구현(1) 2. [현재 글] 더블 클릭 종료, 뒤로 가기: 웹뷰 기능 구현(2) 이전 글에서 외부 링크 연결, 쿠키 연동 구현에 관해서 알아봤는데요.이번 글에서는 이전 버튼 구현을 어떻게 구현했는지 살펴보겠습니다. 1. 이전 버튼 여기서 이전 버튼은 기기의 뒤로 가기 버튼을 의미해요. 네이티브 웹뷰를 첫 구동하면 이전 버튼을 눌렀을 때 앱이 바로 종료되는 상황이 발생해요. 이 같은 사용자 경험을 개선하기 위해 더블클릭 종료를 도입했어요.안드로이드 앱을 개발하고 있어서 BackHandler API를 사용했어요. 이 모듈은 안드로이드 전용으로 DOM 이벤트 리스너와 동일하게 이벤트를 설정할 수 있어요. DOM 이벤트 리스너와 다른 점은 반환 값이 불린이에요...

목록1. [현재 글] 외부 링크 연결, 쿠키 연동: 웹뷰 기능 구현(1)2. 더블 클릭 종료, 뒤로 가기: 웹뷰 기능 구현(2) 리액트 네이티브 웹뷰에서 외부 링크 연결, 쿠키 연동, 이전 버튼 3가지 기능을 구현했는데요.어떻게 구현했는지 과정을 적어봤어요.웹뷰를 처음 도입하는 분들에게 도움이 되면 좋은 마음으로 시작해 보겠습니다. 1. 외부 링크 연결첫 번째 기능 구현은 외부 링크 연결이었어요.외부 링크 연결은 웹뷰의 onNavigationStateChange 속성을 활용했어요. 해당 속성은 웹뷰에서 페이지를 이동하면 변경된 URI를 반환해요. 만약 변경된 URI가 외부 앱으로 실행하고 싶은 주소라면 Linking.openURL()* 메서드를 적용할 수 있어요. 그리고 링크를 누르면 웹뷰도 해당 URI..

이전 글1. Next.js, 웹뷰 도입 과정(1) - Expo 설치2. Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 1. 웹에서 애플리케이션으로 Next.js 프로젝트로 개발한 QR-ORDER 고객 전용 서비스를 Vercel로 배포했다. 배포한 링크로 접속하면 생각한 대로 기능이 동작했다. 하지만 상단에 주소창이 뜨는 점이 눈에 걸렸다. Next.js 미들웨어로 링크 우회 접속을 막고 있어도 우회 접속을 시도할 수 있는 방법을 보여주고 있는 게 마음에 들지 않았다. 이러한 시도를 할 수 있는 기회를 제공하고 싶지 않았다. 그리고 프로젝트 특성상 모바일과 태블릿 접속만 허용하고 있어서 더더욱 모바일화 하고 싶었다. 그리하여 알게 된..