본문 바로가기

coding-heesong86

firstElementChild vs firstChild firstElementChild Element.firstElementChild 읽기 전용 속성 부모요소의 첫번째 자식요소 반환 자식요소가 없을 경우 null 반환 firstChild Element.firstChild 트리에서 노드의 첫번째 자식 반환 노드에 자식요소가 없으면 null 반환 const list = document.getElementById('list'); console.log(list.firstElementChild.textContent, 'firstElementChild'); console.log(list.firstChild, 'firstChild'); 2022. 1. 1.
크롬 확장자 개발기, 구성요소 살펴보기👀 구성요소: 배경 스크립트 콘텐츠 스크립트 옵션 페이지 UI 요소 1. 메니페스트 파일 만들기 확장프로그램은 매니페스트에서 시작한다. manifest.json 파일을 만들어 기본 세팅 코드 복붙하기: { "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "externally_connectable": { "matches": ["*://*.naver.com/*", "*://*.google.com/*", ...] }, "content_scripts": [ { "matches": [""], "js": ["src/scripts/run.ts"] } ], }아이콘, .. 2021. 12. 24.
'??', 널 병합 연산자 (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.

티스토리툴바