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


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


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


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


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


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


한줄 요약하면 arrow function 짱짱맨

'javascript' 카테고리의 다른 글

javascript] bind vs wrapper  (0) 2018.11.17
callback 패턴 함수를 await로 쓰는 방법  (0) 2018.05.01
nodeJs require  (0) 2018.04.13
함수형 프로그래밍 : reduce  (0) 2018.04.07
promise 대신 async, await를 사용하자  (0) 2018.03.22
let의 필요성  (0) 2018.03.20

after도 안먹는다.

focus, placeholder는 되는데

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

'CSS, HTML' 카테고리의 다른 글

input tag는 before가 안먹는다.  (0) 2018.10.10
css 마진의 비밀  (0) 2018.09.16

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


'FrontEnd > react' 카테고리의 다른 글

routing animation을 해보자  (0) 2018.10.04
react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16

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

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

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

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

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


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


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

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

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

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

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

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

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


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

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

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

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




'CSS, HTML' 카테고리의 다른 글

input tag는 before가 안먹는다.  (0) 2018.10.10
css 마진의 비밀  (0) 2018.09.16

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

'FrontEnd' 카테고리의 다른 글

초간단 그림으로 보는 flux architecture  (0) 2018.07.25
lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

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

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

const Wrapper = shallow(<MyComponent />);

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

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


const instance = Wrapper.instance() as MyComponent;

instance.myMethod();

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


+ Recent posts

티스토리 툴바