본문 바로가기

javascript21

Critical Rendering Path CRP를 보기전에 DOM, CSSOM, Render Tree에 대해 간단히 봅시다. DOM이란? Document Object Model로 HTML 파일을 브라우저에서 읽게 되면 태그들을 분석해서 자바스크립트 Node라는 Object로 변환 됩니다. 이것을 통해 웹페이지의 요소들을 선택하고, 조작하고 변경을 할 수 있는 겁니다. CSSOM이란? DOM + CSS로 DOM과 우리가 정의한 CSS 파일을 파싱하여 합친것을 말합니다. 마지막 Render Tree란? 이렇게 만들어진 DOM과 CSSOM을 합친 것으로 최종적으로 렌더링 될 노드들만 나타나 있습니다. 만약 display:none인 아이는 여기에 포함이 되질 않습니다. 그래서 렌더링은 어떻게 되는데? 웹페이지를 요청하면 아래 그림과 같은 과정을 거쳐서.. 2023. 3. 10.
이벤트 캡처링과 버블링 아래와 같은 그림이 있다. 해당 그림은 각 네모박스마다. click 이벤트가 등록되어 있는데 아래 코드처럼 이벤트가 등록되어있다. Click Me 여기서 Click Me 버튼을 클릭하면 콘솔로그에는 아래 그림 처럼 나타난다. 이유가 뭘까? 바로 이벤트 버블링 때문이다. 이벤트 버블링이란? 자식 요소가 이벤트가 발생이 되면 부모도 자신이 등록된 이벤트가 호출 되는 것이다. 가장 최상단의 부모까지 이벤트가 발생한다. 다시 정리하면 이벤트 버블링은 HTML 요소에서 이벤트가 발생하면 해당 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 즉, 자식 요소에서 이벤트가 발생하면 부모 요소까지 이벤트가 전파되는 것을 말합니다. 즉, Click Me 결과에 저렇게 나온 이유가 Click Me.. 2023. 3. 6.
window.history API window.history 객체는 현재 브라우저 창의 세션 기록을 나타내는 JavaScript API입니다. 이 객체를 사용하면 브라우저 창의 이전 페이지 및 다음 페이지로 이동하거나, 이전 페이지로 돌아가는 등의 조작을 할 수 있습니다. window.history 객체에는 다음과 같은 메서드와 속성이 있습니다. 메서드: history.back(): 브라우저 창의 이전 페이지로 이동합니다. history.forward(): 브라우저 창의 다음 페이지로 이동합니다. history.go(n): n이 0보다 크면 브라우저 창의 다음 n번째 페이지로 이동하고, n이 0보다 작으면 이전 n번째 페이지로 이동합니다. history.pushState(state, title, url): 현재 페이지의 이력 스택에 새로.. 2023. 2. 28.
자바스크립트 힙(javascript heap) 야! 너 좀 힙한데?(이것만 보면 힙 가능) 자바스크립트로 코딩 테스트 문제를 풀면 우선순위 큐를 사용할 시간이 오게 된다. 하지만 아쉽게도 자바스크립트는 직접 코드를 작성해야 한다. 🥲 우선순위 큐를 알아보기 전에 우선순위 큐는 힙으로 되어있다. 그렇기 떄문에 근본인 힙을 알아야 한다. 힙부터 알아보자. 힙이란? 트리 구조의 일종으로 이진 트리와 비슷해 보이지만 다르며, 최대 이진 힙, 최소 이진 힙이 있다. 힙이랑 이진 힙이랑 같다고 보명 된다. 😀 힙은 이것만 알면 된다능~ 최대 이진 힙 기준 1. 트리의 루트는 최대 값이다. 2. 자식 노드는 항상 부모노드보다 작다. 3. 자식 노드는 순서가 없다. -> 이진트리랑 핵심 차이이다. 4. 최대 2개의 자식노드를 가질 수 있다. 이것만 알면 끝이다. 아래 사진은 이진트리와 최대 이진 힙의 차이다.. 2023. 1. 30.

티스토리툴바