읽어보았던
Render-as-You-Fetch
화면에 데이터가 보여지기까지 API 응답을 기다리는 것을 스켈레톤으로 처리하고 있다
같은 역할을 Suspense로 할 수 있겠지만 여기서 주는 의미는 크지 않은 것 같고
render 중간에 fetch 하거나, fetch가 완료되면 render 하거나
화면에 온전히 보여지기까지 최적화
사용자 경험에 가장 큰 영향력을 주지 않을까
useEffect에서 비동기 처리를 하도록 되어있기는 한데 (Fetch on Render)
초기 데이터 상태로 그려두고 데이터가 오면 업데이트
라이프사이클 한번 시작되고 fetch를 한다는 차이가 있는듯
데이터가 오는대로 화면에 그리는 방법도 있으나 (Fetch then Render)
이 또한 화면에 그려줄 데이터가 오기 전까지 아무것도 그릴 수 없다
그럼 결국 데이터가 없는 상태에서도 화면에 보여져야하는 skeleton, fallback 처리가 필요한데
(Fetch on Render with Suspense, Render as You Fetch with Suspense)
맨처음에 렌더를 먼저 시키고 fetch 하느냐 바로 fetch 시작하느냐의 차이?
사용해온 방식은 Fetch on Render with Suspense 인듯
뭐라고 하는거지 다시 정리 (참고 )
Fetch-on-render without Suspense
waterfall
render > fetch > render
컴포넌트 마운트 이후 데이터 요청하고 데이터 유무에 따라 렌더링 시키므로
Fetch-then-render without Suspense
fetch > render
비동기 처리가 완로되면 컴포넌트가 그제서야 렌더
만약 비동기 계산이 오래 걸리면 화면에 아무것도 보이지 않는 시점이 길어지는 문제
Render-as-you-fetch with Suspense
suspense render > fetch > render
Fetch-then-render without Suspense와 유사하지만비동기 데이터 요청이 완료되기 전까지 Suspense가 미리 보여진다는 것 그리고 데이터가 오면 렌더링 된다는 것
As soon as any component receives its complete data, it gets rendered regardless of whether the other component’s request is resolved.
비동기처리를 어느 시점에 하느냐
추가: 상위 컴포넌트에서 미리 fetch해서 데이터만 넘기도록...
useEffect에서 마운트 후 fetch 그리고 다시 리렌더 되는 것을미리 상위 컴포넌트에서 prefetch하고 넘겨주도록하여 마운트 시점에 무언가를 보여줄 수 있도록 타이밍을 당기는 것인데
음.............. 과연 렌더링 리소스가 얼마나 줄어들까
옆길로 자꾸 빠져나가는 것 같네🤔
사용자에게 얼마나 유의미한 데이터를 빠르게 보여주느냐의 목적인데
마운트 전에 데이터가 확실하게 보장된다면 가장 좋을텐데
5/29 ~ 5/31feature flag
처음 들어보았는데, 찾아보니 이름은 모른채 사용하고 있었을 수 있겠다 싶다
특정 기능을 특정하여 지원하거나 테스트할 수 있도록 하는 것인데
어떻게 보면 ABCD테스트라고 볼 수 있을 것 같기도
어쨌든 프로덕션에 포함되어있는 기능인데, 이를 어떻게 특정한 사용자에게만 지원하도록 분리 할 수 있을까
앱에서 사용 예시를 생각하다가 떠오른 기억이 심사를 위한 로그인 기능 추가했던 것이다
서드파티 로그인만 구현된 상황에서 심사를 위한 환경 설정된 유저 정보로 로그인하기 위해 심사용 feature flag를 구현한 것
심사 버전에 따라 로그인 feature flag를 설정하고 그 외에는 꺼두는 것이였다
근데 로그인 기능처럼 아예 분리가 간단한 것은 문제가 되지 않을 것 같은데,,,
핵심 기능에서 ABCD 분리되어야한다면,,,, 모든 케이스를 구현해야하는 것 아닌가!?
이 기능을 지원하지 않는 경우에 대한 화면, 플로우
지원하는 경우에 대한 후속 처리,,,
5/22 ~ 5/28react/jsx-no-leaked-renderfabric + RN
하나가 해결되면 하나가 말썽이다
왜 시작했을까 싶을 정도....
힘이 푹푹 빠진당
[!] Invalid 'Podfile' file: 859: unexpected token at 'Config Validation Error: "project.android.buildGradlePath" is not allowed
react-native.config.js 에서 설정한 옵션을 못읽길래 지워봤더니
Error: Cannot find module 'mkdirp'이정도면 cli가 잘못했다는 느낌으로 RN 버전 올라갔나 확인해보니 역시나 올라갔네...
불안정한 버전을 계속 시도하느니 지금 적용된 RN 0.68 + fabric 에서 다른 이슈를 확인하는게 더 낫겠다는 생각
문제의 그 이슈 fastlane + fabric 조합
🙈
gradle만 돌리면 빌드는 되는데 fastlane이 문제라고?
gradle(task: "assembleRelease") 이건 되면서gradle(task: "clean assembleRelease") 이건 안되는건clean이 무언가 잘못했다
fastlane gradle 문서 에 tasks 라는게 있는데,,,
gradle(tasks: ["clean", "assembleRelease"]) 이것도 되지 않는다gradle(task: "clean") 그렇지만 이건 된다고?gradle(task: "assembleRelease") + gradle(task: "clean") 로 가본다된다고..??? 🙈
그럼 이제 다시 iOS fastlane으로 넘어가본다
error: Provisioning profile "RNStarter Development Provisioning" doesn't include signing certificate ...저번에 정리한 것 같은데 또 나온다고?
키체인 확인해보니 만료되었네.. ㅠㅠ
다음 문제 발생
/bin/sh: -c: line 0: syntax error near unexpected token '('왠지 RNStarter (Staging) 앱 이름 ( 파싱이 안되는 것 아닌가
스키마 변경했더니 왜 또 문제!
iOS도 fabric 적용하고 한번도 성공한 적이 없구나.. ㅠㅠ
위에서 변경된 iOS Provisioning로 다시 정리해주었다
그 외에 로컬에서도 iOS fastlane 빌드가 안되고 있는데, 액션에서도 여전하다
5/15 ~ 5/21UI thread
ui, js 스레드 분리했는데도 느리다
InteractionManager로 해봐야지
worklet에서 runOnJS를 쓰게 되면 sharedValue의 업데이트를 보장하지 못했던 이유가 이건가
runOnJS로 js 스레드에서 실행하도록 했지만 그 안에서 업데이트한 sharedValue는 결국 worklet이 이벤트 루프 마지막이 되어서야 ui 스레드로 보내니깐 보장할 수 없는 듯그럼 모든 함수를 worklet으로 만들고 오히려 runOnUI로 호출하면 될까?
이런 것들을 검증 해보기 위해서는 뒤죽박죽 되어있는 js-ui를 정리해야함...
추가로 ref는 그냥 일반 useRef로 받아오고 있었는데, 이것 또한 useAnimatedRef로 처리하도록 하면 어떨까
(+ 정리하고 나니 확실히 ui 스레드에서만 동작하게 된 애니메이션들이 더 빨라졌다)
아쉽게도 렌더 퍼포먼스는 엄청난 효과를 얻지 못했다...
fabric5/8 ~ 5/14flex*
이런저런 곳에서 flex를 잘 사용하는지를 중요하게 생각하는 것 같다
그 이유는 잘 사용하는 것은 어렵기 때문이다...
어렵다
단순히 flex 쓰면 끝나는게 아니다
참고: CSS Flex를 익혀보자
용량부족
맥북 용량이 부족하다
왜 ㅠㅠ
500기가뿐이지만 부족하면 안되는데?!
파일 정리하러 들어가보니 hermes 실행파일이 왜이렇게 많지?
⁉️ 블랙홀 node_modules
yarn add ../ 로 바로 설치하도록 했더니....node_modules/app/node_modules/app/node_modules/app/node_modules......끝나지 않는 뎁스
이것만으로 해결되지 않는 용량 부족...
Library/Caches/Yarn 이 친구는 왜 100기가가 넘는거지?????
UI component
처음부터 분리하지 않고 네이티브에서 구현하고 완료되면 때내는 방법으로
안드로이드 먼저 구현은 되었다..
activity > fragment 전달하는 과정이 당황스러웠지만...
같은 방식으로 가면 되겠지 하면서 iOS도 그려넣는데
ReactProps 가져오는 방식이 안드로이드와 다르다
UIView를 띄우고 거기서 바로 props에 대한 setter를 넣어줘야하는데
기존에 네이티브 모듈 구현했던 방식이 UIView > UIViewController 순서로 한번 래핑되어 있다보니
setter의 위치를 UIView에 설정해주지 못해 시간이 걸렸다...
그냥 UIViewController 걷어내고 바로 UIView로 띄우고 setter 설정!
RN 문서에 UI Component 설명이 잘 되어있는듯 하지만 잘 안되서 그냥 RN 깃헙에서 구현된 코드 를 따라가는게 더 도움이 된 것 같다
5/1 ~ 5/7UI componentfastlane + fabric
지난번에 이어서 아직도 fastlane + fabric 빌드를 성공하지 못했다
[CXX1405] error when building with ndkBuild using .../react-native/ReactAndroid/src/main/jni/react/jni/Android.mk: Build command failed.Android.mk, ndk 무언가가 잘못되었다
Android NDK: /ReactCommon/butter/Android.mk: Cannot find module with tag 'glog' in import path Are you sure your NDK_MODULE_PATH variable is properly defined ?
C++ 컴파일 오류 > 경로가 문제라는 이런저런 여러 글 그래서 이번에 fabric에서 추가된 Android.mk란 무언인가
ndk 빌드 파일
빌드 시스템의 소스 및 공유 라이브러리를 설명
프로젝트/모듈 설정 정의
그래서 이런저런 변수가 여럿 있는데 NDK_MODULE_PATH는 없네?!
ndk가 왜 !!! 😭
run android는 되는데 fastlane으로 돌리는게 이슈가 있는듯