Home

React Native 에서 기본적으로 제공하는 Modal 만을 활용해 Modal 활성화 시 배경을 어둡게 하도록 코드를 작성해 보겠습니다. 대부분의 앱들에서 볼 수 있는 사용자 경험입니다. 실행 화면 구현한 실행 화면부터 확인해 보겠습니다. - 뒷 배경 흐림에 fade 옵션을 준 경우 - 뒷 배경 흐림에 none 옵션을 준 경우, 보다 즉각적인 반응을 얻을 수 있습니다. 저라면 이 버전을 사용할 것 같네요. Modal 구현 이를 구현하기 위해 두 가지 Modal을 사용해야 합니다. 하나는 뒷 배경을 어둡게 할 ContainerModal 이고 나머지 하나는 사용자가 집중하게 될 내용을 담을 TestModal 입니다. ContainerModal 뒷 배경을 어둡게 처리할 Modal 입니다. 어떻게 어둡게 할..

TailWind 디자인 패턴을 RN 앱에 사용하기 위해 사용하는 라이브러리로 NativeWind가 있습니다. NativeWind를 활용한 스타일링이 적용되지 않을 때 시도할 수 있는 해결 방법들입니다. 캐시 삭제 NativeWind 스타일링은 각 파일의 캐쉬를 활용합니다. 바로 적용이 안되는 경우 캐쉬를 삭제한 후 다시 빌드를 시도합니다. npx react-native start --reset-cache tailwind.config.js 확인 NativeWind는 tailwind.config.js 파일을 통해 스타일링을 적용할 파일들을 확인합니다. 새로운 파일을 생성한 경우 파일을 다시 확인해 보세요. 제 경우, MainScreen 파일을 새로 만든 후 tailwind.config.js 파일에 해당 파일..

발생 에러 아래와 같은 에러를 남기며 IOS 앱을 빌드할 수 없었습니다. warning: Run script build phase 'Start Packager' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'ITerviewClientMobile' from project 'ITervie..

개요 React Native는 키보드를 사용할 수 있도록 KeyboardAvoidingView 컴포넌트를 제공. KeyboardAvoidingView가 레이아웃을 조정하는 과정에서 불필요한 추가 공간이 영구적으로 발생하는 문제. 문제 분석 문제가 되는 컴포넌트 라이브러리 파일 내 각 함수 디버깅 및 Inspector를 사용해서 문제 원인을 분석. 문제 분석 결과 _relativeKeyboardHeight 함수 관련 문제임 _onLayout 함수 내 event.nativeEvent.layout 관련 문제임 네이티브에서 가져오는 레이아웃 너비 값 event.nativeEvent.layout 에 의한 문제 event.nativeEvent.layout 값을 이해할 수 없음 네이티브에서 레이아웃 너비 값을 계산하..

프로젝트 생성 아래 명령을 통해 로컬 프로젝트를 생성합니다. npx react-native init 프로젝트명 깃허브 레포지토리 생성 로컬 환경에서 react native 프로젝트를 생성하는 동안 깃허브에 접속하여 레포지토리를 생성해 주세요. react-native cli 로 프로젝트 생성 시 자동으로 .gitignore이 생성되므로 생성 옵션 중 .gitignore 파일 추가를 선택하지 마세요. README 파일 추가도 선택하지 마세요. 깃 초기화 로컬 프로젝트 생성이 완료되었으면 로컬 프로젝트 디렉토리에서 깃 초기화를 해주세요. git init 깃 리모트 설정 깃허브에서 생성한 레포지토리와 로컬 프로젝트를 연결합니다. git remote add origin https://github.com/그룹또는회..

RN 앱을 개발할 때 필요한 도구인 watchman, 프로젝트 디렉토리 접근 권한이 부여된 상태임에도 실행 시 접근 권한이 없다고 에러를 출력하는 문제가 있습니다. 이 문제를 해결해보겠습니다. ... { watchmanResponse: { error: 'std::__1::system_error: open: /Users/taegyeonglee/Documents/GitHub/Checked: Operation not permitted', version: '2023.01.16.00' } } 이 글은 watchman설치를 완료한 상태을 전제로 합니다. 부여된 권한 삭제 설정 -> 개인정보 보호 및 보안 -> 파일 및 폴더 에서 watchman을 모두 삭제해 줍니다. Watchman shutdown 실행 중인 wa..

Presssable 컴포넌트는 RN 앱 개발을 위해 반드시 알아야 하는 컴포넌트입니다. press 상호작용에 관한 기능을 제공하는 컴포넌트이기 때문에 적절히 커스텀해서 버튼 등의 기능을 대신할 수 있습니다. (RN 기본 컴포넌트 Button 컴포넌트는 너무 빈약합니다.) 구성 그러나 Pressable을 재사용 가능한 버튼으로 바로 사용하기에는 난감한 문제들이 있습니다. 버튼 뿐만 아니라 기타 press event에도 대응하기 위해(버튼 그 이상의 목적으로 광범위한 용도를 위해) 만들어졌기 때문입니다. import React from "react"; import { Pressable, Text } from "react-native"; const ButtonCustom = ({ onPress, text, t..

앱 내 웹뷰를 이식하려고 했습니다. 웹뷰를 사용하기 위해 react-native-webview 라이브러리를 사용하려 했으나.. 안드로이드 플랫폼에서 정상적으로 출력이 되지 않았습니다. 빈 공간만 출력되었습니다. IOS 플랫폼에선 정상적으로 원하는 웹뷰가 출력되었습니다. 안드로이드 플랫폼에서만 발생하는 문제였습니다. 깃허브 issue 항목에 비슷한 문제에 대한 해결 방법을 찾을 수 있었습니다. 상위 컴포넌트 없이 리턴 View 나 ScrollView 같은 상위 컴포넌트가 존재할 때 리턴하는 경우 발생하는 문제였습니다. 잘못된 예) return ( ); 올바른 예) return ; 참고 : react-native-webview/issues/1426#issuecomment-1207378759 White bla..

debug 빌드에서 잘 기능하는 구글 소셜 로그인이 동작하지 않아 플레이 스토어 심사에서 승인받지 못했습니다. 찾아보니 앱 서명 인증서 SHA-1 키를 파이어베이스 콘솔에 추가해야 한다고 합니다. (디버그 환경에서는 상관이 없으니) 귀찮다고 추가 안했던 기억이 나네요... SHA-1 키 복사 구글 플레이 콘솔 -> 앱 선택 -> 설정 -> 앱 무결성 -> 앱 서명에서 앱 서명 인증서(SHA-1) 지문을 복사합니다. 파이어베이스 콘솔 적용 파이어베이스 콘솔 -> 프로젝트 선택 -> 프로젝트 설정 -> 디지털 지문 추가를 클릭합니다. 복사한 SHA-1 키를 붙여넣은 후 저장합니다. (선택) Release 빌드 SHA-1키 콘솔에 적용하기 구글 로그인이 Release 빌드에서도 정상적으로 기능하도록 Relea..

앱 미리보기에 업로드 하려는데 업로드가 되지 않았습니다. 가끔 웹 클라이언트가 먹통이 되는데요, 이 문제를 Appstore connect API를 활용해 해결해보겠습니다. API 키 생성 Appstore connect -> 사용자 및 엑세스 -> 키 에 들어가서 새로운 키를 생성합니다. API키를 생성했으면 목록 우측에 API 키 다운로드 링크를 통해 API 키를 다운로드합니다. 생성한 API키는 한번만 다운로드 가능합니다. Ruby script 작성 터미널을 열어 다음과 같이 루비스크립트를 작성합니다. ISSUER_ID, iss, KEY_ID, kid 를 올바는 값으로 바꿔주세요. AuthKey_XXXXXX.p8 는 다운로드한 API 키 파일 명으로 바꾸어 주세요. 만료일(exp)을 늘려 주는 게 좋습..