개구리 탈출하기

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..

Container 안에서 생성된 모든 파일들은 writable container layer에 저장된다. 이것은 아래와 같은 사실들을 의미한다. - 컨테이너가 사라지면 이 데이터들은 유지되지 않는다, 또한 이 데이터들을 다른 프로세스에서 사용하려고 할 때 꺼내기가 쉽지 않다. - container의 writable layer는 host machine과 tight하게 커플링 된다. 데이터를 어디론가 이동시키는 것은 쉽지 않다. 어떤 방식으로 mount 되는가에 상관 없이 data는 컨테이너 안해서 똑같이 보인다. 하지만 방식 자체는 여러개가 있는데 이 글에서는 그 세가지에 대해서 간략히 다뤄보고자 한다. Volumes : docker에 의해 관리되는 host filesystem (/var/lib/docker..

에디터를 만들다가 상태관리를 효율적으로 할 필요를 느껴서 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..

출처: https://www.developer.com/languages/inti-function-golang/ Take a quick look at the init() function no arguments & return nothing. meant to run before any other piece of code. whenever the init() function is declared in code, Go loads and runs it prior to anything else in the package. have more than one init() function. the order of their declaration matters in the code, execute exactly in th..

https://qiita.com/hogedigo/items/15af273176599307a2b2 chan chan は意外と美味しい - Qiita すっかり寒くなってきてチャンチャン焼きが美味しい今日この頃ですね(^_^)ところで、Go言語でchannelをchannelで受け渡し出来ること、ご存知でしょうか。自分の周囲では使っている人少な… qiita.com 1. 요청 / 응답 채널을 이중으로 설정해서 응답을 받을 수 있다. error를 받고 싶은 경우, chan chan error를 사용한다. 요청을 보낼 때 channel of channel 에 error channel을 넣어서 보내면 그 채널에 처리된 결과를 넣어주게 되면, 요청을 처리한 후의 결과를 받을 수 있게 된다. 2. 처리 대기 Request / Response..

한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. , , , 태그의 경우 cross-origin 정책을 지원하며, image의 경우 다른 사이트의 png, jpg 등의 리소스에 접근하는 것이 가능하다. fetch api 등을 사용해서 javascript를 사용해서 요청을 보내는 경우엔, 다른 도메인 서버에 있는 자원을 가져오려고 할 때 에러가 난다. 기본적으로 same origin policy 를 따른다. 동일한 출처에서만 리소스를 공유할 수 있다를 의미한다. 동일 출처가 아닌 경우 접근을 차단하는 이유는? 기존 웹 브라우저는 하나의 서버에 요청해서 서버가 HTML을 반환해주는 동작을 했었기 때문에 다른 도메인에서 접근하는 것은 ..

Redeclaration and reassignment In a := declaration a variable v may appear even if it has already been declared, provided: this declaration is in the same scope as the existing declaration of v (if v is already declared in an outer scope, the declaration will create a new variable §), the corresponding value in the initialization is assignable to v, and there is at least one other variable that ..

Background long-lived process의 경우, Goroutine 여러개를 들고 있을 수 있다. 고루틴들은 데이터가 들어올 때까지 기다리며 block되기 때문에 그들은 wakeup, do their work, pass data on을 할 수 있어야 한다. 하지만 control하기 어려운 resource들에 대해서 의존성이 있을 수 있다. 예를 들면 webservice에서 data를 끌어올수도 있고 어떤 일시적인 파일에 대해서 monitoring을 할수도 있다. 이런 경우 고루틴은 bad state에 쉽게 stuck될수도 있고, external help에 의해서가 아니면 회복이 불가능하다. 고루틴이 healthy한 상태로 남아있도록 보장하는 mechanism을 만들수 있는데, 이때 unhea..

react component를 사용해서 edit 할 수 있는 걸 만들기 위해 react-moveable과 react-selecto를 사용하면서 찾아보며 알게된 CSS property에 대해서 정리하고자 한다. Pointer events 클릭 이벤트 허용 여부이다. hover, click, drag등에 어떻게 반응할 지 지정할 수 있다. 대부분의 속성값은 svg전용이다. "stroke": element의 둘레에 있을 때만 pointer event의 타겟이 될 수 있다. 이 속성을 이용하면, 화살표 같은 경우 svg의 영역 자체는 넓지만, 안쪽 화살표, or 직선을 선택할 때만 pointer event가 적용될 수 있도록 할 수 있다. "fill": interior of the element 일때 point..