JIGGAG

3월 한달동안 로그

2020년 4월 6일

3/29 - 4/4

어쩌다 오픈소스

  • rn 0.62.0 업데이트 이후 어디선가 경고가 찍히기 시작했다
  • 따라가보니 react-native-ui-lib 에서 deprecated 된 내용을 사용하고 있었다
  • rn 문서를 보니 해당 api는 이미 deprecate되었고 이번 버전부터 경고가 찍히게 업데이트 되었다
  • 그래서 우연한 기회로 react-native-ui-lib에 해당 코드를 수정하였고 pr 보냈다
  • 그런데 가만 보니 경고 메세지에서 해당 api 대신 사용하라는 api가 잘못 표기되어있음을 알게 되었고 정말 우연하게도 ㅋㅋ
  • react-native에 pr 기회를 얻게 되었으며 다음날 바로 merge 되었다!
  • console.warn 내용을 수정한 것 뿐이지만 이런 기회를 얻게 되다니

TDD?

  • 재사용할 목적으로 컴포넌트를 만들었다 -> 나혼자 개발하는게 아니다 -> 내 의도대로 작동하는지 확인하고 싶다
  • 내 코드가 잘 있나 보살피고자 테스트 코드를 작성해둬야겠다고 생각이 들었다
  • 내가 작성해둔 컴포넌트는 언제든 재사용 될 것이고 코드는 변경될 수 있다
  • 그리고 변경된 컴포넌트는 기존에 사용되고 있던 곳에서도 기존과 동일하게 적용되는지 최소한 확인 장치로 테스트 코드를 작성하려고 한다
  • TDD라고 테스트를 먼저 작성하고 개발을 하는 방법론이 있다
  • 그러나 나는 지금 그 방법론에 정반대로 진행하고 있다
  • 그러나 목적은 같지 않을까
  • 의도대로 작동하는가

그냥 고민

  • 데이터를 가공하고 그려주고 변경하는 작업 중 갑자기 드는 생각
  • 반복문을 사용하는게 너무 많지 않나? 그냥 key-value로 담아두면 안될까
  • 그래서 key-value로 했더니 데이터를 그리고 변경하는데에는 괜찮았다
  • 그런데 특정 값을 조건으로 필터링하고자 할때 반복문을 돌기위해 Object.keys를 한번 거쳐야하는 일이 발생한다
  • 다른 방법은 없을까
  • 두가지 형태의 데이터를 다 들고 있다면? 리스트 형태는 필터링을 위해서만 사용하고 값을 찾기 위해서는 key-value에서 작업하면 어떨까

깊은 복사

  • saga에서 값을 변경해서 reducer에 보내려고 한다
  • 근데 그냥 바꾸면 redux에 있는 값이 바로 변경된다 -> 내가 원하는 시점이 아니다
  • 그래서 깊은 복사를 통해 새로운 객체를 생성하고 이 객체의 값을 변경한 뒤 reducer로 보냈다
  • 그럼 이 깊은 복사는 과연 꼭 필요한 것일까?
  • 깊은 복사는 겹겹 쌓여있는 객체 저 깊은 곳까지 전부 복사를 하기 위해 키값을 돌고 돌고 돌아서 복사를 해야한다 -> 이런 돌고도는 과정이 불필요한 일은 아닐까
  • immer를 사용하면 특정 부분만 값을 변경할 수 있다 -> saga에서 reducer로 immer를 사용해 전달할 수 있을까?

3/22 - 3/28

django

  • user = UserViewSet.as_view({
    'get': ‘list',
    'post': 'create'
})
  • urls에서 method 별로 연결해준 view에 매핑되어 호출 -> serializers는?
  • get list에서는 사용자의 이름만 request, response에 담으면 되지만 post create에서는 request는 전체 필드를, response는 이름만 담으면 된다
  • 하나의 serializers로 요청, 응답 필드를 필터링 하여 보여줄 수 있을까?

bugsnag

  • 앱이 종료된다는 사용자
  • 이유를 찾을 수 없다
  • 서버 응답은 정상적으로 내려갔고 클라이언트 오류
  • 에러트래킹 툴의 필요성

정규식

  • 친해질 수 없는 정규식 -> 유니코드? 아스키코드?
  • 해외 사용자들을 위해 다국어 허용하면서 특수문자는 허용하지 않는 규식이를 만들어야한다
  • 내가 보기엔 전부 특수문자같은데...
  • a 위에 점 하나 찍은 à, â 에라이
  • es2018에서 나온 정규식( \p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Join_Control}) -> 안타깝게도 es6에서 읽지 못한다
  • 바벨에서 변경이 될까 찾아봤는데 실패했다ㅜㅠ
  • 그렇게 반반나절이 지나고 es6로 정규식을 변경해주는 사이트를 운좋게 발견하였다
  • \p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Join_Control}: 다국어 + 숫자
  • \u3002\u318D\u119E\u11A2\u2022\u2025\u00B7\uFE55: 천지인 키보드 문자
  • 참고: 마켓컬리

Jest

  • 정확하게 무엇을 어떻게 테스트 코드를 작성해야 하는지
  • 자바 개발 시 해당 서비스의 응답값을 테스트 했었다
  • 리액트도 동일한 방법일까? -> 함수의 응답값을 테스트해보았다
  • 그러나 state에 따라 변화되는 화면은?
  • 테스트 코드에서 state를 변경할 수 있을까?
  • 함수형 컴포넌트에서는 instance가 생성되지 않아 state에 접근이 불가능한것같다

3/15 - 3/21

sentry

  • Error tracking
  • 그동안 에러로그를 디비에 저장했는데 API 호출 로그와 같은 형태로 저장되어있어서 찾아보기도 힘들고 사실 찾아보지도 않았다...
  • 이번 기회에 툴 사용
  • 앱 + 서버 에러로그

eslint

  • react-hooks/exhaustive-deps
  • 훅스 디펜던시를 추가하지 않으면 자동 추가해버리는 eslint rule -> 깃허브 이슈에는 개발자들의 아우성
  • react native 공식 문서에서는 사용하는걸 권장하고 있는데 개발 의도와는 다르게 수정되버리는건 오류일까?
  • eslint에 걸리지 않으며 디펜던시에 추가하지 않고 처음에 의도했던대로 해당 값을 사용하려고 고민한 결과 -> setState를 사용하여 prevState로 값을 가져오면 디펜던시에 추가하지 않아도된다
  • setValue(prev => {
    // 이렇게 여기서 prev값을 가져와서 사용하면 deps에 넣지 않아도 사용할 수 있다
    console.log(prev);
    return prev;
});
  • 그러나 redux state인 경우 어떻게 컨트롤할지 방법을 또 고민하던중...
  • eslint에서 자동 추가되는걸 막아버린 업데이트를 해버렸다
  • react 깃허브 이슈에서 eslint rule 이야기

OMF

  • 파이썬 dlib
  • 사진 저장은 서버가 필요하니깐 저장 없이 촬영된 사진을 분석만 하고 끝
  • 사진 -> 얼굴 인식 -> 색상 배열 계산 -> 붉은 정도를 반환

코틀린

  • 자바 + 타입스크립트 느낌 물씬

깃허브 + 슬랙봇

  • GitHub api로 이벤트 발생 내역 가져와서 오늘 내역 없으면 슬랙봇 알림
  • 그러나 특정 이벤트만 골라서 가져오는게 아니며 공개된 이벤트만 조회됨
  • Private 커밋을 한 경우에도 이벤트 조회가 되지 않아 계속 알림봇(귀찮)
  • 서버에 스케줄러로 특정 시간마다 호출하도록 했는데, 24시가 넘어가면 스케줄러가 리셋되버린다 이유가 뭐지

3/8 - 3/14

react navigation v5

  • react-native-router-flux를 react-navigation로 변경하고자 스터디

OMF

  • Redux hooks로 변경

cocoapod

npm

eslint

  • eslint 플러그인 옵션 설명과 나의 사용의도
  • eslit
    • no-var: var를 사용하지 않고 let, const를 사용
    • prefer-destructuring: 구조 분해
    • no-lonely-if: else문 안에 if문만 존재하는 경우 else if를 사용하도록
    • no-else-return: else문에는 return이 필요하지 않음
  • eslint-plugin-react
    • react/jsx-no-bind: jsx 파일에서 bind로 바인딩하는 경우 허용하지 않음
    • react/no-array-index-key: 리스트를 그리는 경우 인덱스 key 필요
    • react/no-multi-comp: 여러개 컴포넌트 선언 허용하지 않음
    • react/jsx-closing-bracket-location: 닫는 괄호 줄바꿈, 탭키 위치 체크
    • react/jsx-filename-extension: jsx 허용하는 파일 확장자 나열
    • react/no-unused-state: 사용하지 않는 state값 확인
    • react/style-prop-object: props로 style을 주는 경우 객체 형식만 가능하도록
    • react/sort-comp: 파일 내 선언된 컴포넌트, 라이프사이클 순서 정렬
  • eslint-plugin-react-native
    • react-native/no-inline-styles: 리액트 인라인 스타일 허용하지 않음
    • react-native/no-unused-styles: 선언된 스타일 중 사용하지 않는 것 지우도록
    • react-native/sort-styles: 스타일 또는 나열된 스타일 객체들을 알파벳 순으로 정렬
  • eslint-plugin-react-hooks
    • react-hooks/rules-of-hooks: 리액ㅌ 훅스 사용 규칙을 지키도록
    • react-hooks/exhaustive-deps: 리액트 훅스 함수에서 사용된 값들을 의존성 선언하도록
  • @typescript-eslint/parser
    • typescript에서 eslint를 사용할 수 있도록 파싱
  • @typescript-eslint/eslint-plugin
    • typescript에 eslint 설정 적용

3/1 - 3/7

React native dimension

  • 앱 실행 시 처음 dimension을 가져와서 저장해두었고 orientation에 따라 width, height값 설정 -> 디바이스의 width, height은 고정되어있고 화면 회전에 따라 두 값을 맞바꿈
  • 가로화면에서 현재 바라보고 있는 layout width와 스크롤 페이징 적용되어있는 게 갑자기 이상해졌다 -> 스크롤이 가능한 화면의 크기와 스크롤 위치값을 비교하는 조건이 있는데 우연하게도 테스트한 디바이스에서 이 값들이 정수로 반환되어 조건문이 실행되었지만 이슈를 발견한 디바이스에서는 123.45와 123.44 같은 실수를 반환하여 해당 조건이 의도와 다르게 적용되었다
  • dimension을 전역으로 설정해서 생긴 이슈가 아닌 전역으로 설정하고 테스트하면서 발견할 수 있었던 숨겨진 보물찾기

redux-toolkit

  • 기존 redux + saga 구조
  • Action, type, reducer 분리되어있던걸 다시 하나로 합치는 ducks pattern
  • 구분해서 사용하던걸 다시 합치는 이유는?

AWS Amplify

  • 서버 아니고 서버리스
  • 기존에 구현되어있는 REST API를 가져와서 사용할 수 있을까
  • 인증, 호스팅, API 이런걸 다 지원해주는데 이것들을 필요로하지 않는다면/이미 구현되어 있다면 amplify를 사용하면서 얻을 수 있는 건?
©Jiggag, Built with Gatsby