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로 제어하기