My Boundary As Much As I Experienced

이번에 회사에서 RN으로 초기앱을 세팅부터 다시 해볼 수 있는 기회가 생겼다.돈 되보이는 것들은 모두 한 번 만들어보자는 싸장님의 방향성 덕분에 앞으로도 초기세팅을 해볼 일이 많아질거 같다.. RN은 React와 거의 비슷한 구조로 사용할 수 있지만 가장 차이나는 부분은 input의 활용 부분인 거 같다.이번에 초기세팅하면서 배운 부분들을 정리해보려 한다. 1. TextInput웹에서 쓰는 input은 RN에서 TextInput 컴포넌트로 사용할 수 있다. 웹과 구별되는 속성: editable:  - 사용자 입력을 받을 수 있는지 없는지 여부를 설정한다. (boolean)type:  - 텍스트에 입력되는 정보들의 타입을 결정한다. 기본은 "text" ("text" | "number" | "password..

navigation객체와 useNavigation훅리액트 네비게이션에서 다른 페이지로 네비게이션을 하려할 때 navigation을 이용해야된다.그런데 navigation을 생성할 수 있는 방법은 2개가 있다.navigation prop와 useNavigation훅을 이용하는 방법이다. 1. 페이지 컴포넌트에서 prop으로 제공되는 navigation객체 꺼내기navigation 객체는 일반적으로 스크린 컴포넌트의 props로 전달된다. '페이지 컴포넌트'라면 언제 어느 곳에서든 꺼내서 사용할 수 있다.(페이지 컴포넌트의 기준이 뭐냐고? Stack.Screen에 제공한 컴포넌트는 페이지 컴포넌트로 분류된다.)function HomeScreen({ navigation }) { return ( ..

현재 상황회사에서 오늘의 일기라는 신규 서비스를 개발 중이다.'앤트타임' 개발은 이미 다 짜여진 구조 안에 조금씩 추가하는 느낌이었는데이번 제품은 초기세팅, 라우팅 구조부터 내가 손수 짜는거라 배우는게 많다.회사에서 돈 받으면서 독서실 공부하는 느낌이어서 기분 좋다ㅎㅎ.. 사수는 양자 시뮬레이터 정부사업 하느라 바빠서 자사 서비스는 다 내가 맡게되네? 오히려 좋아.. 리액트 네비게이션의 Stack개념이전 포스팅에서도 몇 번 얘기했다. 웹에선 한 페이지에서 다른 페이지로 넘어갈 때 모든 상태가 사라지지만모바일에선 어떤 페이지로 이동할 때 기존 화면 위에 새로운 탭이 쌓인다.그래서 아래에 있는 페이지의 state나 여러 상태들이 보존된다! 이를 리액트네이티브에서 구현할 수 있는게 '스택' 컴포넌트인 것이다...

iOS 시뮬레이터 기기 바꾸기file - open simulator - 기기선택으로 바꾸면 된다. 애물단지가 된 FlipperKit 제거하기최근 새로운 디버거가 나오면서 Flipper가 deprecated되었다.그래서 기존 RN프로젝트에 있는 flipper를 제거하지 않으면최신 xcode에서 실행할 때 에러가 나게 되는데... 이를 해결하기 위해서 podfile에서 flipper관련 로직을 없애면 된다.나는 yaml파일에서 어디가 flipper 관련 코드인지 알아보기가 귀찮아서지피티에게 podfile 통째로 주고 알아서 flipper 로직 없애달라고 해봤다.그 결과 에러없이 잘 작동되긴 한다. 아래는 지피티가 고친 podfile 전문이다.# Resolve react_native_pods.rb with n..

무책임한 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..