본문 바로가기

coding/javascript10

페이지 전환 시 스크롤 위치 기억 하기 구현 개발스펙 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.
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.
Fetch API 들어가기 Fetch API를 이용하면 요청/응답과 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch()메서드를 이용하는 것으로 비동기 네트워크 통신을 쉽게 할 수 있게 도와줍니다. Fetch의 기본스펙이 jQuery.ajax()와 다른 두가지: 1. fetch()로 부터 반환되는 프로미스 객체는 HTTP error 상태를 reject하지 않음. (HTTP Status Code가 404 또는 500을 반환하더라도..! ) 대신, ok상태가 false인 리졸브가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됨. 2. 보통 쿠키를 보내거나 받지 않음. 쿠키를 전송하기 위해서는 자격증명 옵션을 반드시 설정해야함. 2017년 8월 25일 이후 기본.. 2021. 10. 23.

티스토리툴바