Puppy's paw

bind, call, apply 는 자바스크립트 함수를 부르는 강력한 방법이다.

하지만 지금 프로젝트에서는 context를 넘겨준다는 것에 대한 혼란스러움 때문에 지양되고 있다.

바인드로 함수를 부르면 일단 코딩을 줄 일 수 있다.

그런데 이렇게 하는 것이 얼마나 큰 효율을 얻을 수 있는 지는 생각해 봐야한다.

https://github.com/davidmarkclements/v8-perf

함수 콜에 대한 성능 이슈 관련링크인데 읽어볼만 하다

한줄 요약하면 arrow function 짱짱맨

after도 안먹는다.

focus, placeholder는 되는데

before, after는 왜 수도 코드가 안먹을까....

react-router-dom의

Route는 unmount되는 즉시 dom에서 컴포넌트를 즉시 삭제한다

그래서 새로운 페이지의 등장 애니매이션은 쉽지만

기존의 페이지는 즉시 사라지기 때문에 애니매이션 효과가 반감된다.

React는 공식적으로 react-transition-group을 이용해서 해결하라고 한다.

<Route render={({location}) => (

<TransitionGroup>

  <CSSTransition key={location.key} classNames="page" timeout={300}>

    <Switch>

      <Route/>

      <Route/>

    </Switch>

  </CSSTransition>

</TransitionGroup>

)} />

와 같이 route이동에서 애니매이션을 쓸 수 있다.

주의할 점은 hashrouter를 쓸 경우 location.key가 없기 때문에 location.pathname 같은 걸로 대체해야 한다.

또한 location.pathname을 쓸 경우 다음과 같은 문제가 있다.

https://github.com/reactjs/react-transition-group/issues/136

참조

https://reacttraining.com/react-router/web/example/animated-transitions

CSS도 분명히 프로그래밍 되어있을 텐데

작성하다보면 이렇게 되야 하는게 맞는데 예상하지 않은 결과가 나올 때가 많다.

우리가 잘 모르는 요소들이 많기 때문인데 이런 원리를 잘 설명해논 글을 찾기가 쉽지 않다.

css문서를 직접 찾아서 자세히 읽어보면 나와있겠지만 언어의 압박과 그 분량이 너무 많다.

시간나면 읽어보는게 좋지만 css를 깊이 이해하는 것은 항상 우선 순위에 밀려나 있다.

그 동안 이상하게 생각해왔던 것들 중 원리를 이해하고 풀린것 중 하나가 마진의 작동 방식이다.

1. 마진은 마진끼리 영향을 주지 않는다.

2. inline 타입은 마진이 적용되지 않는다.

3. inline-block은 부모 태그를 마진으로 밀어낼 수 있다.

4. block타입은 부모 태그 자체를 마진으로 밀어내지 않는다.

   하지만 마진이 부모에 포함된 solid한 객체를 만나면 밀어낸다.

   border나 padding이 solid한 것에 포함된다. 

5. overflow: hidden 인 부모도 margin collapsed 가 안된다.

아직 그런 적이 없지만 5번때문에 왜 안되는 지 몰라서 개고생하면 참 억울 할 것 같다.

solid하다는 개념도 참 애매하다.

단순히 W3로 css를 공부했다면 이런 개념을 알기 어렵다.

왜 이렇게 직관적으로 파악하기 힘든 개념이 만들어졌는지 모르겠다.

https://stackoverflow.com/questions/37910669/what-is-the-difference-between-never-and-void-in-typescript

function expression 과  function declaration 에서 void 와 never의 차이

https://stackoverflow.com/questions/40251524/typescript-never-type-inference

never를 이용한 타입 안정성 예시

https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html

android 가상머신 돌릴 때

Intel XHAM 사용시 host GPU를 사용할 경우 발생

GPU사용을 끄면 발생하지 않는다.

adb logcat "eglCodecCommon:S"

로그가 떠도 앱은 가동 된다.

성능 이슈는 모르겠다

모카 사이드바가 js는 잘 찾는데

ts를 전혀 찾지 못할 경우가 있다.

보통 ts-node/require를 이용 할 것이다.

그런데 이게 문제 인걸 찾는 것도 한참 걸렸고

왜 문제인지 찾는 것도 한참 걸렸다.

아무런 에러가 로그가 찍히지 않기 때문이다.

결정적인 건 ts-node버전을 착각하고 있었다.

모카 사이드바는 최신 ts-node버전을 필요로 한다.

이글을 쓰는 지금은 7.0.0이다

npm list ts-node로 확인해 보자

정말 잘 표현한 다이어그램

출처: https://cdn-images-1.medium.com/max/1600/1*stmn8kxXJrX9hbk39hHQJA.png

es6에서 class method를 화살표 함수로 쓰면 enzyme으로 렌더링한 컴포넌트에서 찾을 수 없다.

렌더링한 컴포넌트 클래스 메서드를 사용하고 싶을 경우

const Wrapper = shallow(<MyComponent />);

Wrapper.instance().myMethod() 와 같이 쓰면 되는데

typescript를 사용하고 있다면 린트에서 에러를 발생시킨다.

const instance = Wrapper.instance() as MyComponent;

instance.myMethod();

와 같이 캐스팅해서 쓰면 된다.