My Boundary As Much As I Experienced

레이아웃 이벤트(Layout Events)레이아웃이 바뀔 때 발생한다. 특히 컴포넌트가 처음 화면에 렌더링될 때처음으로 컴포넌트가 마운트되어 레이아웃 좌표가 생길 때 발생한다.그 외 컴포넌트의 크기나 위치가 변경될 때,화면 회전, 부모 레이아웃 변경, 스타일 변경 등으로 인해레이아웃이 다시 계산될 때 트리거된다.onLayout: 요소가 화면에 배치될 때 호출.레이아웃 이벤트 객체 타입: LayoutChangeEventnativeEvent:layout:x, y: 요소가 화면에 배치된 좌표.width, height: 요소의 크기.import React from 'react';import { View, Text } from 'react-native';const LayoutEventExample = () => ..

구현해야되는 기능:일기주제 페이지에서 스크롤을 내릴 때 배너를 숨겨야한다.그러나 (한참을 내렸어도) 살짝만 올리면 배너가 다시 노출되어야한다.    구현 아이디어:스크롤 애니메이션을 탐지하여스크롤을 아래로 내릴 때 헤더 높이만큼 배너를 올려주고,올릴 때 헤더 높이만큼 배너 높이만큼 배너를 내려준다. reanimated를 쓰는 이유? 나는 이 기능을 구현하기 위해 리액트네이티브에서 주로 쓰이는 애니메이션 라이브러리인ReactNative-reanimated를 사용하였다. RN에서 기본적으로 제공하는 animated API도 있긴하나이는 자바스크립트 모듈로 네이티브 모듈을 조작하는거기 때문에성능이 좋지않다고 한다. 앱에서 처리하고 있는 비즈니스 로직도 많은데애니메이션까지 자바스크립트 모듈로 처리해버리면앱의 메..

코드 푸시란?iOS/Android 심사를 거치지 않고 앱에 변경사항을 배포할 수 있는 기능이다.특히 RN의 JavaScript 및 이미지 리소스를 원격으로 업데이트해주는거라 보면 된다.     왜 쓰게 됐나? (내가 업데이트 해야됐던 것)최근 ANTTIME의 SHOP페이지 UI가 전면 개편되었다.(살 수 있는 항목이 늘었고, 아이템 잔량을 체크할 수 있게 되었고,긴 스크롤로 아이템들을 나열했던 방식을 탭으로 정리하였다.) 그런데 바뀐 Daily Free Box UI가 Clickable하지 않아보인다는 내부 의견이 나왔고,이 영역에 액션버튼을 달아주는 UI 패치를 진행하게 되었다. 이렇게 광고보고 무료로 얻을 수 있다는 것을 강조해주며,광고 10번 다 채웠을 시 24H Miner를 수령하세요가 나오고,수령..

오늘 신규앱을 내부 테스트로 임시 출시해봤는데.. 진짜 우당탕탕 문제의 연속이었다.대충 어떤 이슈였고 어떻게 해결했는지를 나열식으로 정리해본다.일단 일어난 현상만을 기록하는 느낌이고, 이 이슈들에 대한 깊은 이해도는 아직 없다는 점 참고 바란다. iOS 빌드 후 Applestore connect에 Distribution 시 겪은 에러× Asset validation failedInvalid MinimumOSVersion. Apps that only support 64-bit devices must specify a deployment target of 8.0 or later. MinimumOSVersion in 'todaysdiary.app/Frameworks/hermes.framework' is ".(..

많은 서비스들이 웹뷰를 쓴다. 특히 껍데기만 네이티브나 크로스플랫폼앱으로 만들고,안의 내용물들은 모두 웹뷰를 쓰기도 한다. 이런 경우 하이브리드앱이라고 부른다.하여튼 수많은 서비스들이 (그 양이 많든 적든) 일정부분 웹뷰를 활용해서 커버하는 부분이 있다.왜 이렇게 다양하게 웹뷰를 활용할까? 하이브리드 앱의 경우: 전체 서비스를 웹뷰로.1. 반응형 웹개발 내용을 앱으로 바로 포팅 가능요새 거의 모든 웹사이트들은 모바일웹 서비스를 따로두기보단 '반응형 웹'으로 여러 해상도를 커버한다.그런데 이를 모바일 앱에 바로 활용한다면? 그냥 앱개발을 따로 하지 않아도 된다는 엄청난 장점이 생긴다. 2. 웹 개발자 돌려쓰기 가능iOS/Android 개발자들 한 무더기 뽑고 웹개발자들도 뽑고... 이러지 않아도 된다.소수..

분명 네비게이션 버튼인데 특이한 동작이 나오는 커스텀 버튼들이 있다?!바텀네비게이션 버튼 중에 일반적인 페이지가 아니라 모달이 나오게 하는 페이지들이 존재한다.  각설하고 이걸 어떻게 구현하는가?1. 바텀탭 네비게이터에 새로운 페이지 추가별거 없다. 새로운 Screen컴포넌트를 네비게이터에 일단 추가한다.ToAddNewDiary라는 컴포넌트를 추가했다. return ( , }} /> // ... );};  2. Null을 반환하는 컴포넌트를 생성하고 만든 페이지에 준다.우리가 만드는건 실제 탭전환을 일으키지 않는다. 탭이 전환되는게 아니라원래 있던 탭에 그대로 있으면서 그 위로 바텀 모달 형식의 페이지가 나와야 하는 것이다.이를 위해 ..

문제 상황만약 리액트네비게이션을 라우터로 사용하면실제 Screen과 header는 App.tsx에서 분리되어 사용되고 있을 것이다. 아래처럼. , // 헤더 컴포넌트 }} /> 그런데 어떤 스크린에서는 스크린 내의 상태에 따라 헤더의 상태도 변하게 해야될 때가 있다.이럴 경우에 어떻게 조작해야되나? 이들의 공통 상위컴포넌트인 App.tsx에 state들을 위치시켜야할까?좋은 방법은 아닐 것이다. 그렇게 거추장스럽게 App.tsx에 상태들을 많이 만들어서 props drilling시키는건 좋지 않다.. 이때 몇 가지 방법이 대표적으로 떠오르는데 바로,- 1.  React Context- 2. 전역상태관리 라이브러리- 3. navigation.setOptions이다. navi..

이번에 회사에서 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나 여러 상태들이 보존된다! 이를 리액트네이티브에서 구현할 수 있는게 '스택' 컴포넌트인 것이다...