용용it

문제 상황 import { ContainerBox } from "../../common/searchCharacter/ContainerBox"; const handleMouseLeave = () => { if (!clicked) { setSelectedItem(null); } }; return ( );}; containerBox 컴포넌트에 onMouseOut 이벤트를 넣어서 컴포넌트를 벗어나면setSelectedItem(null)로 초기화 시키는 작업을 하려고 했는데 전혀 적용이 안되는 문제가 생겼다.    해결 과정 제일 먼저 정공법인 console.log를 사용하여 함수 호출 여부를 확인한다.const handleMouseLeave = () => { conso..

documnet.createElement() 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환. 파라미터에 태그 이름을 넣어서 메서드를 사용하면 된다. // 새로운 요소를 생성합니다. var newDiv = document.createElement("div"); // 새로운 요소를 생성합니다. var newParagraph = document.createElement("p"); // 새로운 요소를 생성합니다. var newLink = document.createElement("a"); 이렇게 생성된 요소는 아직 문서에 추가되지 않았으며, 원하는 위치에 추가하거나 다른 요소와 조작할 수 있다. 예를 들어, 요소를 문서에 추가하려면 appendChild()나 insertBefore() 같은 메서드를 사..

document.getElementById() HTML `id` 속성(Attributes) 값으로 검색한 요소를 반환한다. 여러 요소가 검색되면, 가장 먼저 찾은 요소만 반환한다. 검색 결과가 없으면, `null`을 반환한다. 이걸 콘솔로 찍으면 어떻게 나올까 ? 안녕하세요, 이것은 제목입니다. 가 출력될 것이다. 정답. 말 그대로 "Id의 요소를 얻는다" 그러면 만약에 텍스트만 뽑아서 쓰고싶으면 ? console.log(heading.textContent); 이렇게 텍스트컨텐트만 뽑아서 쓰면된다. 그러면 이제 콘솔에 출력되는 건 안녕하세요, 이것은 제목입니다. document.querySelector() 'CSS 선택자'로 검색한 요소를 하나 반환한다. 여러 요소가 검색되면 가장 먼저 찾은 요소만 반환..

DOM(Document Object Model) DOM이란 HTML 문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게 해준다. 노드(Node) DOM의 기본 구성 요소로이다. HTML 요소, 텍스트, 주석 등 모든 것을 의미한다. 요소(Element) HTML 요소를 의미한다. 문서 내에서 특정한 태그로 묶은 모든 것을 의미한다. 예를 들어, , , 와 같은 HTML 태그로 묶인 내용은 요소이다. 즉, 노드는 DOM의 구성 단위이며, 요소는 그 중 하나로 HTML 문서에서 태그로 묶인 내용을 나타낸다. 자식 요소 1 자식 요소 2 자식 요소 3 console.log(parent.childNodes) 먼저 보자, parent 클래스에 있는 모든 자식 노드를 출력하라고 콘솔로 찍었는데 자식 요..