JIGGAG

2월 한달동안 로그

2022년 3월 1일

읽어보았던

2/27 ~ 2/28

라즈베리파이

  • 살렸다
  • 와이파이를 못잡아서 랜선 연결부터 다시 했다
  • 근데... ip가 변경되어버렸다
  • 디비 연결이... 도메인 연결이...
  • 안되고 있었는데 되네 🙈
  • 와이파이 채널이 변경되었는지 라즈베리가 와이파이를 잡지 못하고 있던건지 왜 연결이 끊긴건지 모르겠다
  • 다시 설정해주려고 wpa_supplicant 업데이트 했는데, 기존에 설정을 그대로 복사해서 들고 있었더니 탭으로 뎁스가 제대로 들어가지 않았던 것도 그동안 간단하게 해결하지 못한 이유 갖기도..!
  • 우선 탭 뎁스 설정하고 와이파이 채널 변경하는 것으로 해결했는데, 아무래도 뎁스가 문제였던듯!

다시 Starter

  • 왜 안드로이드 빌드가 죽나 봤더니
  • flipper 연결해둔게 문제
  • 왜지!
  • 여기 flipper 이슈가 따당
  • 릴리즈빌드에서는 당연히 flipper가 필요없으니 정상적으로 실행되는데...
  • 정말 알 수 없다

2/20 ~ 2/26

type-challenges

  • 드디어 시작했다
  • 타입을 제한해서 강제하기

리액트쿼리 디버거

  • 왜 query fetch만 하면 느리지?
  • 온갖 디버거가 퍼포먼스 잡아먹고 있었다

리액트쿼리

  • 지난달 벌써? (시작한 날짜를 보니 1/16)
  • 리액트쿼리와 한판 하면서 의식의 흐름을 정리해두고 있었는데
  • 내가 쓴 글을 다시 읽으면 더 헷갈려보이는 매직
  • 정리를 다시 해야겠다고 생각하고
  • 이런저런 바쁘다는 시간이 흘러 아직 마무리하지 못한 상태에서
  • 어느날 뜨끔하고 다가온 세미나
  • 세상 깔끔

2/13 ~ 2/19

  • 문제에 대한 답을 찾아야하는게 아니라 해결을 해야함 🧩

안드로이드 제스처

  • PanGesture로 RN에서 이벤트 핸들링하고 있는데 의도대로 잘 안되는게
  • 그 있잖아 차라락 스크롤 하다가 놓으면 그대로 쭈우욱 가는거
  • pan > swipe > flick
  • 그럼 flick을 구현하면 되겠네? 하면서 시작
  • 안드로이드 스크롤 이벤트를 어떻게 잡지? 하면서 안드로이드 제스처 드래그 확인
  • 스크롤 동작 애니메이션 처리 에서 살짝 튕기기 onFling 을 발견!
  • 이거다 이게 필요한건데
  • 이걸 네이티브에서 꺼내다 호출하면 되겠지!
  • 하고 있었는데.... 아주 간단하게 해결
  • 그냥 제스처이벤트를 안잡으면 되는 것을 하마터면 먼길 떠날뻔

뭐지

  • 라즈베리 서버 죽었다
  • 언제 죽었지
  • 그게 아니라 아예 사라져버렸네!
  • 무언가 설정이 변경된듯
  • 살려야하는데 내가 먼저 죽겠다
  • 지난번에 sentry 오류 났던걸 보면 얼마 안지났네

2/6 ~ 2/12

아니

  • 맥북을 열어보지도 못햇네...!

CircleCI

  • CircleCI iOS 빌드
  • 무료버전이라서 안드로이드만 빌드했던건 이제 추억이

2/1 ~ 2/5

memo

  • 다시 생각해보아도 memo가 좋지 않나
  • 메모리 낭비가 될 수 있지만 그 메모리가 과연 의도치 않은 리렌더 보다 클까?
  • 이럴때면 다시 생각나는 why-did-you-render
  • 처음 사용한 코드는 엄청난 리렌더 로그로 도저히 확인하고 대응할 수 있는 양이 아니였다
  • 그렇게 꺼놓고 조금씩 작업하면서 잊게 되었다
  • 이번에 다시 붙여보면 어떨까
  • 엄청 많이 업데이트 되었다 버전이 거의 더블
  • why-we-memo-all-the-things
  • ui-performance
  • 번역이 있었군...!

linear-gradient

requestAnimationFrame

  • scrollTo + transform 이 동시에 일어나야하는데
    • ScrollView가 기다랗게 나열되어 있고 WrapperView가 카메라 시야인 형태
    • WrapperView를 통해서만 ScrollView의 내용을 볼 수 있다
    • WrapperView가 transform 하여 ScrollView의 다음 인덱스를 보여주고 있다가
    • ScrollView의 scrollTo로 인덱스가 넘어가고 WrapperView의 transform이 원래 위치로 돌아오는 형태
  • 하지만 scrollTo + transform 를 일반적으로 구현하면 iOS에서는 정상 동작하는데 왜 안드로이드에서 애니메이션이 각각 다른 프레임에서 동작하는 느낌이다 
    •   scrollView.scrollTo();
  wrapperView.transform();
    • transform으로 이전 인덱스 위치로 WrapperView가 넘어가고 나서야 scrollTo가 동작하는 순서
  • 우선 같은 프레임을 돌려보고자 찾다가 requestAnimationframe 으로 아주 간단하게 해결되었다 ⁉️
    • 위에 문제가 되는 scrollTo보다 transform이 먼저 발생하는 것을 해결하고자
    • scrollTo 는 그대로 두고 requestAnimationFrame(transform) 으로 감싸주었다
    •   scrollView.scrollTo();
  requestAnimationFrame(() => wrapperView.transform());
    • 그러나 이 방법을 사용하면 안드로이드는 해결되었는데 프레임 문제가 iOS에서 재발하였다
    • 오히려 iOS에서는 scrollTo 가 먼저 실행되고 transform이 동작해버리는 느낌
    • 이 차이는 무엇인가?
  • 근데 왜 iOS에서는? 무언가 다른 점이?
  • 안드로이드에서는 이 time=1 설정이 scrollTo 와 transform 을 같은 프레임에서 동작하도록 transform을 미뤘는데, iOS는 같은 프레임에서 동작하던 것을 오히려 다른 프레임으로 넘어가버린 것이다
    • scrollTo가 발생하면 reflow(layout)이 발생한다
    • transform은 reflow(layout), repaint(paint) 둘 다 발생하지 않는다 => Composite
    • scrollTo가 실행되서 layout+paint 과정이 필요하기 때문에 느려졌고
    • 중간에 transform이 되었다면 위에서 문제가 되었더 scrollTo보다 transform이 먼저 발생하는 이유가 해결된다
    • 그렇다면 iOS와 안드로이드의 차이는 무엇일까
    • reflow, repaint 성능 차이일까...
  • 🙈 시각적 업데이트에 setTimeout/setInterval 대신 requestAnimationFrame
    • requestAnimationFrame으로 프레임 시작 시 실행되도록 보장하는 유일한 방법
    • setTimeout/setInterval는 콜백이 프레임에서 특정 시점(종료 시)에 실행되고, 종종 프레임이 누락되어 버벅거림 현상이 발생할 수 있다

* is not a function

  • 어느날 갑자기 sentry 오류가 잡혔다
  • 없을리가 없는데 왜 갑자기?
  • 헐?
  • node 서버를 commonjs -> es6로 작년 말에 변경했는데 한달만에 에러가 잡혔다...
  • 리팩터링 중간에 오류나서 이것저것 다시 하다가 날아가버린 코드가 있었다
  • 에러로그 날려주신 분 아니였으면 절대 몰랐을듯
  • 이 프로젝트에는 린트도 테스트도 타입스크립트도 안되어있어서 더 큰 문제였다

firebase app distribution

  • fastlane으로 배포하기
  • bundle install 오류 (Permission denied @ dir_s_mkdir)
  • 지난번에도 같은 오류였는데 이렇게 해결되나?
  • firebase login 설정
  • build_app.export_method 가 중요했다
  • firebase에 등록한 테스트 디바이스를 위해서는 분명 provisioning도 그에 맞는 Development로 빌드가 되어야하는데
  • export_method 디폴트 설정인 release로 들어가니 AppStore Provisioning을 찾고 있었고 이걸로 빌드하면 당연히 등록되지 않은 디바이스라서 파베에서 다운 받을 수 없었다
©Jiggag, Built with Gatsby