JIGGAG

12월 한달동안 로그

2022년 1월 7일

12/26 ~ 12/31

  • 벌써 연말이고
  • 연말도 끝나가고
  • 곧 새해

RN 0.66

  • RN 0.66 올리면서 react-native-reanimated도 올렸는데
  • iOS에서 에러가 발생하고 있다
  • 문서에 이렇게 크게 있었는데..
  • 안드로이드 설정만 추가하고 못봤다
  • (+ 다시 문제가 발생해서 버전으로 2.2.4로 내려버렸다...)
  • 그래서 여전히 의문인 왜 cli 빌드가 안되는거지
  • 맥 OS도 괜히 올려버려서 xcode도 다시 설치하고
  • react-native init으로도 cli 실행이 안되는걸 보니 큰일이다

12/19 ~ 12/25

RN 0.66

  • 또 올라갔네 버전 0.67이 있는게 현실이지만
  • 0.66이라도 대응해야지
  • gradle 버전 잘못 올렸다가 꼬여버린 라이브러리 다시 내리고
  • 다시 봐도 쉽고 편해보이는데 모르겠는 kotlin dsl
  • 참고
  • RN upgrade helper는 왜 kotlin dsl로 안보여주는건지
  • 하다가 모르겠어서 깃헙에 비슷하게 코드를 검색해서 맞추기
  • gradle 버전을 올렸더니 이번에는
  • Using com.bugsnag.android.gradle with Android Gradle Plugin 7+ requires an upgrade to com.bugsnag.android.gradle:7.+
  • Bugsnag 문서 에 gradle 버전에 따라 명시되어있네 머쓱하게
  • 이번에는 또 다른 곳 manifestPlaceholders(mapOf(...))형태로 사용하고 있었는데, 왜 gradle 업데이트하고나서 못읽는거지
  • gradle, 안드로이드 스튜디오 캐시를 싹 날리고 새로 import!!!!!
  • pod install은 왜 Installing ...에서 멈춰있는 것인가
  • 코코아팟이 문제일까해서 조금 많이 기다려보기로 했다...
  • 그렇게 한참을 기다렸더니 완료가 되었다
  • xcode는 빌드가 되는데 커맨드에서 되지 않고 있길래 바로 @react-native-community/cli로 달려가보았다

쪼개기

  • (요즘 노션 동기화가 안되는 것 같은 기분이?)
  • 좀 더 작게 쪼갰어야했는데
  • 또 잊었군
  • 제거된 기능을 먼저 올리고
  • 추가된 기능을 올리고
  • 대체된 기능을 올렸다면?
  • 에러가 났을거야!!
  • 😭
  • 그래도 이번엔 잘 나눠야지

12/12 ~ 12/18

안드로이드 overflow view

  • position: absolute로 부모 컴포넌트 영역을 벗어나는 버튼을 만들고 싶었다
  • 당연히 개발을 iOS 시뮬레이터에서 잘 했는데 역시나 안드로이드
  • 혹시나 테스트해보니 되지 않았다
  • 뷰 자체는 absolute + zIndex 의도대로 그려졌지만 터치 영역이 이벤트가 잡히지 않는 것으로 보인다
  • 이런 이슈는 이미 있었고
  • RN 0.66에서 해결이 되었다
  • react-native-gesture-handler의 Touchable은 동작하는지 따라가보니 제스처 이벤트로 해결하고 있었다
  • 지금 RN 버전을 올리지 못하는 상황에서 해당 커밋만 체리픽해서 사용하기엔 더 관리하기 까다로울 것 같아
  • react-native-gesture-handler의 Touchable로 사용하고 싶은데
  • 그럼 기존에 쓰고 있는 커스텀 컴포넌트에 제스처 컴포넌트를 바라보도록 수정해야할까?
  • ❌ 배꼽이 더 커지고 있으니 필요한 부분만 대체하고 버전을 올리는게 좋겠다
  • 🙈

리액트 쿼리 캐시

  • 리액트 쿼리를 사용하면서 + 훅으로 모든걸 하려했더니
  • context, redux 대체할만한 것이 무엇이 있을까 생각하다가
  • 캐시를 쓰면 되겠는데? 하고 quetyClient를 봤더니 내부에서 컨텍스트 쓰고 있다
  • 이런저런 Provider가 쿼리 하나로 대통합하는게 어디야
  • 혹시 더 좋은걸 쓰고 있을까 해서 힌트를 얻어보려 들어갔지만 컨텍스트를 쓰고 있기에 그대로 나왔다
  • 어떻게 잘 사용하는지 또는 누가 해주는지
  • 그러다 캐싱된 데이터 옵저버를 써봤는데
  • 이벤트 리스너가 너무 많이 와서 이걸 어떻게 정리할 수 있지 찾다보니
  • 방법이 다 있다
  • 쿼리에서 트래킹 자체를 안할 수 있다

12/5 ~ 12/11

하나 더 추가

  • 변경에 유연한 컴포넌트에서
  • 프로젝트 구조까지
  • 그동안 작은 규모의 프로젝트였기 때문에 그렇게 나눠야할까(기능별로) 하는 필요성을 느끼지 못했으나
  • 정리해볼 수 있지 않을까 생각이 들었다
  • 드릴링 할 때 마다 생각나는 이건 어떤 방식으로 해보지
  • 당장 도입할 수 있는 부분이 떠오르기는 하는데
  • 이것도 도전을?!
  • 그러려면 컴포넌트 렌더링 테스트를 미리 작성하고 시작해야 편안하겠다
  • 더블로 도전을 할 수 있을까

아름다웠던 도전

  • 그동안 했던건 역시나 유닛 유닛 슈퍼 유닛 테스트였다
  • 컴포넌트 테스트를 해본적은 있으나 해본적 있다고 하면 안되는 것
  • 도전을 해보고 있는데 아름답게 도전했었다로 끝나겠는걸?
  • @testing-library 문서가 이렇게 잘되어있는데, 나는 잘 준비가 안되어있다
  • 훅 테스트도 할 수 있다
  • 그래서 써봐야지! 하고 있는데
  • 기존에 @testing-library/react-native 를 쓰고 있었는데 아카이브!!?? 언제부터!
  • 깜짝이야 Callstack 레포 에 잘 있다
  • 콜스택 👍

12/1 ~ 12/4

useImperativeHandle, useRef

  • DOM을 제어하는 ref는 mutable object
  • 리렌더 되는 조건: state, props, force mount
  • 클래스 컴포넌트는 render()만 다시 호출하지만 함수 컴포넌트는 자체가 다시 실행하는 것 -> 호출과 실행의 차이
  • 인라인 함수로 작성하면 리렌더마다 다시 만들어지는 불필요한 동작
  • useRef로 마운트 시점에만 새로 만들도록
  • 상위 ref를 하위로 전달하면 forwordRef로 받은 ref를 통해 상위에서 하위 DOM을 제어할 수 있게 된다
  • 이때 하위 컴포넌트의 제어를 상위에서 하기 위해 useImperativeHandle로 ref에 구현
  • 이런 방식을 사용하면 지난번 컨테이너로 비즈니스 로직 분리하면서 엄청 발생한 props drilling롤러코스터 props를 좀 더 개선해볼 수 있지 않을까
  • 왜 여기로 흘러들었는지 모르겠지만 ref로 제어하기