웹 프론트엔드/React-Native14 React Native : 다른 Screen 이동후 돌아왔을 때 새로고침 방법 (stack screen / tab screen) React Navigation 사용 시 원래 화면으로 돌아왔을 때 새로고침 React Navigation의 Stack Navigator 이나 BottomTab Navigator을 통해 화면이동을 하고 난 뒤 원래 화면으로 돌아왔을 때 원래 Screen 의 화면을 새로고침해야 할 때가 있습니다. 하지만 React Navigation의 Navigator를 통해 화면이동을 할때, 기존의 상태를 저장하기 때문에 다시 원래 화면으로 돌아온다고 해도 화면 컴포넌트의 라이프사이클이 다시 수행되지 않아서 새로고침이 되지 않는 문제가 있습니다. 저도 개발을 하던 도중에 원래 Screen으로 돌아올 때마다, AsyncStorage에서 데이터를 갱신해야 하는 상황이 생겼었는데요, 이러한 경우에 어떻게 해결하면 좋을지 한번 .. 2023. 8. 30. React Native: 안드로이드 빌드시 mergeLibDexDebug 개요 React Native를 통해 안드로이드 빌드를 진행할때 mergeLibDexDebug 에러가 발생하였습니다. mergeLibDexDebug 에러가 무엇인지 알아보고 해결법을 간단히 공유해보겠습니다. 문제점 여러가지 문제가 있지만 보통 아래와 같은 이유로 발생한다고 합니다. Dex 메서드 제한 초과 => 의존성 패키지들에서 사용하는 메서드들이 너무 많을때 의존성 충돌 => 다양한 라이브러리와 의존성 충돌. 즉 비슷한 라이브리를 사용하는 경우에 Dex 파일에 중복된 메서드 포함됨. 멀티덱스 설정 문제 => Gradle 플러그인이 여러 Dex파일을 생성하고 하나의 Dex파일로 병합하는 설정에서 문제 발생 해결법 먼저 multiDex 설정상 문제가 발생할 가능성이 있기 때문에 아래와 같이 적용해보았습니다.. 2023. 8. 2. React Native : Animated, Interpolation를 이용하여 Loading Spinner 만들기 React Native를 공부하던 중 Loading Spinner가 필요하여서 구현 방법에 대해 조사를 해보았습니다. React Native에서는 기본적으로 제공하는 Loading Spinner인 ActivityIndicator라는 컴포넌트가 있기는 합니다. ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 하지만 React Native에서도 간단한 애니메이션을 구현해보고 이해해 보기 위해서 React Native에서 제공하는 Animated를 이용하여 한번 Loading Spinner를 만들어보도록 하겠습니다. 먼저 간단하게 React Native의 Animated에 대해 알아보도록 하겠습니다. .. 2023. 5. 1. React Native : 빈 화면 터치시 Keyboard 숨기기 React Native를 개발하던 중에 TextInput을 활용하여 Keyboard로 유저의 입력을 받는 부분을 구현하였습니다. 그런데, Keyboard를 띄우고 난 뒤에 빈 화면을 눌렀을때 Keyboard를 숨기게 하는 방법을 몰라서 조금 검색을 해보았는데요, 이에 대해서 오늘은 유저가 빈 화면을 터치시 Keyboard를 숨기는 방법에 대해 간단히 알아보도록 하겠습니다. TouchableWidhtoutFeedback 해결법은 TouchableWithoutFeedback 이라는 React Native에서 제공하는 Component를 사용하면 쉽게 해결할 수 있습니다. TouchableWithoutFeedback · React Native If you're looking for a more extensi.. 2023. 4. 19. React Native : Custom Font 설정하기 사이드 프로젝트를 개발하던 중에 기본적으로 제공하는 Font가 아닌 Custom Font를 적용해야 할 일이 생겼습니다. 한번 이번 기회에 까먹지 않기 위해서 React Native 에서 Custom Font를 설정하는 방법에 대해서 정리해 보도록 하겠습니다. Android에서 설정하기 안드로이드에서 설정은 생각보다 간단합니다. 1) android/app/src/main/assets/fonts 폴더를 생성합니다. 2) 생성한 폴더에 폰트파일들을 추가합니다. 3) 이후 안드로이드를 다시 빌드합니다. (npx react-native run-android) IOS에서 설정하기 1) ios 폴더에 fonts 폴더를 생성합니다. 이후 해당 폴더에 폴더에 폰트 파일들을 저장해놓습니다. 2) xcode상에서는 fon.. 2023. 3. 23. React-Native: 안드로이드 빌드 및 배포하기 React-Native로 몇 개의 앱을 만들어 보았는데 항상 안드로이드 배포를 할 때마다 찾아보고 고생을 많이 한 것 같습니다. 그래서 간단하게 안드로이드 배포시 꼭 필요한 부분만 정리해서 포스팅을 해보았습니다. Release 빌드 준비해야할 것 1. Icon 준비하기 2. 구글 개발자 등록하기 3. keystore 발급하기 4. android/gradle.properties 편집하기 5. release apk 만들기 6. Play Store에 앱 등록하기 1. Icon 준비하기 먼저 기본적으로 안드로이드 앱을 만들고 플레이스토어에 등록하기 위해 준비해야 할 이미지는 아래와 같습니다. 최소 2개의 스크린샷 (측면 최소 320픽셀, 최대 3840픽셀의 JPG 또는 24비트의 PNG) 그래픽 이미지 (102.. 2022. 7. 12. React Native : 절대 경로 설정하기 (+ 타입스트립트) React Native를 개발하다 보면 절대 경로 설정을 하고 싶을 때가 있습니다. 이때 헤메시는 분들을 위해 간단하게 정리해보겠습니다. 1. babel-plugin-module-resolver 설치하기 먼저 아래와 같은 babel-plugin-module-resolver를 설치하여 줍니다. npm i babel-plugin-module-resolver 2. babel.config.js에서 alias 설정하기 babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일입니다. 기본적으로 React-Native 프로젝트는 다음과 같이 babel.config.js가 구성되어 있습니다. module.exports = { presets: ['module:metro-react-.. 2022. 2. 1. React Native : 텍스트가 넘칠때 사용하면 좋은 flexShrink React Native에서 텍스트가 범위 밖을 넘어가서 고생을 했습니다. Flex 박스 레이아웃을 조금 공부해보니 flex-shink라는 좋은 속성이 있는 것을 알게 되어서 한번 적용해봤습니다. Flex 박스 레이아웃의 flex-shrink flex-shrink는 Flex 부모 레이아웃의 자식들의 영역에 대해서 자식 Box들의 넘치는 부분을 없애줄 수 있는 속성입니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink flex-shrink - CSS: Cascading Style Sheets | MDN flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 .. 2021. 12. 23. React Native: IOS 14에서 이미지 리소스 패치 안되는 문제 해결 React Native를 개발하던중에 IOS14 에뮬레이터에서 이미지 리소스가 패치가 안되는 문제가 발생했습니다. 문제 원인 https://jeffgukang.github.io/react-native-tutorial/docs/tips/image-error-ios14.html Image is not loading(iOS14) React Native Tutorial For Beginners - 2019 jeffgukang.github.io 문제점을 찾던중에 React Native에 대한 오픈소스 튜토리얼 페이지에서 원인을 찾을 수 있었습니다. 저는 React-Native 버전 0.61.5를 사용하고 있었기 때문에 위 문제가 나타난 것이었습니다. 해결법 해결법은 의외로 간단합니다. npm i -g patch-.. 2021. 12. 14. React-Native : toast 메세지 구현하기 (react-native-easy-toast) React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다. Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요 React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다. react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다. react-native-easy-toast 설치 아래와 같이 설치합니다. npm i --save react-native-easy-toast react-native-easy-toast 사용법 사용법은 무척 간단합니다. 요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다. 먼저 Toast에 대한 값.. 2021. 6. 14. 이전 1 2 다음
