개구리 탈출하기

Not using xPercent & yPercent 특정 offset으로 element 의 중심을 맞추고 싶을 때, {xPercent: -50, yPercent: -50, x: 100, y: 300}으로 맞출 수 있다. x, y에도 percent value를 쓰지만 이건 나중에 혼동을 일으킬 수 있다. percentage-based translation 을 쓰려고 할 때 xPercent나 yPercent를 쓰는 것이 더 좋다.  Recreating animations over and overTweens & timeline을 미리 만들어 놓는 것은 여러가지 장점이 있다. Performance 측면에서 필요할 떄 바로 만드는 것보다, 미리 만들어 놓으면, animation instance가 더 적게 필요하..

https://gsap.com/resources/fouc/  Avoiding FOUC Javascript 가 실행되기 전에 브라우저가 ASAP 렌더링 하기 때문에 initial style을 javascript 로 설정하는 경우, unstyled content가 눈에 띄게 된다. solution: visibility:hidden으로 세팅을 해놓고, autoAlpha property를 사용하자. autoAlpha 는 opacity 와 visibility에 영향을 끼치지 때문에, opacity가 0보다 크게 되면, visible하게 변하게 된다.  autoalpha는 opacity와 동일한데, 만약에 0이면, visibility property가 hidden이 되는 것이다. visibility property..

에디터를 만들다가 상태관리를 효율적으로 할 필요를 느껴서 React 공식 문서를 찾아봤는데, 너무 잘 정리가 되어 있어서 조금 정리를 해 보았다. 출처 : https://react.dev/learn/managing-state Managing State – React The library for web and native user interfaces react.dev Sharing State Between Components 두개의 components 에서 하나의 스테이트를 공유하기 위해서는 공통 부모 component에 state 를 추가하고 event handler와 함께 그것을 pass it down 하면 된다. For each unique piece of state, you will choose t..

Matter js 를 사용해서 움직이는 DOM element 를 만들어 보기로 했다. Matterjs 는 2d physics engine을 만들 수 있는 library 이다. Matterjs만 사용해서 그 안에 있는 render 기능을 쓰면 canvas element를 사용하게 된다. 이렇게 되었을 때 어떤 event가 있을 때 각 body의 style property를 쉽게 변경할 수 없다는 단점이 있다. https://stackoverflow.com/questions/63906218/using-matter-js-to-render-to-the-dom-or-react Using Matter.js to render to the DOM or React I want to render custom HTML el..