[이달의 배움] 2018년 10월

[2018-10-22]

React에서 setState시에  여러번 setState를 호출할시에는

setState({ 형태가 아니라 

setState((state,props) =>{

});

형태처럼 함수로 던져야 한다.

// 공식 홈페이지 

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

[2018-10-20]

css 애니메이션에서는 하드한 작업을 하는 css 애니메이션과 그렇지 않은 애니메이션이 있다.

이에 앞서 기본적으로 브라우저 는 싱글스레드 기반이기 때문에 블로킹 로직 (for 문 ) 같은 경우가 있을 경우

UI 가 멈추는 현상이 발생한다. 이 그렇기 때문에 css animation 도중에도 블로킹 로직중 하나인 for문을 일정 이상 돌리

게 되면 애니메이션이 멈추는 현상이 같이 발생하게 된다.

하지만 모든 UI 가 멈추지는 않는다.

(브라우저 역시 C++기반으로 만들어졌고 OS 위에서 돌아가는 형태이기 때문에 js 만 JIT형태의 싱글스레드지 

브라우저 내부적으로는 싱글스레드 같은 형태를 사용할수가 있기 때문이다. Chrome에서는 이와같은 경우를 ServiceWorker로 해결하려고한다.

회사에서 일하다가 알게된건데 어떤 연구원이 직접 링크 해준 url이다.

@연구원님 감삼다

// 블로킹 로직을 취하여도 모든 UI가 멈추지 않는 현상 확인 

http://www.phpied.com/css-animations-off-the-ui-thread/

일부 애니메이션은 main thread 와 관계없이 실행되는 경우가 있다. 완전한 native 기반 (브라우저)

에 css 애니메이션은 main thread에서 도는것이 아니라 composite thread 에서 실행된다고 한다.(다른 스레드이기 때문

에 main thread에서 실행되는 블로킹 로직에 의해 ui 가 멈추는 현상이 발생하지 않는다. compositor thread에서 돌기 

떄문 (배움 노트이기 떄문에 배운거고.. 이에대해서는 따로 조사해봐야겠다)

대표적으로 공유 받은 내용에선

transform 과 opacity 의 경우에는 compositor thread에서 실행되기 때문에 블로킹 로직에 영향을 받지 않게 된다. 

background-color 같은 경우는 헤비한 동작으로 main thread에서 동작하게 된다.

// 관련 링크 공유

https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance#css-vs-javascript-performance

와 같은 형태로  ** keyframe에서는 !important 가 무시됩니다.

@-webkit-keyframes blink {

    0% {

        -webkit-transform: scale(1);

        opacity: 1;

    }

    100% {

        -webkit-transform: scale(0.5);

        opacity: 0;

    }

}

링크를 안가보실까봐 중요    부분 을 캡처 하였습니다.

의문이 드는점은 Chroem,FireFox,Opera 정도면 IE는 ???? 아직 국내 웹에선 IE를 빼놓을수가 없다.... 언제 ts를 하지

[2018-10-15]

리덕스 - 상태관리 lib 

직접 그려본 도식도 흠흠 

[2018-10-03]

&& 연산자 - 가드 연산자

|| 연산자 - 기본 연산자

ex:

npm package.json 에서

^(minor,patch 는 업데이트 가능)

~(patch 업데이트)

x.x.x  모든 숫자 가능

< > <= >=  그대로의 의미를 가짐

npm 설치

npm i module@version 명으로 버전 명 설정 가능

ex:)

npm i cookie-parser@1.4.2

npm 업데이트

npm update ( 전체 업데이트 ) ^~ x.x.x.x => 등의 형태에 맞게 package.json 에있는

또는 

npm 부분 업데이트

npm update cookie-parser (특정 모듈)

npm 삭제

npm remove cookie-parser

npm 상태 확인(업데이트 가능한 리스트 확인)

npm outdated