JIGGAG

3월 한달동안 로그

2021년 4월 2일

3/29 ~ 3/31

lint-staged

  • monorepo에 lint-staged 설정하기
  • root에 husky 설정
  • eslint, kotlint, swiftlint
  • 왜 이렇게 많지!!!!

eslint

  • 많고 많은 rule 읽어보기... 너무 많다
  • lint 한번 돌리는데 오억시간... 추가하고 추가하고 얹어있는 플러그인 설정 덕분이라 예상되며 어떻게 줄이면 좋을까
  • 개인적으로 좋아하는 즐겨하는 lint 설정들은 js부터 사용했던것이고 ts로 완전 전환되었음에도 그대로 유지하고 있었다
  • 오히려 불필요한 옵션값임에도 그냥 스타일로 굳어진 듯한 옵션
  • 특히 props를 스프레드로 전달하는 것을 좋아라하지 않았는데 이유는 어떤 값이 들어있는지 오고가는지 잘 모르겠어서!
  • 개발 당시에는 스프레드로 쫘라락 전달하면 간단했지만
  • 나중에 오류가 발생했을떄나 무언가 수정, 리팩터링 하려고 할 때 도대체 이 값은 어디서부터 전해내려오고 있는지
  • 그 값을 찾고자 스프레드를 거슬러 가는 것은 더 귀찮았기에 꼭 챙겨다니는 옵션
  • react/jsx-props-no-spreading
  • 근데 ts에서는 인터페이스가 명시되어있으니 스프레드로 전달해도 금받 찾을 수 있지않을까

3/22 ~ 3/28

MySQL

  • 예전에도 발생했었던듯한 오류
  • 최근에 발생하지 않아서 해결됬나 했더니 다시 발생
  •   Error: Packets out of order. Got: 1 Expected: 0
  PROTOCOL_PACKETS_OUT_OF_ORDER
  • 오류나면 슬랙 알림을 붙여놨더니 수십개가 날라온다...
  • max_allowed_packet=500M
  • 알림이 너무 와서 재시작부터...

RN 0.64

  • 버전 업 이후 빌드 에러
  • 같은 에러가 발생한다는 깃헙 이슈가 등록되었다
  • 무엇이 문제일까
  • 🚨아아아아아아아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㄱ
  • 아무리 봐도... 되지 않길래 RN 0.64 업데이트 성공해던 프로젝트를 가져와서 빌드해보니 이것도 안된다
  • 왜 안되는걸까
  • RN 프로젝트를 새로 만들어봐야겠다 -> 안된다...
  • xcode에서는 되는데 왜 커맨드로는 안되는걸까...
  • (+ fastlane 빌드도 안되는 것....)

스터디

  • 스터디가 처음인줄 알았는데 예전에 함수형 자바스크립트를 타입스크립트로 변환하는 스터디를 잠깐 했었다
  • 물론 오래 못가고 참석이 저조하여 자연스럽게 사라졌다... (그 레포는 아직도 간직 중이다)
  • 그때 얻은 교훈으로 스터디를 처음에는 지인이랑 하는게 좋지 않을까 생각했다
  • 그리고 좋은 타이밍에 같이 코틀린을 스터디하는 동료를 찾았다!
  • 평소에도 꾸준하게 하던 모습에 동기부여를 몰래 받고 있었는데 같이 스터디를 하게 되었으니
  • 이번 스터디는 잘 할 수 있겠지 하는 기대중!

메서드 타입

  • 이런저런 라이브러리를 보다가
  • 또는 어디선가 보았던
  • 메서드 타입을 명시한 두가지 방법
  • method: () => void
  • method(): void
  • 이유는 기억나지 않지만 항상 위의 방법으로 사용하고 있었다
  • 그래서 새로 진행하고 있는 프로젝트에서는 두번째 방식으로 타입을 명시해보았다
  • 너무 단순하게 사용하고 있었는지 모르겠지만 별다른 이슈가 없어서 단순히 표현의 차이인가하고 생각을 마무리했었다
  • 그리고 지난 주말 무언가 해봐야 눈에 보인다고 관련된 내용의 블로그를 접하게 되었다
  • 첫번째 방법은 프로퍼티 방식의 메서드 타입이고 두번째 방법은 줄여쓰기 방식의 메서드 타입이다
  • 파라미터의 타입이 공변성, 반공변성 어떤 형태를 가지는지에 따라 타입에러를 발생시킨다 (????)
  • 참고: 공변성이란 무엇인가
  • 참고: 공변성과 반공변성은 무엇인가?
  • 외부 라이브러리에서 줄여쓰기 형태의 타입으로 많이 보게 된다면 공변성을 위한 것이라고...
  • 공변성이란 무엇인가???...

3/15 ~ 3/21

피노키오

  • 제페토
  • 지미니 크리켓
  • 나무인형 피노키오를 만든 제페토
  • 피노키오가 사람이 될 수 있도록 도와준 지미니 크리켓
  • 꿈 + 호흡?생명?
  • 그동안 사용했던 가장 스타가 많은 react-native-snap-carusel
  • UI 라이브러리로 사용하는 react-native-ui-lib
  • 둘 다 무한반복 캐러샐을 그려보았다
  • snap-carousel에서는 정방향으로는 문제가 되지 않는데 역방향으로 스와이프하게 되면 1번 페이지에서 마지막 페이지로 이동할때 캐러샐이 깜박이는 이슈가 발생하였다
  • 근데 ui-lib에서는 동일한 데이터로 그려주었는데 이슈가 발생하지 않는다
  • 단순하게 그럼 ui-lib으로 그려야지! 하고 끝나려는데 그래도 차이가 뭔지 한번 봐야겠다하고 라이브러리를 열어보았다
  • ui-lib의 캐러샐은 ScrollView로 되어있었고 스크롤 위치를 이동시켜 레이아웃을 작성하였다
  • 반대로 snap-carousel에서는 두가지 옵션이 존재했다
  • ScrollView이거나 FlatList이거나
  • 두 라이브러리의 차이점은 이 부분에 있겠다는 느낌이 확 와닿으면서 해당 옵션의 조건이 되는 코드로 따라 올라가보았다
  • 그리고 해당 옵션을 설정하는 useScrollView를 props 설정해보니 해당 이슈가 해결되었다

babel

  • Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin
  • react-native-ui-lib의 Carousel을 사용하려고 하는데 갑자기 나타난 오류 메세지
  • babel 설정에 플러그인 추가

개인 메일 주소

  • 작년 여름 도메인을 장만했는데 개인 사이트를 띄웠던 것도 라즈베리파이로 서버 이전하면서 다시 죽었고... 살리지 않고 있다
  • 왜그르냐
  • 그러다 gmail 말고 개인 메일주소가 갖고 싶어서 메일서버를 띄워볼까?하는 찰나의 순간
  • 정신차리고 조금 찾아보니 도메인 설정 조금만 해주면 개인 메일을 가질 수 있다는 것을 깨닫고 바로 실행
  • 지메일을 개인 도메인으로

RN Native Module

  • 네이티브 모듈 코틀린으로 만들어보기
  • 기존에 사용하던 라이브러리들을 간단하게 필요 기능만 직접 만들어보았다
  • 라이브러리를 사용할 필요 없이 직접 구현해도 될 정도의 기능 (앱 종료, 앱 버전 가져오기)
  • 코틀린 학습을 목적으로 시작해서 그런지 하는김에 iOS는 swift로 만들어 보려고 했는데 빠르게 기능을 추가하고 싶어서 objective-c로 변경...
  • 한번에 두가지 욕심은 욕심이였을뿐

RN 0.64

  • RN 0.64
  • 안드로이드에만 있던 hermes가 iOS에도 적용되었다
  • 근데 APK 사이즈가 미묘하게 줄어든것 말고는... 아직 크게 와닿지 않았는데 이번 버전에 iOS도 추가되었다고하니 적용해봐야겠다
  • 또한 이번 버전에서 inline import를 지원하게 되면서 초기 로딩 속도를 개선할 수 있을 것 같다
  • 퍼포먼스 문서를 다시 읽어보는데 FlatList에 getItemLayout은 항상 빼먹고 있는데 꼭 이번주에 넣으리라
  • 그리고 이상하게도 프로덕션 빌드된 iOS Bugsnag에 트래킹된 내용인 RangeError Out of memory ... [native code] stringify은 아무리 찾아봐도 console.log로 남기고 있는 부분인데
  • 바벨 플러그인 transform-remove-console이 적용되어있음에도 찍히고 있다... 왜...? -> release 빌드가 되고 있지 않은걸까?
  • 이번 버전에서 가장 크게 변화된 내용이라고 생각되는 부분은 새로운 JSX -> React를 매번 import 하지 않아도 된다는 것
  • 실제 JSX 코드에서 사용하고 있는 것이 아니라 React.createElement형태로 컴파일된 코드에서 사용하기 위해 미리 React를 import를 해둬야만했다 -> eslint 옵션에 사용하지 않는 구문으로 경고가 발생한다
  • 그러나 리액트와 babel 버전이 업데이트 되면서 컴파일 할때 자동 추가되도록 변경되었다

3/8 ~ 3/14

JSX.element

  • 한달만에 다시 헷갈리는 타입...
  • JSX.Element < ReactElement < ReactNode
  • ReactElement는 type, props, key를 갖는 타입
  • JSX.Element는 React.ReactElement<any, any>로 특정 타입 props를 받은 ReactElement
  • ReactNode는 type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined; 모든 것을 다 반환하는 노드 대장
  • 함수형 컴포넌트는 ReactElement | null를 반환하고
  • 클래스 컴포넌트는 render()가 ReactNode를 반환한다
  • JSX를 바벨이 트랜스파일링해서 React.createElement의 형태가 되고 이는 ReactElement 타입을 반환한다
  • JSX.Element와 null을 반환하는 컴포넌트인 경우 ReactNode 또는 JSX.Element | null
  • 3가지 타입의 차이점: stackoverflow
  • 3가지 타입의 차이점

recoil

  • 드디어 써볼 수 있는 기회가!
  • 처음 리액트 프로젝트를 접하고 그 이후로 쭉 리덕스+사가 조합으로만 사용해왔다
  • 보일러플레이트가 많긴 하지만 이것도 계속 프로젝트를 진행하다보니 익숙해져서 점점 깔끔(눈에 익어버리는)해지는 효과도 있는듯
  • 혼자 개발해서 아쉬웠던 점인 나 스스로가 나의 프로젝트에 갇혀버리는 듯한 기분
  • 고정관념을 깨야하는데
  • 사실 혼자 스터디해도 되는데 의욕만큼 부족한 실천으로 나중에 봐야지만 거듭하다... (코틀린도 마찬가지)
  • 이번에 기회가 되서 써볼 수 있는 시간이 생겼다
  • 간단하게 Toast 기술 블로그만 봤는데도 벌써 흥미가득
  • stable 버전은 아니지만 그럴거 같지 않지만 만약 사라진다면!?
  • 그래도 사라지기 전에 경험해볼 수 있는게 사라지더라도 왜 사라졌는지 알 수 있겠지

utf8mb4

  • 갑자기 글을 많이 쓰면 저장이 안되는거야?
  • 글자수 제한을 둔적이 없는데...
  • 뭐라고 입력했는지는 알 수 없으니 잔뜩 글을 입력해보았는데 잘 들어가는데?
  • 한글만 들어가면 될 줄 알고 디비 설정을 utf8로 해뒀는데 이모지는 생각도 못했다
  • 강제로 이모지를 넣어보려하니 진짜로 안들어가네?
  • 우선 테이블 설정을 utf8mb4로 바꾸니깐 들어가길래 다시 해봐!
  • 여전히 이모지 저장은 되지 않고 있었다
  • mysql 설정을 utf8mb4로 바꾸고 재시작하고 나서야 제대로 들어가고 나오기 시작한다

react-native-mail

  • 예전에 사용하던 라이브러리
  • 타입만 추가해서 PR
  • 내가 사용할때 필요했고 있으면 좋겠고
  • 사실 굳이 하려던건 아니였는데
  • 기존에 참여했던 프로젝트에 문서만을 남겨두고 마무리해야 하는 상황
  • 언젠가 이 프로젝를 열어서 업데이트를 진행 할 때 조금이나마 도움이 됬으면 하는 마음으로

3/1 ~ 3/7

퇴사

  • 같이 할 수 있어서 좋았다
  • 다 할 수 있어서 좋았다
  • 또 하면 좋겠다
  • 나는 그렇게 생각하는데
  • 같이 해주려나 모르겠다
  • 끝

문서 작성

@bugsnag/react-native

  • 안드로이드 js에서 Bugsnag.notify하면 오류 발생
  • 직접 gradle 버전을 수정해서 사용하도록 하긴 했는데 아무래도 이건 좋지 않은 것 같아 github issue 등록
  • 용감했다... 용감만했다
  • 몇시간 지나지 않아 바로 답변이 달렸고
  • build.gradle에 설정한 bugsnag 버전과 실제로 @bugsnag/react-native에서 바라보는 gradle 버전이 다르기에 에러가 발생한 것 같다
  • 실제로 build.gradle에서는 com.bugsnag:bugsnag-android-gradle-plugin:5.+로 설정되어있었는데 이건 공식 문서를 참고한건데...
  • 5.+로 설정된 부분은 v5.*.* 최상 버전을 가져오고 있었고 현재까지 배포된 가장 최신버전인 v5.7.0을 당겨오고 있었다
  • 그러나 내가 사용중인 @bugsnag/react-native v7.8.0에서 바라보고 있는 gradle의 버전은 v5.6.2였기에 오류가 발생하는 것
  • v5.6.2라고 생각하고 모듈이 동작해야하는데 v5.6.2에서 v5.7.0으로 업데이트 되면서 해당 메서드의 인자가 변경되었다
  • 만약 우연하게도 업데이트된 버전에서도 메서드가 동일했다면 몰랐을 오류...
  • bugsnag support에 상세 내용을 보내고 시간이 조금 지나서 github issue가 종료 되었다는 메일이 날라왔다.
  • 해당 이슈를 종료하는 마지막 댓글에는 build.gradle 모듈을 임의로 변경하는 것보다 릴리즈된 버전을 사용하는 것을 추천하며 새로운 버전이 릴리즈 되었음을 알려주었다.
  • 라이브러리 버전이 의도치 않게 꼬이면서? 발생했던 오류는 새로운 버전이 릴리즈 되면서 안드로이드 모듈 버전도 업데이트 되었고 자연스럽게 해결되었다
  • 모듈 버전을 임의로 수정했을때 혹시 문제되는게 없을까?하며 오류가 발생하는 버전을 이슈를 등록했고 속마음을 읽어주듯 빠른 답변과 해결에 감사하다
©Jiggag, Built with Gatsby