본문 바로가기

coding-heesong86

window MutationObserver 알아보기 DOM 변경되어써?! 체크해주는거 new MutationObserver( function callback ) callback: 콜백 함수는 DOM 변경시 마다 호출 인자 1): obj[] 2): MutationObserver MutationObserver 인스턴스함수들 observe(): 특정 노드에서 DOM 변경의 알림을 받을 수 있도록 뮤테이션옵저버 인스턴스 등록 disconnect(): 변경 알림 안받을거야 takeRecords(): 뮤테이션옵저버 인스턴스의 레코드 큐를 비우고 안에 든 것 반 observe(): MutationObserverInit childList: 대상 노드의 자식 요소의 추가 및 제거가 관찰되어야 하는 경우 true로 설정. subtree: 대상 및 대상의 자손에 대한 돌연변.. 2021. 12. 20.
Next.js에서 백그라운드 이미지 적용해서 애니메이션 주기 import image from 'next/image'; const aa = {dkdj:dfjdk, dkjlsjd:skfjslkdf}; return ( ) const Image = styled.div... &>img { &.hover { trasnform: scale(0.2) ... } } ...; 2021. 11. 17.
zustand 사용하기 🚀 스토어 만들기 const useStore = create(set=>({ bears: 0, increasePopulation: () => set(state => ({ bears: state.bears + 1})), removeAllBears: () => set({ bears:0 }); }))set 함수는 state를 병합해주는 함수로써 객체, 함수등을 넣어서 사용할 수 있다. 구성요소 바인딩 provider가 따로 필요하지 않으며 어느 페이지에서나 가져와서 사용하면 된다. 상태를 선택하면 구성 요소가 변경 사항에 따라 다시 렌더링 된다. const BearCounter = () => { const bears = useStore(state => state.bears); return {bears} around.. 2021. 11. 9.
Canvas API - 기본 도형 그리기 직사각형 그리는 3가지 방법 1. clearRect(x, y, width, height) 정의된 사각형의 모든 픽셀을 투명으로 설정하고 이전에 그린 내용을 지운다. 2. fillRect(x, y, width, height) 너비와 높이에 의해 크기가 결정되고 x, y 위치에 채워진 사각형을 그린다. 3. strokeRect(x, y, width, height) strokeStyle 및 기타 컨텍스트 설정에 따라 윤곽선 사각형을 그린다. 텍스트를 그리는 3가지 방법 1. fillText() 2. strokeText() 3. measureText() 측정된 텍스트에 대한 정보(= 너비)를 반환한다. let text = ctx.measureText('Poburi'); console.log(tex.. 2021. 10. 31.

티스토리툴바