ios , android 웹앱 데이터 통신시 postMessage 받는 방법차이

https://velog.io/@woongbaera/ReactNativeWebView-React-Native-WebView-postMessage-not-working 웹앱 postMessage 이벤트가 동작하지 않을 때(React Native WebView postMessage not working) Solution: iOS/Android Platform에 따라 webview내부 웹 서비스에서 eventListner를 다르게 적용해야한다. velog.io // in chromium webview (android) document.addEventListener('message', yourWebviewCommuicationFunction) // in safari webview (iOS) window.addE..

[오류] Execution failed for task ':app:checkDebugAarMetadata'

https://stackoverflow.com/questions/64521804/execution-failed-for-task-appcheckdebugaarmetadata Execution failed for task ':app:checkDebugAarMetadata' I am getting this error while running my app. Execution failed for task ':app:checkDebugAarMetadata'. > Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > Could ... stackoverflow.com

Xcode 시뮬레이터 안될때

벨로퍼트님 책을 보고 있는데 그대로 했는데도 안되어서 진짜 정신이 나갈 뻔했다. Xcode 내에서 아이폰 버전을 11로 낮추어줬더니 에뮬레이터가 실행되었다.

[Trouble Shooting]

src/navigation/RootNav.js 841 번째 라인 CloseDrawer와 웹뷰의 url 을 바꿔주는 코드가 충돌나면서 오류를 뱉어냈다. 어떻게 해결해야할 지 되게 고민했다. setTimeout 이라는 쉬운 해결방법을 놓고 말이다.

ios FCM 푸쉬 알림

https://www.youtube.com/watch?v=Tjg5X30XhMw 준비물 ios 실제기기 , Apple 개발자 계정 인증키 p8로 적용해준다. 팀ID는 Account 에서 볼 수 있고 입력해주고 메세지를 보내보자 잘 된다. 단, 설치된 앱이 있다면 삭제 해주고 실행하여야한다.

dp pt px

https://www.youtube.com/watch?v=tvD-Q3c-O-g https://www.youtube.com/watch?v=TqJm2TM9JnA https://www.youtube.com/watch?v=OHrCLgscxfI 기존 360 x 640 작업물을 720 x 1280 으로 작업하니 선명하게 나왔다. 보통 20dp 이미지를 넣을때 2배수 정도면 좋을 것 같다. 물론 3배수 4배수까지 있으면 더욱 좋지만 디자이너분과 잘 협의를 봐야한다.

앱 로고 변경

https://easyappicon.com/ EasyAppIcon - Create Mobile App Icon EasyAppIcon helps you to create your own app icons easily. Supporting Android Adaptive Icon! You can simply import the icons to Android Studio and Xcode. easyappicon.com 이미지는 1024 x 1024 크기로 준비하고 위 사이즈를 넣으면 자동으로 생성해준다. 안드로이드 android/app/src/main/res 생성된 mipmap을 바꾸어준다. 아이폰 그런데 위 사이트는 안드로이드 용이고 https://velog.io/@dody_/React-Native-%EC%9..

select 태그 사파리에서 적용시 기본 style 변경

아이폰에서 웹뷰로 웹페이지를 띄워주고 있는데 , 이 select 태그만 style이 적용이 안되었다.. 뭐가 문제일까 공부하다가 Vendor prefix에 대해 배우게 되었다. Vendor prefix란 Css의 Class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것이다. 아래 사진 처럼 각 브라우저 마다 css를 먹일 수 있게된다. webkit은 사파리, 크롬 브라우저에서 border-radius 가 100px ms 는 익스플로러 전용이다. 실제로 저렇게 나누어서 사용하지않고 표준 css 같은 경우에는 vendor prefix를 붙여주지 않고 하나로 통일 시켜주면 된다. 만약 그 브라우저에서 지원하지 않..

웹뷰 zoom 현상 수정

웹뷰로 웹페이지를 RN 환경에서 띄우고 있는데 input 태그에 focus가 주어질 때마다 화면이 zoom 되는 현상이 발생했다. 그래서 해결방법은.. 출처 : http://blog.freezner.com/archives/1880 [HTML] 모바일에서 입력 창에 포커스 가는 경우 확대되는 효과 없애기 모바일 기기에서 웹페이지를 이용할 때 input text라던가 password 같은 입력 필드를 터치하면 화면이 일정 배율로 확대되는 효과가 나타납니다. 이 확대되는 효과를 없애고 포커스만 가도록 하는 blog.freezner.com html 태그에 위 메타 태그를 넣어주면 되었다.

[오류] React Native SVG 사용하기

https://coding-w00se.tistory.com/10 [React Native] SVG 이미지 로드 하기 [ 라이브러리 ] github.com/react-native-svg/react-native-svg react-native-svg/react-native-svg SVG library for React Native, React Native Web, and plain React web projects. - react-native-svg/react-n.. coding-w00se.tistory.com 기존의 방식으로는 위 자료를 참고하니까 잘 되었는데, 이상하게 이미 만들어진 프로젝트에서 svg를 사용하려니 에러가 났다. 삽질을 엄청나게해서 그나마 되는 차선책을 찾았는데 uri로 접근하는 방법을 선..