JIGGAG

1월 한달동안 로그

2022년 1월 31일

읽어보았던

1/30 ~ 1/31

dynamic import

  • TypeError: _vm(...).SyntheticModule is not a constructor
  • 테스트 환경에서 dynamic import를 처리하지 못해 실패하고 있었다
  • 코드의 실행 조건 자체를 변경해서 테스트에 포함되지 않도록 하려고 했으나 이것도 실패했다
  • 로컬에서는 해결되었지만 깃헙 액션에서 돌리려고 하다보니 좋지 않은 방법이였던 것 같다
  • dynamic import 를 transpile 하지 못해서 실패하므로 babel 플러그인 설정 추가로 해결되었다

1/23 ~ 1/29

carousel + interpolator

  • 캐러셀에 인터랙션 듬뿍 추가해주기
  • 보는게 즐거운 gif로 Animation Interpolator
  • 그래서 구현을 하면 되는 것인데, 잘 되지 않고 있다
  • 캐러셀을 바퀴부터 만들어야하는 것일까?
  • 모든건 바퀴부터 시작하는 것은 맞는데,,,
  • 분명 있는데, 안되고 있다
  • 그럼 왜 안되고 있는거지?
  • scrollTo... 이걸 사용할 수 없겠다
  • 캐러셀의 스크롤을 커스텀하기에는 기본 동작까지 흔들려버리기 때문에 조금 이상하지만 다른 방법을 선택했다
  • 이럴때면 가장 좋아하는 말
  • 사용자는 모른다
  • 캐러셀이 어떻게 구현되어 있는지는 모른다
  • 인터랙션이 원하는 모양을 가지기만 한다면!

1/16 ~ 1/22

react-query

  • 리액트 쿼리 캐시로 리덕스 따라하기 해봐야지
  • 느낌이 비슷하게 구현하면 되지 않을까
  • 하다보니 리덕스는 아니고 내맘대로네

react-native-flipper

  • 이번엔 안드로이드 빌드 ../node_modules/react-native-flipper/android/build.gradle 에서 Could not get unknown property 'FLIPPER_VERSION' for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. 오류가 발생했다
  • gradle.properties에 있는 flipper 버전을 코틀린으로 바꾸면서 상수로 따로 관리하도록 이동했는데, react-native-flipper 라이브러리에서도 그 파일을 참조하고 있었다
  • 당연히 찾지 못했으니 오류가 발생
  • 라이브러리를 바꿀 수 없으니 gradle.properties 로 다시 돌려놓고 상수 파일에서 불러오도록 해야한다

FB_SONARKIT_ENABLED

  • react-query-native-devtools 가 왜 안되는지
  • 나만 안되는거였나?
  • 왜 되는거지
  • 그러다 갑자기 의문이 생기는 flipper 에 연결된 앱이 떠야하는데, 안뜨고 있다
  • 아직 네트워크 통신도 없고 로그가 남는지만 확인하고 있었던 flipper가 연결 자체가 안되어있던 것이다
  • 프로젝트에 flipper 자체가 연결이 안되었으니 플러그인을 아무리 설치해도 당연히 안뜬다
  • #if FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  • 조건에 따라 flipper를 연결해주는데 FB_SONARKIT_ENABLED 자체가 틀렸다!!!
  • 그럼 이 값을 바라보는 모든 곳이 문제가 되고 있을게 아닌가?
  • FB_SONARKIT_ENABLED 이게 뭐지?
  • 전부 flipper 관련해서 나오는데
  • flipper 문서 를 참고해서 swift 코드로 변경하고
  • FB_SONARKIT_ENABLED flag 설정
  • flipper: FlipperClient::onConnected 가 뜨는걸 보니 되었다
  • Project - Build settings - Swift Compiler - Custom Flags 로 DEBUG, RELEASE 는 있는데 FB_SONARKIT_ENABLED 는 없어서 추가로 설정해주었다
  • 근데 targets 설정으로 이미 -DFB_SONARKIT_ENABLED=1 가 되어있었는데, 왜 설정이 덮어씌워지지 않았을까

1/9 ~ 1/15

react-query

  • 생각했던대로 흥미롭게 구현중
  • 근데 예상과는 다른 말을 듣지 않는 캐시
  • 캐시가 꼬였나 그럴리가
  • 인스턴스가 하나가 아닌건가? 그럴리가 없는데?
  • 의심만 가득한 인스턴스가 하나가 아닌 것 같은데?
  • cacheTime부터 staleTime까지

테스트 cleanup

  • 지난번 보람찬 도전기를 이어서
  • 테스트를 작성하고 있는데, 첫번째 렌더러는 마운트가 되었는데 다음 시나리오에서 마운트가 되지 않는다?
  • 저번에도 이런적이 있던 것 같은데
  • Unable to find node on an unmounted component.
  • // 1. beforeAll
let instance;
beforeAll(() => {
  instance = render(<GenreImage style={{}} />);
})

// 2. beforeEach
beforeEach(() => {
  instance = render(<GenreImage style={{}} />);
})
  • beforeAll 사용해도 동일한 언마운트 문제가 발생한다
  • beforeEach 로 매번 마운트된 새로운 컴포넌트를 렌더 해주어야하는데, 차이는 무엇일까
  • 왜 인스턴스를 재사용할 수 없을까
  • 테스트에서 필요한 컴포넌트 렌더러는 동일한데 왜 계속 새로 만들어야하는 것일까
  • render 함수에서 cleanup 큐에 unmount를 쌓고 있기 때문이다
  • cleanup 함수는 afterEach로 불러지고 있었다
  • 매번 사라진 인스턴스를 beforeEach로 다시 만들지 않은 상태에서 사용하려하니 오류가 발생하는 것 이였다

3주차

  • 일렉트론이 궁금하던 찰나에 리액트 쿼리 알아보기로 했던 것이 떠올랐다
  • 뭘해도 재밋을건데
  • 2월까지 10주 정도 있겠다고 생각한 것도 벌써 3주 흘러버렸다
  • 언제할거야

스냅샷 테스트

  • 스냅샷 테스트의 장점이 없을까
  • TDD에서는 실패한 테스트 케이스에 대해 수정해나가는 과정이 필요한데, 스냅샷 테스트는 이미 올바르게 렌더링 되고 있음을 기반으로 하고 있기 때문에 TDD에는 유의미하지는 않다
  • 컴포넌트가 변경되면 스냅샷도 업데이트를 해주어야하는데, 이걸 까먹고 테스트가 깨지는 상황을 몇번 마주했다
  • 아직까지는 변경된건 확인은 하고 싶은데 테스트 시나리오 만드는건 귀찮지만 거기까지 테스트하러 들어가는건 더 귀찮을때!
  • 스냅샷 돌려서 확인하는 용도 이외에 보람차게 사용보지 못했다 (귀찮음50 + 모니터링50)
  • 스냅샷 대신 좀 더 명확하게 확인하고 싶은 내용을 테스트 하는 것이 좋겠다 (테스트 작성하는 시간이 필요하겠지만, 스냅샷을 두고두고 관리하는 것보다 깔끔하다)

1/1 ~ 1/8

starter

  • 너무 많은걸 넣어버려서 이게 한도 초과라고 생각하며... (빌드가 자꾸 깨지니깐)
  • 새로 만들었다
  • 겸사겸사 로컬 푸시 라이브러리 notifee 를 추가해봐야지
  • 근데 어디에 쓰지..??
  • 이렇게 또 배부른 프로젝트가 되는건 이 starter의 운명인가
  • 깃헙 액션도 설정해야하는데
  • 드라이브에 올리는 것 말고 이번에는 그냥 브랜치 새로 만들어서 apk 업로드 하도록 해볼까
  • 그럼 iOS는????? ㅏㅏㅏㅏㅏ
  • 파베로 가야겠다
  • 등록된 키가 있으면 업로드하고 없으면 말고!

접근성

  • 윈도우 css를 적용하고 싶어서 찾다보다가 발견한 라이브러리의 데모 버전에서 어떻게 사용하면 되려나 보고 있는데
  • 괜히 더 눈여겨 보게 되는 것은 태그
  • 무조건 div로 해결할 수 있지만 label, button를 목적에 맞게 사용하는 것이 중요
  • 지난번에 읽었던 토스의 접근성 관련 글 이 흥미로웠기 때문에

git flow

  • 개인 프로젝트에서는 git flow를 지켰다가 안지켰다가 하고 있다
  • 아무래도 혼자 진행하다보니 feature -> pr -> merge 하는게 과하다 생각이 들기 떄문이다
  • 그러나 오픈소스가 아니더라도 혼자 관리하는 레포에서도 결국 충돌이 발생할때가 있다
  • 코드 충돌이라기 보다는 이것저것 하다보면서 꼬이는 기분이랄까
  • 그러니 git flow를 지켜주면 좋았잖아!
©Jiggag, Built with Gatsby