. .

🔍 React Native + WebView 디버깅 방법 (postMessage + adb logcat)React Native에서 WebView 내부의 JavaScript 디버깅은 일반적인 console.log()로는 확인할 수 없습니다.이때 window.ReactNativeWebView.postMessage()를 이용해 React Native ↔ WebView 간 메시지 통신을 통해 로그를 전달하고,adb logcat을 활용해 디버깅하는 방법을 정리합니다.✅ 1. WebView 내부에서 로그 전송하기HTML 코드 안에 있는 JavaScript에서 아래처럼 postMessage를 사용하여 React Native로 메시지를 보낼 수 있습니다.window.ReactNativeWebView?.postMess..

📌 KakaoMapScreen 실행 시 동작 시퀀스 정리 (React Native + WebView + Kakao Map)이 글에서는 KakaoMapScreen이 호출될 때 내부적으로 어떤 순서로 기능이 실행되는지를 정리합니다.React Native와 WebView, Kakao Map Web SDK 간의 상호작용이 어떤 식으로 동작하는지를 이해하는 데 도움이 됩니다.🗂 주요 구조 KakaoMapScreen.js: WebView 로딩, 메시지 통신, JS 주입 mapHtml: Kakao 지도 초기화 및 마커 렌더링용 JS 포함 FacilityDB.js: SQLite DB에서 시설물 조회🔄 KakaoMapScreen 실행 시 전체 시퀀스 1. KakaoMapScreen 컴포넌트 마운트 ..

📍 React Native WebView + Kakao Map으로 시설물 마커 표시하기 (SQLite 연동)이 글에서는 React Native에서 Kakao Map Web SDK를 WebView로 띄우고, 앱 내 SQLite DB에 저장된 시설물 좌표를 지도에 마커로 표시하는 방법을 정리합니다. 시설물 데이터는 앱 설치 시 한 번만 삽입되도록 alreadySeeded 플래그를 이용해 제어합니다.📁 폴더 구성 예시📂 db └── FacilityDB.js // DB 초기화 및 조회📂 screens └── KakaoMapScreen.js // WebView와 통신App.js // 앱 시작 시 DB 준비🗂️ 1. SQLite DB 설정 (Facilit..

React Native WebView + Kakao 지도에서 GPS 위치 기반 지도 중심 이동이번 포스트에서는 React Native와 Kakao 지도 Web SDK를 사용하여, 사용자의 현재 GPS 좌표를 받아 지도 중심을 해당 위치로 설정하는 앱을 만드는 과정을 정리합니다.✅ 구현 목표앱 실행 시 GPS 권한 요청위치 좌표를 받아 WebView 안의 Kakao 지도에 전달해당 좌표를 지도 중심으로 설정1. 환경 구성npm install react-native-webviewnpm install @react-native-community/geolocationnpx pod-install # (iOS일 경우만)📁 android/app/src/main/AndroidManifest.xml 에 권한 추가:2...

React Native 앱에 Kakao Map Web SDK 연동하기 (with WebView)React Native에서는 Android 앱 내에 Kakao 지도를 직접 표시하려면 WebView를 통해 Kakao Map Web SDK를 사용하는 방법이 가장 간단하고 유연합니다. 이 글에서는 Kakao 지도 Web SDK를 WebView로 띄우는 방법을 단계별로 정리하고, 흰 화면 발생 원인 및 해결 방법도 함께 공유합니다.1. 사전 준비 Kakao Developers (https://developers.kakao.com)에서 앱 생성 JavaScript 키 발급 및 http://localhost, file:// 도메인 등록 React Native 프로젝트 생성 npx @react-native-..

📍 GPS 기반 시설물 관리 앱 설계 가이드 (React Native + Kakao Map)GPS 위치를 기반으로 시설물을 지도에 표시하고 관리하는 앱을 개발하려고 할 때, 어떤 기술을 선택해야 하고 어떻게 설계해야 하는지 정리한 가이드입니다. 이 글에서는 다음과 같은 질문에 대한 실무적 결정을 내려드립니다. 1. Kakao Map SDK: Web vs Android SDK 중 무엇을 사용할까? 2. 마커는 한번에 다 보여줘야 할까? 위치 기반으로 보여줘야 할까? 3. GPS 위치 추적 시 주변 마커를 어떻게 보여줄까? 4. GPS로 받은 좌표를 기준으로 어떤 방식으로 시설물을 쿼리할까? 5. 시설물 데이터를 어디에 저장하고, 어떻게 동기화해야 할까?✅ 1. Kakao Map SDK 선택: ..

🚀 React Native + Kotlin 네이티브 모듈 앱 개발 (Metro 서버 포함 전체 구조 설명)React Native는 빠른 UI 개발에 최적화된 프레임워크입니다. 하지만 블루투스, 센서, GPS 등 Android 고유 기능을 사용하려면 Kotlin 또는 Java로 네이티브 모듈을 구현해야 합니다. 이 글에서는 React Native + Kotlin 연동 예제를 기준으로, 앱이 어떻게 구성되고, 어떻게 실행되는지, 그리고 Metro 서버의 역할까지 전체 흐름을 정리해봅니다.📁 프로젝트 구조 요약test_project/├── App.js├── /screens│ ├── HomeScreen.js│ └── SecondScreen.js├── /android/app/src/main/java/..

뭐 일단 별건 없지만 react native 를 이용하여 안드로이드 앱을 개발해보려 함 가지고 있는 노트북 이용해서 해보지 뭐 1. 개발환경 설치node.js - prebuilt, 인스톨러 사용 - https://nodejs.org/en/downloadgit - 설치visual studio code - 설치함android studio - 설치, 패스 추가ANDROID_HOME C:\Users\YourUsername\AppData\Local\Android\SdkPATH%ANDROID_HOME%\platform-tools%ANDROID_HOME%\emulator%ANDROID_HOME%\tools%ANDROID_HOME%\tools\binjava - 설치, 패스 추가 - OpenJDK 17 - https:/..