네이버 지도를 react-native에서 사용할 수 있게 만든 깃허브 라이브러리 사용법입니다.📋 사전 준비 네이버 클라우드 API 키 발급네이버 클라우드 플랫폼 접속 → 로그인콘솔 → AI·NAVER API → Maps 선택⚠️ v2.4.x 이상은 기존 AI NAVER API 지도 API가 아닌 Maps 단독 상품 사용Application 등록 → Android 패키지명 / iOS 번들 ID 입력Client ID 발급 및 복사📦 패키지 설치# npmnpm install @mj-studio/react-native-naver-map# yarnyarn add @mj-studio/react-native-naver-map# exponpx expo install @mj-studio/react-native-nav..

Redux Toolkit (RTK) 기준으로 작성된 문서입니다. Legacy Redux(redux + react-redux 수동 설정)와 RTK Slice 방식 모두 다룹니다.📦 패키지 설치# npmnpm install @reduxjs/toolkit react-reduxnpm install @types/react-reduxnpm install --save-dev @types/react-redux# yarnyarn add @reduxjs/toolkit react-reduxyarn add @types/react-reduxyarn add --dev @types/react-redux🗂️ 폴더 구조src/├── store/│ ├── index.ts # store 설정│ ├── hooks..

React Native 앱에서 현재 위치를 가져오는 기능을 구현할 때 React Native 기본 Geolocation API를 사용하면 Android에서 타임아웃 이슈가 자주 발생합니다. react-native-geolocation-service는 Google의 FusedLocationProviderClient API를 사용해 이 문제를 해결한 라이브러리입니다. 이번 글에서는 설치부터 iOS/Android 권한 설정, 기본 사용법까지 정리해 드리겠습니다.패키지 설치npmnpm install react-native-geolocation-serviceyarnyarn add react-native-geolocation-serviceiOS pod 설치cd ios && pod install && cd ..iOS..

React Native 앱에서 API 통신을 구현할 때 기본 fetch를 사용할 수도 있지만, 실제 프로젝트에서는 axios를 훨씬 많이 사용합니다. JSON 자동 파싱, HTTP 에러 자동 감지, 인터셉터 지원 등 실무에 필요한 기능들이 기본으로 제공되기 때문입니다. 이번 글에서는 설치부터 인스턴스 생성, 인터셉터 설정까지 정리해 드리겠습니다.fetch vs axios 비교기능 fetch axiosJSON 자동 파싱❌ (수동)✅HTTP 에러 자동 감지❌ (수동 status 확인)✅요청/응답 인터셉터❌✅타임아웃 설정❌✅기본 헤더 설정❌✅패키지 설치npmnpm install axiosyarnyarn add axiosExponpx expo install axios기본 사용법import axios from '..

React Native에서 버튼이나 터치 영역을 만들 때 TouchableOpacity와 Pressable 중 무엇을 써야 할지 고민한 적 있으신가요? 둘 다 터치 이벤트를 처리하는 컴포넌트지만 차이가 꽤 있습니다. 이번 글에서는 두 컴포넌트의 차이점과 각각 언제 사용하면 좋은지 정리해 드리겠습니다.한눈에 비교항목 TouchableOpacity Pressable도입 시기구버전부터RN 0.63+공식 권장❌ (레거시)✅ (현재 권장)기본 피드백투명도(opacity) 변화없음 (직접 설정)스타일 함수형 지원❌✅ ({ pressed }) => style눌림 상태 감지❌ (별도 state 필요)✅ pressed proponPressIn / onPressOut❌✅Android Ripple❌✅ android_ripp..

React Native 앱에서 이미지 선택, 공유, 삭제처럼 여러 선택지를 제공해야 할 때 iOS에서는 네이티브 액션 시트(Action Sheet) UI를 사용하면 자연스럽습니다. React Native에 내장된 ActionSheetIOS API를 사용하면 별도 라이브러리 없이 간단하게 구현할 수 있습니다.ActionSheetIOS란?ActionSheetIOS는 iOS의 네이티브 액션 시트와 공유 시트를 표시하는 React Native 내장 API입니다. 화면 하단에서 올라오는 시트 형태로 여러 버튼을 보여주는 익숙한 iOS UI를 그대로 사용할 수 있습니다.단, iOS 전용 API이기 때문에 Android에서는 동작하지 않습니다. 크로스 플랫폼 앱이라면 Platform.OS 분기 처리가 반드시 필요합니..

React Native 앱에서 채팅 입력창이나 검색창처럼 키보드와 함께 동작하는 UI를 만들다 보면, 키보드가 올라올 때 입력 필드가 가려지는 문제를 만나게 됩니다. 이때 Keyboard.addListener를 사용해 키보드 이벤트를 감지하고 레이아웃을 동적으로 조정할 수 있습니다. 이번 글에서는 기본 사용법부터 커스텀 훅 패턴, 플랫폼별 주의사항까지 정리해 드리겠습니다.Keyboard.addListener란?Keyboard.addListener는 소프트 키보드(가상 키보드)의 표시/숨김 이벤트를 감지하는 React Native 내장 API입니다. 키보드가 올라올 때의 높이를 계산해 레이아웃을 조정하거나, 키보드가 사라질 때 원래 상태로 복원하는 용도로 주로 사용합니다.import { Keyboard }..

앱에서 카메라로 사진을 찍거나 갤러리에서 이미지를 선택하는 기능은 거의 모든 앱에서 필요한 기능입니다. React Native에서는 react-native-image-picker 라이브러리를 사용해 쉽게 구현할 수 있습니다. 이번 글에서는 설치부터 iOS/Android 권한 설정, 기본 사용법까지 정리해 드리겠습니다.패키지 설치npmnpm install react-native-image-pickeryarnyarn add react-native-image-pickeriOS pod 설치cd ios && pod install && cd ..iOS 권한 설정 (Info.plist)iOS에서는 카메라, 갤러리, 마이크 접근에 대한 권한 설명 문구를 Info.plist에 반드시 추가해야 합니다. 이 설정을 빠뜨리면..

React Native 프로젝트에 Firebase를 연동하는 과정은 생각보다 까다롭습니다. 특히 iOS의 Podfile 설정 위치 하나를 잘못 잡으면 원인을 찾기 어려운 에러가 연달아 발생합니다. 이번 글에서는 Expo를 사용하지 않는 React Native CLI 프로젝트 기준으로 Android와 iOS 각각의 연동 방법을 단계별로 정리해 드리겠습니다.📎 공식 문서: https://rnfirebase.io패키지 설치React Native에서 Firebase를 사용할 때는 공식 Firebase JS SDK 대신 @react-native-firebase 라이브러리를 사용합니다. 네이티브 Firebase SDK를 직접 연결하기 때문에 성능이 더 좋고, Auth / Firestore / Storage 등 모..

React Native 프로젝트에서 앱을 실행하다 보면 갑자기 아래와 같은 에러를 마주칠 때가 있습니다.Error: Non-js exception: Compiling JS failed:Wrong bytecode version. Expected 96 but got 98단순히 앱을 다시 실행해도 해결되지 않고, 무엇이 문제인지 파악하기 어려워 당황스러운 에러입니다. 이번 글에서는 이 에러의 원인과 단계별 해결 방법을 정리해 드리겠습니다.에러 원인이 에러는 Hermes 엔진의 바이트코드 버전 불일치 때문에 발생합니다. 기기에 설치된 네이티브 앱이 사용하는 Hermes 런타임은 96 버전 바이트코드를 읽을 준비가 되어 있는데, Metro 번들러가 새롭게 전달한 JS 코드는 98 버전 컴파일러로 만들어졌기 때문에..