app-development

React Navigation에서 Stack.Navigator 안의 Stack.Screen 순서가 초기 라우트(첫 화면)를 결정하게 됨.로그인 상태임에도 불구하고 항상 Start 화면으로 이동하는 문제가 발생메모리 효율성필요한 스크린만 메모리에 로드불필요한 컴포넌트는

Expo 프로젝트 푸시 알림 구현: FCM vs Expo Notifications 푸시 알림 구현 시행착오 1️⃣ 첫 번째 시도: FCM 직접 구현 서비스 회원가입 완료 후 알림 수신 동의를 위해 FCM 구현 시도. Firebase는 많이 사용되는 서비스라 FCM

스플래시 스크린(Splash Screen)은 모바일 앱을 실행할 때 가장 처음 나타나는 화면으로, 보통 앱 로고나 브랜드 이미지를 보여준다. 앱이 실행 중이라는 것을 사용자에게 알리고, 초기 설정이나 데이터를 로딩할 시간을 확보하는 역할을 한다. 스플래시 스크린을 사

Focus 상태 화면: 현재 보고 있는 화면Background 상태 화면: 현재 보이지 않는 화면Focus를 받으면 자동으로 useEffect 실행화면으로 돌아올 때마다 데이터 새로고침Background 상태에서는 자동 새로고침 안 됨EventEmitter로 수동 새로

React Native에서 네비게이션은 계층적으로 구성됩니다:Tab Navigator: 앱의 메인 탭을 관리 (예: 홈, 검색, 프로필)Stack Navigator: 각 탭 내부의 화면 전환을 관리 (예: 프로필 → 프로필 수정 → 설정)중첩 네비게이션: Tab Nav

웹 개발을 하다가 넘어와서 앱 개발을 모르고 유저에게 로그인 상태 유지를 옵션으로 주는 것으로 생각했다가 회원가입 성공시에는 로그인 상태 유지 기능을 넣고 있지 않았다는 걸 깨닫고 뒤늦게 추가하려고 했지만, 보통 앱을 이용했을 때 경험을 비춰봤을 때 로그인 상태 유지

React Native Expo 프로젝트에서 푸시알림을 구현하는 과정을 남기고, 나중에 다시 확인하며 공부 할 수 있도록 기록하고자 합니다.저는 사용자 경험을 고려하여 회원가입 후 첫 로그인 시 자연스럽게 푸시알림 권한을 요청하는 방법을 구상했습니다.현재 진행중인 저의

지난 포스팅에서 다룬 기본적인 푸시알림 권한 요청에 이어, 이번에는 좀 더 깊이 있는 내용을 다뤄보려고 합니다. 특히 여러 계정을 사용하는 경우의 토큰 관리 방법과 알림 설정 동기화에 대해 자세히 알아보겠습니다.푸시알림을 구현할 때 가장 중요한 것이 FCM(Fireba

이전 포스팅에서 기본적인 푸시알림 권한 요청과 토큰 관리에 대해 다뤘습니다.이번에는 사용자가 앱 내에서 푸시알림을 켜고 끌 수 있는 설정 기능과, 로그아웃/회원탈퇴 시의 토큰 관리에 대해 자세히 알아보겠습니다.토큰 관리의 복잡성FCM 토큰은 디바이스 단위로 발급여러 계

이전 포스팅에서 다룬 매치 삭제 기능을 최적화해보았습니다.특히 불필요한 서버 요청을 줄이고 사용자 경험을 개선하는 방향으로 리팩토링을 진행했습니다.주요 문제:1\. 삭제 성공 후 전체 목록을 다시 로딩2\. 불필요한 네트워크 요청 발생3\. UI 업데이트가 서버 응답을

React Native 앱에서 로그인 상태를 유지하는 것은 매우 중요한 기능입니다. 사용자가 앱을 종료했다가 다시 실행하거나, 새로고침을 했을 때도 로그인 상태가 유지되어야 좋은 사용자 경험을 제공할 수 있습니다.이 방식의 문제점:새로고침 시 상태 초기화화면 전환 시

React Native Expo 환경에서 Google 로그인을 구현하는 방법을 정리합니다.Expo의 expo-auth-session을 활용하여 OAuth 2.0 인증을 처리하는 방식으로 진행됩니다.Google Cloud Console에 접속새 프로젝트 생성 후 이름 지

Expo 프로젝트를 개발하면서 app.json과 app.config.js 두 가지 구성 파일을 마주치게 됩니다.이 두 파일의 차이점과 각각의 사용 케이스를 알아보겠습니다.정적 구성: 변경되지 않는 고정된 설정값단순성: JSON 형식으로 간단한 구성투명성: 설정값이 바로

React Native로 어플리케이션을 개발하던 중, Google 소셜 로그인을 구현하면서 흥미로운 상황을 마주쳤습니다.기존의 일반 회원가입 방식과 소셜 로그인의 데이터 처리 방식이 달라야 한다는 것을 깨달았죠.현재 우리 앱의 일반 회원가입 과정은 다음과 같습니다:사용

최근 React Native 프로젝트에서 구글 소셜 로그인을 구현하면서 환경 변수 설정의 복잡함을 경험했다.이 과정에서 babel.config.js라는 흥미로운 녀석을 알게 되었고, 환경 변수 설정의 모든 과정을 기록하고자 한다.React Native Expo 프로젝트

앱을 실행할 때 처음 보여지는 스플래시 스크린은 단순한 로딩 화면 이상의 의미를 가집니다.사용자에게 브랜드 아이덴티티를 전달하는 첫 접점이자, 앱의 초기화 작업을 자연스럽게 처리할 수 있는 시간을 제공합니다.단순히 로딩 상태에 따라 스플래시 스크린을 표시하면 다음과 같

푸시 알림 기능을 구현하면서 흥미로운 문제 상황을 마주했습니다.매칭 참여자들에게 메시지를 전달하는 푸시 알림 시스템을 구축했지만, 정작 많은 사용자들이 푸시 알림 권한을 허용하지 않은 상태라는 것을 발견했죠.처음에는 단순히 로그인 직후에 권한을 요청하는 방식을 사용했지

최근 백엔드 팀에서 토큰 기반 인증 방식의 변경 요청이 있었습니다.기존에는 단일 토큰을 사용하여 인증을 처리했는데, 이를 accessToken과 refreshToken을 사용하는 더 안전하고 효율적인 방식으로 변경하게 되었습니다.토큰 만료 시간 차등 적용accessTo

React Native로 앱을 개발하면서 백엔드 팀으로부터 RefreshToken 인증 방식으로의 변경 요청을 받았습니다. 이때 한 가지 의문이 들었습니다:"앱은 개인 기기라서 로그인 상태를 계속 유지해도 되는데, 왜 RefreshToken으로 주기적 인증이 필요할까?

React Navigation을 사용하다 보면 여러 개의 네비게이션 타입을 함께 사용해야 하는 상황이 생길 수 있습니다.예를 들어, Stack Navigation과 Drawer Navigation을 동시에 사용하는 경우 같은 상황입니다.이때 유용한 타입이 Composi

React Native 앱에서 로그인 상태를 유지하기 위해 JWT(JSON Web Token)를 사용하는 것은 일반적인 방법입니다.하지만 보안을 위해 액세스 토큰의 유효기간이 짧게 설정되어 있어, 사용자 경험을 해치지 않으면서도, 보안성을 유지하는 것이 중요합니다.오늘

모바일 앱을 개발할 때 사용자 경험을 향상시키는 중요한 기능 중 하나는 무한 스크롤(Infinite Scroll)입니다.사용자가 콘텐츠의 끝까지 스크롤할 때 자동으로 새로운 데이터를 로드하는 이 기능은 페이지 번호를 클릭하거나 '더 보기' 버튼을 누르는 번거로움을 줄여

모바일 앱에서 사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와주는 핵심 기능 중 하나는 필터링입니다.특히 데이터가 많은 앱에서는 효율적인 필터링 시스템이 사용자 경험을 크게 향상시킬 수 있습니다.이 글에서는 React Native에서 효과적인 필터링 시스템을 구현하

모바일 앱을 개발하다 보면 푸시 알림 구현은 필수적인 기능 중 하나입니다.하지만 React Native와 Expo를 사용하여 개발할 때, 푸시 알림을 구현하는 방법에는 여러 가지가 있어서 혼란스러울 수 있습니다.특히 FCM(Firebase Cloud Messaging)

앱 개발을 하다보면 개발 빌드(Development Build), 테스트 빌드(Test Build), 커스텀 빌드(Custom Build), 로컬 빌드(Local Build), 네이티브 빌드(Native Build) 같은 용어도 혼용되곤 합니다.이 글에서는 각 용어의

React Native를 개발할 때 대부분 Expo를 먼저 사용하게 된다.그런데 프로젝트가 점점 커지고 네이티브 모듈을 추가해야 할 상황이 오면 Expo를 벗어나야 하는 순간이 온다. 이때 많은 개발자가 궁금해하는 것이 바로 다음과 같은 질문이다."이제 Expo 없이

React Native 개발을 할 때, Expo는 개발 속도를 높여주는 강력한 도구입니다.하지만 Expo를 사용할 때 Managed Workflow와 Bare Workflow 중 어떤 것을 선택해야 할지 고민이 될 수 있습니다.이 글에서는 두 가지 워크플로우의 차이점과

React Native 앱을 개발할 때 표준 React Native 프로젝트(Bare Workflow)와 Expo의 개발 빌드(Development Build) 두 가지 방법이 있다.이 둘은 개발 방식, 네이티브 코드 접근성, 빌드 과정에서 차이가 있다.npx reac

Expo Go 환경에서 개발하던 앱을 FCM(Firebase Cloud Messaging) 등의 네이티브 기능을 사용하기 위해 Expo Dev Client로 마이그레이션하는 과정에서 특이한 현상이 발생했습니다.마이그레이션 후 API 요청에 문제가 생겼는데, 안드로이드

터미널에서 실행하는 ADB(Android Debug Bridge) 명령어들도 유용해.

이메일 검증의 중요성(- 일반적인 이메일 검증 과정의 문제점(- 개선된 이메일 검증 시스템 구현하기(- 코드 분석: EmailVerificationInput 컴포넌트(- 이메일 유효성 검증 및 중복 확인 로직(- 실제 구현 시 고려사항(이메일은 대부분의 웹 서비스와 앱

React Native/Expo 프로젝트에서 Android 빌드 중 다음과 같은 심각한 오류가 발생했습니다:CMake 설정 오류특정 라이브러리의 JNI(Java Native Interface) 디렉토리 누락빌드 시스템의 구성 파일 손상목적: 프로젝트의 의존성을 완전히

모바일 앱에서 푸시 알림은 사용자 참여를 유도하고 중요한 정보를 전달하는 핵심 도구입니다.하지만 많은 사용자들이 앱 설치 직후 표시되는 알림 권한 요청을 즉시 거부하는 경향이 있어, 효과적인 전략이 필요합니다.이번 글에서는 React Native 앱의 푸시 알림 권한

회원가입 프로세스는 모든 앱의 중요한 부분입니다.특히 이메일 인증은 사용자의 신원을 확인하고 보안을 강화하는 필수적인 단계입니다.React Native 앱에서 이메일 중복 체크, 인증 코드 발송, 그리고 인증 코드 확인까지 이메일 인증 기능을 구현하는 방법을 기록합니다

모바일 앱에서 푸시 알림은 사용자 참여를 유도하고 중요한 정보를 전달하는 핵심 기능입니다. React Native 앱에서 Firebase Cloud Messaging(FCM)을 사용하여 푸시 알림을 구현할 때, 시뮬레이터와 실제 기기 모두에서 동작하는 코드를 작성하는

이 글에서는 웹 브라우저와 React Native 애플리케이션의 렌더링 과정을 비교하여 설명합니다. 두 플랫폼의 작동 방식 차이를 이해하면 더 효율적인 개발과 최적화에 도움이 될 것입니다.웹 브라우저는 HTML, CSS, JavaScript를 해석하여 사용자에게 시각적

Expo Router는 Next.js 스타일의 파일 기반 라우팅을 React Native에서 사용할 수 있도록 해주는 라이브러리입니다.React Native에서 기존의 react-navigation을 사용해 네비게이션을 구성하는 것과 달리, 파일 시스템을 활용한 직관적

Expo Router와 React Native에서 탭 네비게이션을 사용할 때 화면 상단에 나타나는 헤더를 관리하는 방법에 대해 알아보겠습니다.탭 기반 네비게이션을 구현했을 때, 기본적으로 각 탭의 이름이 화면 상단 헤더에 표시됩니다. 예를 들어 '가이드', '매칭',