My Boundary As Much As I Experienced

스타일 객체 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들이..

forwardRef란?챗지피티의 설명에 따르면, '자식 컴포넌트의 DOM 엘리먼트 또는 클래스 인스턴스에 접근할 수 있도록 하는 기능을 제공한다'라고 한다. 그런데 그냥 쉽게 말해서 '자식 컴포넌트에 ref를 props로 내려줘야'할 때 써야한다. 예를 들어 아래와 같은 경우, ref로 어떤 DOM 요소를 관찰하려고 하는데, 단순 jsx태그가 아니라컴포넌트인 경우 이렇게 ref를 내려줘야한다. 이때 ref라는 이름으로 내려주면 forwardRef를 써야한다는 경고가 나온다. props의 이름으로 아무거나 임의로 쓸 수 있는거 같지만, 'ref'같은 이름은 예약어로 forwardRef를 쓸때만 사용할 수 있는 것이다. 사용법부모 컴포넌트에서 ref를 만들어서 내려준다. (여기서 그냥 inputRef={in..

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

Next.js 12 Page Router의 커스텀 페이지 레이아웃(getLayout)을 사용하는 것을 보며JSX에 {...props} 식으로 모두 뿌려주는게 대강 모든 Props를 다시 주는것이겠거니하고 넘어갔다.그러나 현재 제대로 한 번 정리할 필요가 있겠다고 생각했다. 1. 하위 컴포넌트에게 객체 속성 전파아래 props라는 객체를 MyCompoent에 props로 넣는 예제이다.const props = { name: 'John', age: 30, location: 'New York'}; 위 코드는 아래 코드와 결과적으로 같다. 그래서 아래처럼 상위 컴포넌트에서 받은 props를 바로 자식 컴포넌트에 내려주는 방식으로 사용 가눙하다.interface MyProps { id: 101, clas..

타입스크립트 is란 무엇인가? API를 짜면서 try-catch문으로 에러처리를 할때 catch(error) { ... } 에서 error의 타입은 보통 unknown이다.이럴 땐 unknown 타입인 error객체에 제대로 된 타입을 찾아줘야한다.그런데 이런 상황에서 isAxiosError라는 함수를 만들어 타입 검사를 하는 예시 하나를 발견했다.import axios, { AxiosError } from 'axios';import { Alert } from 'react-native';// 타입 가드 함수function isAxiosError(error: any): error is AxiosError { return error.isAxiosError === true;}async function fet..