coding59 '??', 널 병합 연산자 (Nullish coalescing operator) 문법 leftExpr ?? rightExpr 널 병합 연산자 (= 물음표 2개) 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 연산자를 반환하고, 그렇지 않으면 왼쪽 연산자를 반환하는 논리 연산자. || 차이점? ||연산자가 왼쪽 연산자가 null, undefined뿐만 아니라 falsy값에 해당하는 경우 오른쪽 피연산자를 반환하는 것과 달리 ??연산자는 falsy값을 처리하지 않고 원시값으로 처리하여 연산한다. const or = 0 || 'hi'; // 'hi' const not_or = 0 ?? 'hi'; // 0 2021. 12. 22. 페이지 전환 시 스크롤 위치 기억 하기 구현 개발스펙 React Typescript Zustand 로직 1. currentTarget을 이용해 클릭한 좌표 구하기 2. state에 좌표 저장 list.tsx // 페이지 이동 함수 const handleMovePage = (e:React.MouseEvent) => { e.stopPropagation(); const { currentTarget } = e; if (currentTarget) { setScrollChk(currentTarget.parentElement?.scrollTop); // 스크롤 좌표 구해서 state 저장 // page 이동 로직 } } // 마운트 시 함수 연결 React.useEffect(()=>{ const scrollContainer = document.getElemen.. 2021. 12. 22. 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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
