리액트네이티브로 앱개발하다 보면 웹뷰를 사용하게 됩니다.
웹뷰는 모바일폰 내에서 브라우저랑 거의 동일한 역할을 합니다.
하지만 웹뷰는 더 세부적인 기능이나 설정이 필요합니다.
When developing apps with React Native, you will use webviews.
Webview plays almost the same role on a mobile phone as a browser on a PC.
However, webviews require more detailed functions or settings.
이번 시간에 여기서 다룰 건 웹뷰 보안 설정 문제입니다.
expo로 개발하다가 테스트 할때 정상적으로 잘 되지만 apk파일을 만들면 웹뷰 화면에서 에러가 발생할 수 있습니다.
이때는 고민하지마시고 리액트네이티브 cli로 프로젝트 바꾸는 것을 추천드립니다.
아래에 설정은 리액트네이티브 cli에서 설정 가능합니다.
What we will cover this time is the issue of webview security settings.
When developing and testing with expo, it works normally, but when creating an apk file, an error may occur on the webview screen.
At this time, I recommend that you change the project to React Native cli.
설정하는건 간단합니다. 여러분의 프로젝트 경로에있는 AndroidManifest.xml파일을 vscode로 오픈합니다.
It’s simple to set up. Open the AndroidManifest.xml file in your project path with vscode.
project/android/app/src/main/AndroidManifest.xml
파일이 오픈되면 <application 다음 부분에 android:usesCleartextTraffic=”true” 를 추가합니다.
When the file is opened, add android:usesCleartextTraffic=”true” to the part after <application.
저장하고 터미널에서 npm run android로 안드로이드 앱을 시작합니다.
Save and start the Android app with “npm run android” in terminal.