- [ 언어·프레임워크/React Native ][React Native] 모바일 푸시 알림 토큰, 어떻게 관리해야 할까?2025-07-22 19:44:06모바일 푸시 알림 토큰, 어떻게 관리해야 할까?푸시 알림은 현대 모바일 애플리케이션에서 사용자와 소통하는 핵심적인 기능이다. 그러나 사용자의 다양한 이용 행태는 푸시 토큰 관리를 예상보다 복잡하게 만든다. 특히 사용자가 여러 기기를 사용하거나 앱을 재설치하는 경우는 데이터 정합성에 큰 영향을 미친다. 이 글에서는 이러한 시나리오를 효과적으로 처리하고, 안정적인 푸시 알림 시스템을 구축하기 위한 토큰 관리 전략에 대해 설명하고자 한다.1. 푸시 토큰 관리의 복잡성단순히 토큰을 데이터베이스에 저장하고 조회하는 것을 넘어, 실제 서비스 환경에서는 여러 예외적인 상황이 발생한다.1-1. 앱 재설치와 토큰의 변화새로운 토큰의 발급: 사용자가 기기에서 앱을 삭제한 후 다시 설치하면, 구글의 FCM(Firebase ..
- [ 언어·프레임워크/React Native ][React Native] Expo에서 커스텀 푸시 알림 사운드 적용하기2025-07-22 17:45:31Expo에서 커스텀 푸시 알림 사운드 적용하기1. 개요모바일 애플리케이션에서 푸시 알림은 사용자와 소통하는 핵심적인 수단이다. 이때, 기본 알림음이 아닌 앱의 정체성을 담은 커스텀 사운드를 사용하는 것은 사용자 경험을 향상시키고 브랜드 인지도를 강화하는 중요한 요소가 될 수 있다. 하지만 Expo를 사용하여 커스텀 알림 사운드를 적용하는 과정, 특히 Android에서는 예상치 못한 여러 장벽에 부딪히기 쉽다. 이 글에서는 그 과정에서 겪을 수 있는 모든 문제와 그 해결책을 종합하여 가장 확실하고 안정적인 적용 방법을 제시한다.2. 사전 준비파일 위치프로젝트의 루트 디렉토리에 assets 폴더를, 그 안에 sounds 폴더를 생성하여 사운드 파일을 위치시킨다. 이 예제에서는 assets/sounds/not..
- [ 언어·프레임워크/React Native ][React Native] Expo/FCM 푸시 알림, Node.js 백엔드에 완벽 통합 가이드2025-07-21 17:05:05Expo/FCM 크리티컬한 푸시 알림, Node.js 백엔드에 완벽 통합 가이드모바일 애플리케이션에서 푸시 알림은 사용자와 소통하는 핵심 창구이다. 특히, 사용자의 즉각적인 반응이 필요한 '위험 경고'나 '이상 감지'와 같은 미션 크리티컬(Mission-Critical) 정보를 전달해야 할 때, 알림의 전달 실패는 곧 시스템의 실패로 이어질 수 있다.이 글에서는 단순한 알림 발송을 넘어, 중요 알림의 누락을 방지하는 데 초점을 맞춘 안정적인 푸시 알림 백엔드 시스템을 Node.js와 Express 환경에서 구축하는 방법을 알아본다.1. 실패를 용납하지 않는 데이터베이스 설계안정적인 토큰 관리의 첫걸음은 데이터베이스 모델링에서 시작된다. 단순히 토큰을 저장하는 것을 넘어, 토큰의 '상태'와 '활성도'를 추..
- [ 언어·프레임워크/React Native ][React Native] Expo 푸시 알림 완벽 정복 튜토리얼2025-07-18 14:49:59Expo 푸시 알림 완벽 정복 튜토리얼이 튜토리얼은 Expo의 푸시 알림 서비스를 사용하여 React Native 애플리케이션에 푸시 알림 기능을 통합하는 전체 과정을 안내합니다. 기본 개념 이해부터 실제 구현, 전송 및 수신 처리까지 모든 단계를 다룹니다.1. 소개: Expo 푸시 알림 서비스란?Expo 푸시 알림 서비스는 개발자가 Apple(APNs) 및 Google(FCM)의 푸시 알림 서비스를 직접 다루는 복잡성을 줄여주는 중개 서비스입니다. 이 서비스를 통해 iOS와 Android 플랫폼에 대해 동일한 방식으로 알림을 보낼 수 있어 개발 시간을 크게 단축할 수 있습니다.주요 이점:플랫폼 간 통일성: 단일 API로 Android와 iOS에 모두 알림을 보낼 수 있습니다.간소화된 설정: 복잡한 네이..
- [ 언어·프레임워크/React Native ][React Native] 모바일 웹뷰의 vh 단위와 가상 키보드: 동적 뷰포트로 인한 레이아웃 문제와 injectedJavaScript 해결책2025-07-16 17:14:08모바일 웹뷰의 vh 단위와 가상 키보드: 동적 뷰포트로 인한 레이아웃 문제와 injectedJavaScript 해결책 이 문제의 원인은 React Native나 네이티브 안드로이드 설정이 아니라, 웹뷰에 표시되던 웹 애플리케이션의 CSS 스타일에 있었다.1. 문제의 원인: height: 100vhvh 단위의 작동 방식: CSS에서 vh(viewport height) 단위는 화면에서 보이는 영역(뷰포트)의 높이를 기준으로 한다. height: 100vh는 해당 요소의 높이를 뷰포트 높이의 100%로 설정하라는 의미이다.키보드와 뷰포트의 관계: 모바일 기기에서 텍스트 입력창을 터치해 가상 키보드가 나타나면, 키보드가 화면의 일부를 차지하게 된다. 이때 웹 브라우저(또는 웹뷰)는 실제 콘텐츠를 표시할 수 있..
- [ 언어·프레임워크/React Native ][React Native] npx expo start --dev-client -c 명령어: Expo 개발 환경을 위한 강력한 조합2025-07-15 14:14:25npx expo start --dev-client -c 명령어: Expo 개발 환경을 위한 강력한 조합Expo React Native 프로젝트를 개발할 때 npx expo start 명령어는 앱을 실행하고 Metro Bundler를 시작하는 기본적인 수단이다. 하지만 특정 개발 시나리오에서는 이 명령어에 추가적인 플래그를 조합하여 더욱 강력하고 효율적인 개발 환경을 구축할 수 있다. 그중 하나가 바로 --dev-client와 -c 플래그를 함께 사용하는 것이다. 이 포스팅은 이 두 플래그의 역할과 함께 사용될 때의 이점에 대해 상세히 설명하고 있다.1. npx expo start 명령어의 기본 역할npx expo start는 Expo 프로젝트의 개발 서버를 시작하는 명령어이다. 이 서버는 React Na..
- [ 언어·프레임워크/React Native ]Expo React Native 앱에 푸시 알림 적용하기: 성공적인 통합 가이드2025-07-14 17:59:02Expo React Native 앱에 푸시 알림 적용하기: 성공적인 통합 가이드React Native와 Expo를 사용하면 복잡한 네이티브 설정 없이 간편하게 푸시 알림 기능을 앱에 추가할 수 있다. Expo의 푸시 알림 서비스는 Apple Push Notification service (APNs)와 Firebase Cloud Messaging (FCM) 사이의 복잡한 과정을 추상화하여 개발자가 쉽게 알림을 보낼 수 있도록 지원한다.푸시 알림을 적용하기 위해서는 실제 단말기가 필요한데, 나의 경우 우선적으로 Android 단말기를 이용한 테스트를 진행해 보았다. 푸시 알림 기능은 빌드된 상태에서 동작한다. 따라서 EAS (Expo Application Services)에 로그인한 상태에서 빌드를 진행해야..
- [ 언어·프레임워크/React Native ][Ract Native] Expo에서 SQLite 연동하는 최신 방법2025-03-22 22:51:24React Native(Expo)에서 SQLite 연동하는 최신 방법React Native에서 로컬 데이터베이스를 사용할 때 expo-sqlite 라이브러리는 간편한 해결책이 될 수 있다. Expo SDK 최신 버전(글 작성일 2025년 3월 22일, https://docs.expo.dev/versions/latest/sdk/sqlite/)에서는 기존 openDatabase()가 openDatabaseAsync() 및 openDatabaseSync()로 변경되었으며, 비동기적인 데이터베이스 작업을 수행하기 위해 openDatabaseAsync()를 사용하는 것이 권장된다(udemy에 있는 React Native 완벽 가이드 2025 강의에 아직 이 내용이 반영되지 않아서 그대로 따라하다 한참 삽질을 했음..