JIGGAG

5월 한달동안 로그

2022년 6월 1일

읽어보았던

  • 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/31

feature flag

  • 처음 들어보았는데, 찾아보니 이름은 모른채 사용하고 있었을 수 있겠다 싶다
  • 특정 기능을 특정하여 지원하거나 테스트할 수 있도록 하는 것인데
  • 어떻게 보면 ABCD테스트라고 볼 수 있을 것 같기도
  • 어쨌든 프로덕션에 포함되어있는 기능인데, 이를 어떻게 특정한 사용자에게만 지원하도록 분리 할 수 있을까
  • 앱에서 사용 예시를 생각하다가 떠오른 기억이 심사를 위한 로그인 기능 추가했던 것이다
    • 서드파티 로그인만 구현된 상황에서 심사를 위한 환경 설정된 유저 정보로 로그인하기 위해 심사용 feature flag를 구현한 것
    • 심사 버전에 따라 로그인 feature flag를 설정하고 그 외에는 꺼두는 것이였다
  • 근데 로그인 기능처럼 아예 분리가 간단한 것은 문제가 되지 않을 것 같은데,,,
  • 핵심 기능에서 ABCD 분리되어야한다면,,,, 모든 케이스를 구현해야하는 것 아닌가!?
    • 이 기능을 지원하지 않는 경우에 대한 화면, 플로우
    • 지원하는 경우에 대한 후속 처리,,,

5/22 ~ 5/28

react/jsx-no-leaked-render

  • react/jsx-no-leaked-render
  • 이 lint rule은 정말 유용할 것 같다
  • 신나게 개발하다가 놓친 이런 사소한 것이 갑자기 터진다... 💥
  • 도움 받을 수 있다면 좋으니 써보는 것으로

fabric + 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/21

UI thread

  • ui, js 스레드 분리했는데도 느리다
  • InteractionManager로 해봐야지
  • worklet에서 runOnJS를 쓰게 되면 sharedValue의 업데이트를 보장하지 못했던 이유가 이건가
    • runOnJS로 js 스레드에서 실행하도록 했지만 그 안에서 업데이트한 sharedValue는 결국 worklet이 이벤트 루프 마지막이 되어서야 ui 스레드로 보내니깐 보장할 수 없는 듯
    • 그럼 모든 함수를 worklet으로 만들고 오히려 runOnUI로 호출하면 될까?
  • 이런 것들을 검증 해보기 위해서는 뒤죽박죽 되어있는 js-ui를 정리해야함...
  • 추가로 ref는 그냥 일반 useRef로 받아오고 있었는데, 이것 또한 useAnimatedRef로 처리하도록 하면 어떨까
  • (+ 정리하고 나니 확실히 ui 스레드에서만 동작하게 된 애니메이션들이 더 빨라졌다)
    • 아쉽게도 렌더 퍼포먼스는 엄청난 효과를 얻지 못했다...

fabric

5/8 ~ 5/14

flex*

  • 이런저런 곳에서 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기가가 넘는거지?????
    • 위의 블랙홀 덕분에!
    • 여기도 무한 증분 되었다
    • yarn cache clean 출발
    • 이 친구만 정리되면 좀 나아지려나...

UI component

  • 처음부터 분리하지 않고 네이티브에서 구현하고 완료되면 때내는 방법으로
  • 안드로이드 먼저 구현은 되었다..
    • activity > fragment 전달하는 과정이 당황스러웠지만...
  • 같은 방식으로 가면 되겠지 하면서 iOS도 그려넣는데
    • ReactProps 가져오는 방식이 안드로이드와 다르다
    • UIView를 띄우고 거기서 바로 props에 대한 setter를 넣어줘야하는데
    • 기존에 네이티브 모듈 구현했던 방식이 UIView > UIViewController 순서로 한번 래핑되어 있다보니
    • setter의 위치를 UIView에 설정해주지 못해 시간이 걸렸다...
    • 그냥 UIViewController 걷어내고 바로 UIView로 띄우고 setter 설정!
  • RN 문서에 UI Component 설명이 잘 되어있는듯 하지만 잘 안되서
  • 그냥 RN 깃헙에서 구현된 코드를 따라가는게 더 도움이 된 것 같다

5/1 ~ 5/7

UI component

  • 안드로이드부터 다시 마음 가다듬고 시도하는데
    • 안되는중!

fastlane + 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으로 돌리는게 이슈가 있는듯