전체 글184 웹뷰 하이브리드 앱에서 뒤로가기 제대로 구현하기 (react-hammerjs + WebView BackHandler) React 웹 + RN Expo 웹뷰 하이브리드 구조에서 삽질한 내용 정리프로젝트 구조이 글은 아래 구조를 전제로 한다.RN+Expo 앱└── WebView └── React 웹앱 (react-router-dom)웹이랑 앱 따로 개발하고, 앱에서 웹뷰로 웹을 띄우는 방식이다. 처음엔 단순해 보였는데 뒤로가기 하나 구현하는 데 꽤 헤맸다.웹 쪽 - react-hammerjs로 스와이프 뒤로가기모바일 웹에서 오른쪽 스와이프로 뒤로가기를 구현하려면 react-hammerjs를 쓰면 된다.설치npm install react-hammerjs 타입 에러가 날 텐데 npm i --save-dev @types/hammerjs 를 해도 안되면 아래처럼 세팅 해준다 // declarations.d.ts 생성decla.. 2026. 3. 12. Expo WebView에서 localhost 연결 안될 때 해결 방법 (ERR_CONNECTION_REFUSED) 하이브리드 앱을 만들면서React / Vite 로 만든 웹을 Expo WebView로 띄우려고 할 때실기기에서 아래 오류가 발생할 수 있다.net::ERR_CONNECTION_REFUSEDurl: http://localhost:5173이 문제는 구조 때문에 발생하는 정상적인 현상이다.원인과 해결 방법을 정리한다. 문제 원인앱에서 localhost 는 PC가 아니라 폰 자기 자신을 의미한다.http://localhost:5173이 주소는PC에서는 정상Expo Go 앱에서는 폰 내부 주소로 인식됨그래서 서버 연결 실패가 발생한다.해결 방법 1 — PC IP로 접속터미널에서 IP 확인ifconfig또는ipconfigMac 기준en0:inet 192.168.0.87이 경우 PC IP는192.168.0.87Web.. 2026. 3. 11. 맥북 데스트탑에 있는 apk파일을 실제 기기에 설치하는 법 안드로이드로 앱 테스트 할 일이 있었는데 iterm에서 apk 파일을 빌드한 뒤 실제 기기로 설치하는 법이다. 편하게 프로젝트 내 /android/app/build/outputs/release/app-release.apk 파일을 바탕화면으로 옮겨줬고맥의 터미널을 실행해서 아래와 같이 명령어를 입력한다.// 실제 안드로이드 기기는 usb로 연결한 상태다// 기기와 연결되었는지 확인adb devices//아래 처럼 리스트 나오면 연결 성공List of devices attachedR3XXXX device// 바탕화면에 있는 apk 파일 설치adb install ~/Desktop/app-release.apk 2026. 3. 9. ERROR Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that: 이 에러는 폴더블 기기를 접거나 펴면서 화면 크기가 변할 때,안드로이드 시스템이 Activity를 재시작(Recreate)하려고 하면서발생합니다. 이때 expo-router의 루트 내비게이션 설정이중복으로 감지되는 것이 원인입니다. 에러의 주된 원인은 폴더블 기기에서 화면을 펼칠 때 발생하는'Configuration Change'로 인해 Activity가 재시작되면서expo-router의 초기화 로직이 꼬이는 경우입니다. 이를 해결하기 위해 AndroidManifest.xml에서 configChanges옵션을 보강하고, 가로/세로 전환 시 Activity가 재시작되지않도록 설정해야 합니다. 1. android:configChanges에 smallestScreenSize, screenLayout등이 잘 포.. 2026. 2. 25. Expo android app apk 파일 추출하기 테스트 앱을 공유하기 위해 설치 파일이 필요할때 유용한 방법이다. 맥북 기준으로 iterm을 먼저 연다경로를 프로젝트 경로로 이동 시킨다. cd example-appcd android./gradlew assembleRelease 프로젝트 내부의 안드로이드 폴더로 진입하면./gradlew assembleRelease 를 입력한다.이후 빌드 진행하게 된다 (대략 30분정도 걸림ㄷㄷ) 다 된 apk 파일은 android/app/build/outputs/bundle/release/app-release.apk 위 경로에 있어서 빼와서 공유하고 맘대로 하면 된다! 2026. 2. 6. VS code 제안 항목 트리거로 편하게 import 하기 맥북 기준vs code 열고 command + shift + p 열어서 제안 항목 트리거 검색 한 후 원하는 키 등록하면 끝 ! 기본으로 ctrl + i로 돼있을텐데 더 편하게 원하는 키로 설정하면 돼 ! 2026. 2. 5. 문자열 리터럴 타입이란? as const TypeScript 문자열 리터럴 타입 완벽 정리React Native로 개발하다 보면 fontWeight 같은 속성에서 타입 에러를 만나게 됩니다. 이 글에서는 문자열 타입과 문자열 리터럴 타입의 차이를 알아보겠습니다.문제 상황// ❌ TypeScript 에러 발생const customStyle = { textStyle: { fontWeight: "500" // Error: 'string' 형식은 할당할 수 없습니다 }};문자열 타입 vs 문자열 리터럴 타입1. 문자열 타입 (string)let name: string = "철수";name = "영희"; // ✅ OKname = "민수"; // ✅ OKname = "아무거나"; // ✅ OK특징: 어떤 문자열이든 다 들어갈 수 .. 2026. 1. 15. VScode에서 사용하기 편한 콘솔로그 단축어 설정 { // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids.. 2026. 1. 12. react-native-magic-modal 이중 모달 사용 시 첫번째 모달 닫히지 않는 이슈 / 백핸들러 안되는 이슈 해결 게시글 제목을 어떻게 써야할지도 모르겠는데 어떻게든 내가 삽질하다가 구현 완료된거를 공유하고 싶었다 우선 내가 원했던 플로우는로그인 화면 -> 회원가입 이동 -> 즉시 약관동의 바텀시트 띄움1. 약관 필수 동의 모두 체크 -> 완료 -> 회원가입 진행2. 필수 동의 미체크 -> 완료 -> 필수 체크 안내 알림 모달 띄움 -> 확인 -> 다시 1번 진행 or 뒤로가기 백핸들러 실행 -> 바텀시트 닫히고 로그인 화면 이동3. 필수 동의 미체크로 백드랍 터치 시 바텀시트 닫히지 않게 방어4. 아무것도 동작하지 않고 백핸들러 작동하면 바텀시트 닫히고 로그인 화면 이동 그런데 문제 상황은로그인 화면 -> 회원가입 이동 -> 즉시 약관동의 바텀시트 띄움1. 약관 필수 동의 모두 체크 -> 완료 -> 회원가입 진행2.. 2025. 12. 31. react native 다양한 애니메이션 효과 사이트 https://www.animatereactnative.com/animations AnimateReactNative.com - Premium and Custom React Native animations.AnimateReactNative.com - Premium and Custom React Native animations.www.animatereactnative.com 2025. 12. 29. 초성만 검색해도 검색결과가 나오는 api https://es-hangul.slash.page/ es-hangul – es-hangul es-hangul.slash.page 2025. 12. 29. react native 키패드 있을 때 버튼 함수 바로 실행하는 방법 로그인 화면에서 아이디와 비밀번호 input에 포커스가 되면 키패드가 열리는데키패드가 열린 상태에서 로그인 버튼을 터치하면 키패드가 먼저 닫히는 동작이 돼서 로그인 버튼을 결국 한번 더 눌러야 하는 불편함이 생긴다.이 부분은 ScrollView로 감싸서 ScrollView의 속성인 keyboardShouldPersistTaps="handled"을 추가하면 된다. 그런데 또 문제는 로그인 버튼 밑의 계정찾기와 회원가입 버튼이 있다는 것 .. !원래라면 두 버튼들도 터치 시 바로 화면 이동해도 되는데 이번 프로젝트에서는 특히 회원가입 버튼을 누르면 바로 넘기면 안됐다(는 내맘이긴 함).왜냐하면 회원가입 화면 이동 즉시 약관동의 바텀시트가 뜨기 때문이다.로그인 화면에서 키패드가 안 닫힌 채로 회원가입 이동하면.. 2025. 12. 23. 이전 1 2 3 4 ··· 16 다음