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

목록1. Next.js, 웹뷰 도입 과정(1) - Expo 설치2. Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. [현재 글] Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 본 글은 웹뷰를 도입하면서 경험한 오류 해결 과정입니다.리액트 네이티브의 확장 표준 라이브러리 Expo(v52), 안드로이드 스튜디오(v21)를 사용합니다. " React Native WebView does not support this platform. "웹뷰를 웹에서 확인할 때 출력되는 문구입니다. 웹은 웹뷰를 지원하지 않습니다. 이는 정상 출력으로 웹뷰 문제가 아닙니다. 다만, 스마트폰이나 애뮬레이터에서 확인할 때 웹뷰가 아닌 흰 배경이 출력된다면 리액트 네이티브 코드*를 다시 확인해야 합니다.* 웹뷰..

목록1. Next.js, 웹뷰 도입 과정(1) - Expo 설치2. [현재 글] Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 본 글은 웹뷰를 도입하면서 경험한 주관적인 과정입니다.리액트 네이티브의 확장 표준 라이브러리 Expo(v52), 안드로이드 스튜디오(v21)를 사용합니다. 1. 디버그 환경 구축# 스마트폰스마트폰은 다른 설정하지 않고 Expo 프로젝트를 바로 확인할 수 있어 편하지만 충전이 필요합니다.스마트폰에서 사용하는 방법은 웹뷰 URI에 IP주소를 할당한 다음 Expo 프로젝트를 CLI를 통해 구동합니다. 그 후 터미널로 QR 코드와 명령어가 출력됩니다. 스마트폰에서 Expo Go 앱을 다운로드 하고 QR코드를 인식하..

목록1. [현재 글] Next.js, 웹뷰 도입 과정(1) - Expo 설치2. Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축3. Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록 본 글은 웹뷰를 도입하면서 경험한 주관적인 과정입니다. 리액트 네이티브의 확장 표준 라이브러리 Expo(v52)를 사용합니다. 1. Expo(리액트 네이티브) 프로젝트 생성# expo 설치npx create-expo-app@latest# expo 프로젝트 초기화npm run reset-project기본적으로 생성되는 프로젝트 디렉터리 구조를 그대로 사용하려면 초기화하지 않아도 됩니다. Expo 프로젝트 생성 공식문서 확인 2. 웹뷰 프로젝트 서버 설정개발하고 있는 프로젝트 서버를 설정해야 합니다. 이는 웹뷰..