My Boundary As Much As I Experienced

무책임한 React Native 팀 녀석들이 flipper를 deprecated시켜버린 다음에 몇 가지 고질적인 문제가 발생한다.xcode는 최신인 상황에서 RN 0.74 출시 이전에 만들어놓은 프로젝트를 실행하면 flipper 관련 에러가 꼭 발생한다는 것이다. 그 결과 flipper가 초기세팅에 기본적으로 들어있던 시절의 프로젝트를 다룰 때podfile에서 flipper 관련 로직을 제거해야되는 지겹고도 시간 아까운 일을 할 수 밖에 없게 만들었다. 그냥 있는거 잘 쓰지 왠 새로운 디버거를 만든답시고 flipper를 deprecated 시킨진 몰겠다.하여튼 flipper를 안 쓰려면 아래처럼 해주면 된다. gpt가 짜준 코드이다. ios/podfile 수정# Resolve react_native_po..

스타일 객체 props 활용하는 방법React Native에서는 스타일을 정의하고 이를 컴포넌트에 전달하는 방법이 여러 가지 있다. 스타일을 정의할 때, StyleSheet.create를 사용하여 스타일 객체를 생성하는 방법이 대표적인데, 이를 단순히 선언한 페이지에서만 쓰는게 아니라, prop으로 하위 컴포넌트에 내려줄수도 있다. 이때 Props의 타입으로서 StyleProp를 많이 쓰게 된다.StyleProps, StyleProps, StyleProps 등등. style들을 여러 개 담아 배열로 prop화할 수 있는데 이땐 StyleProps 이런 식으로도 활용 가능하다.. 사용 예시:import React from 'react';import { View, Text, StyleSheet, ViewSt..

스크롤이 있는 화면을 만들 때 무엇을 써야하는가?아래처럼 리엑트 네이티브로 스크롤 뷰를 만들 때 어떤 컴포넌트를 써야될까?물론 처음 생각나는 건 ScrollView이다. 그러나 스크롤뷰의 큰 단점이 있는데, 뷰포트에 안 보이는 것까지 모두 다 렌더링 하는 컴포넌트라는 것이다.그래서 서버에서 데이터를 몇십개를 가져오거나, 무한 스크롤로 계속 추가된다면 성능 상으로 매우 안 좋아진다.   FlatList가 더 나은 점이를 보완하는게 FlatList이다. flatList를 쓰면 뷰포트 내에 있는 컴포넌트만 보이게 된다.React Windowing 기법이 적용되었다고 보면 되려나..? 최적화가 더욱 잘 된 느낌이다.  FlatList 사용법을 알아보기 전에 일단 ScrollView로 구현한 것을 보고가자.일반적..

ios 시뮬레이터를 킬 때 위와 같은 에러가 난다면 십중팔구 Xcode에 뭔가 에러가 있는 것이다.왠지는 모르겠지만 이럴 땐 캐시만 비워주면 다시 잘 실행된다. (왜지..) 구글링 결과, 바탕화면 좌측 상단부 애플 아이콘을 클릭하고 이 Mac에 관하여 > 저장 공간 > 관리 > 개발자 > xcode 프로젝트 빌드 파일 > xcode 캐시 삭제를 하면 된다고 한다. 그러나 터미널에서 그냥 아래 코드를 치면 Xcode경로에 있는 캐시를 삭제해줘서 해결되니 간편하다. rm -rf ~/Library/Developer/Xcode/DerivedData/*rm -rf ~/Library/Caches/com.apple.dt.Xcode/*

React Native Config란?React Native Config는 React Native 애플리케이션에서 환경 변수를 관리하는 라이브러리이다. 이 라이브러리를 사용하면, 앱의 설정값들을 별도의 환경 파일에 정의하고, 이를 React Native 코드와 네이티브 코드(Android 및 iOS)에서 쉽게 사용할 수 있다. 이를 통해 개발 환경, 스테이징 환경, 프로덕션 환경 등 다양한 환경에서 서로 다른 설정값을 사용할 수 있다. 왜 쓰나? 그냥 .env파일을 쓰면 안 되나?장점 1. 네이티브 환경과의 통합리액트 네이티브 앱은 자바스크립트 코드뿐만 아니라 네이티브 코드(iOS와 Android)에서도 환경 변수를 사용할 필요가 있다..env 파일을 직접 사용하는 경우, 이를 네이티브 환경에 전달하는 ..

1. 타입으로 네비게이터의 타입을 지정해줘야 한다. (패러미터를 미리 설정)네비게이터에는 BottomTabNavigator와 StackNavigator가 있다.바텀탭은 쉽게 말하면 앱 아래 있는 바텀 네비게이션으로 이동할 수 있는 루트단인 것이다. stack은 말 그대로 depth가 계속 진행될수록 쌓이고 쌓이는 구조이다.아래처럼 초록 페이지에서 액션을 일으켜 다른 페이지를 키면 다른 페이지가 overlay되어 나오고,뒤로가기를 누르면 위에 쌓인 페이지가 pop되면서 사라지고 아래 포개어져 있던 페이지가 나오는 구조이다. 이때 전 페이지의 state나 진행상태등은 (웹과 달리) 모두 살아있다!모바일에서 페이지의 이동이란, stack에 쌓이는 스크린이라는 것을 기억하자.하여튼 이 스크린들을 관리하는 Nav..

리액트 네이티브에서 주로 쓰는 router은 React Navigation이다.React Navigation으로 다른 페이지로 이동하는 방법을 알아보고,추가로 스크롤을 원하는 곳으로 내리는 방법을 알아보자 Navigating 하는 법 간단하다. Navigation을 import해서 navigation 객체를 만들어준다.import { useNavigation } from '@react-navigation/native';const navigation = useNavigation(); 핸들러를 만들고 거기서 navigation의 navigate 메소드를 활용해서 가고 싶은 곳으로 가게 하라.그런데 이때 주의해야될게 있다. 당신의 프로젝트 구조가 어떻게 될지는 모르겠는데,보통 모바일 앱은 BottomTab들이..

리액트네이티브로 개발한 것을 구글플레이 혹은 앱스토어에 배포하는 과정을 정리해보겠다.이 문서에서 설명하는 과정은 아래와 같다. 1. 안드로이드 스튜디오 빌드2. 구글 플레이 콘솔 접속 후 내부테스트 배포3. XCode 빌드4. 애플 스토어 커넥트 접속 후 내부테스트 배포 *바로 출시 심사할 사람은 바로 출시 심사해도 되지만 팀의 내부 테스트를 거쳐야되는 기준으로 작성하였다. Android 빌드버전 수정android/app/build.gradle 파일에서 버전 수정android { ... defaultConfig { ... versionCode  빌드안드로이드 빌드 클린 후 AAB 빌드 실행cd android./gradlew clean./gradlew bundle..

React Navigation이란? (+세팅법)React Navigation은 React Router Dom의 RN버전이다. (웹환경과의 차이가 좀 있긴하다.)세팅법은 공식문서에 보면 나와있다. React Native CLI 기준으로 세팅하고 싶은 분들은 아래 명령어를 치신 뒤npm install @react-navigation/native NavigationContainer를 App.tsx에 import하여 당신의 앱을 두르면 된다.import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';export default function App() { return ( {/* Rest of yo..

공부하게 된 계기사수님의 코드도 그렇고 지금 듣는 RN강의도 그렇고 핸들러를 만들 때 useCallback을 많이 쓴다. 기존에 내가 알고있던 상식으론 useCallback은 컴포넌트가 재렌더되어도함수들이 재생성 되지 않게 도와주는 훅으로 알고있다. 뭐.. 쓰면 좋겠지. 그러나 웹개발에서 굳이 모든 핸들러에다가 useCallback을 두르진 않는다.렌더가 너무 빈번한게 아니라면 함수를 메모이제이션 해놓는 메모리가 더 손해라고 보기도 하니까. 그런데 왜 React Native 앱개발에선 useCallback을 되게 많이 쓸까?그게 궁금해서 찾아보게 되었다.일단 useCallback을 일반적으로 왜 쓰는지부터 알아보자. useCallback을 쓰는 경우컴포넌트 리렌더링 최적화: 콜백 함수를 useCallb..