JavaScript (34) 썸네일형 리스트형 DOM 탐색하기 DOM 탐색하기 ko.javascript.info DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 합니다. DOM에 수행하는 모든 연산은 document 객체에서 시작합니다. document 객체는 DOM에 접근하기 위한 '진입점'이죠. 진입점을 통과하면 어떤 노드에도 접근할 수 있습니다. 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = document.documentElement document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 태그에 해당하는 document.documentE.. getElement*, querySelector*로 요소 검색하기 document.getElementById 혹은 id를 사용해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용하여 접근할 수 있습니다. Element 그런데 아래와 같이 id 속성 값을 그대로 딴 전역 변수를 이용해 접근할 수도 있습니다. Element 그런데 이렇게 요소 id를 따서 자동으로 선언된 전역 변수는 동일한 이름을 가진 변수가 선언되면 무용지물이 됩니다. 따라서 id를 따서 만들어진 전역 변수를 요소 접근시 사용하면 안됩니다. id에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다. 브라우저는 스크립트의 네임 스페이스와 DOM의 네임 스페이스를 함께 사용할.. iterable 객체 반복 가능한(iterable, 이터러블)객체는 배열을 일반화한 객체입니다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for...of 반복문을 적용할 수 있습니다. 배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다. 배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합등)을 나타내고 있는 경우 for...of 문법을 적용할 수만 있다면 컬렉션을 순회하는데 유용할 것입니다. Symbol.iterator 직접 이터러블 객체를 만들어 이터러블이라는 개념을 이해해 보도록 합시다. for...of를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들겠습니다. 예시의 객체 range는 숫자 간격을 나타내고 있습니다. let range.. 모던 자바스크립트 튜토리얼 | 원시값의 메서드 원시값의 메서드 ko.javascript.info 자바스크립트는 원시값(문자열, 숫자등)을 마치 객체처럼 다룰 수 있게 해줍니다. 원시값에도 객체에서처럼 메서드를 호출할 수 있습니다. 원시값은 객체가 아닙니다. 원시값과 객체는 다음과 같은 차이가 있습니다. 원시값 - 원시형 값입니다. - 원시값의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 형으로 총 일곱가지입니다. 객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있습니다. - { name: "John", age: 30} 와 같이 대괄호 {}를 사용해서 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종입니다. 객체의 장점 중 하.. 모던 자바스크립트 튜토리얼 | 이벤트 위임 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다. 예제를 살펴봅시다. 다음은 고대 중국 철학에서 유래한 팔괘도입니다. HTML은 대략 다음과 같습니다. Bagua Chart: Direction, Element, Color, Meaning Northwest Metal .. 모던 자바스크립트 튜토리얼 | 버블링과 캡처링 버블링 버블링(bubbling)은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다. 거의 모든 이벤트는 버블링이 됩니다. focus이벤트와 같이 버블링이 되지 않는 이벤트도 있습니다. event.target 부모 요소의 이벤트 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.targ.. 4 Reasons Why You Should Prefer Vite Over Create-React-App 아래 글을 번역한 것입니다. 4 Reasons Why You Should Prefer Vite Over Create-React-App (CRA) - Semaphore Unlike CRA, Vite does not build your entire application before serving, instead, it builds the application on demand. It also leverages the power of native ES modules, esbuild, and Rollup to improve development and build time. semaphoreci.com CRA는 대부분의 개발자가 리액트 프로젝트를 scaffold하고 개발 서버를 설정하는데 사용해온 도구입니다. 별.. Understanding Repaint and Reflow in JavaScript 브라우저 엔진의 주요 역할은 HTML 문서와 웹 페이지의 기타 리소스를 사용자 기기에서 시각적으로 표현하는 것입니다. 브라우저 엔진외에도 관련 개념과 관련하여 두가지 다른 용어가 일반적으로 사용됩니다. 브라우저 엔진 외에도 관련 개념과 관련하여 두가지 다른 용어가 일반적으로 사용됩니다. 레이아웃 엔진과 렌더링 엔진입니다. 이론적으로는 레이아웃과 렌더링(또는 "페인팅")을 별도의 엔진에서 처리할 수 있습니다. 그러나 실제로는 긴밀하게 결합되어 있으며 분리하여 고려하는 경우는 거의 없습니다. 어떤 링크나 URL 브라우저에서 엔터키를 누르면 해당 페이지에 HTTP 요청을 하고 해당 서버는 HTML 문서를 응답으로 제공합니다. - 브라우저는 HTML 소스코드를 구문 분석하여 모든 HTML 태그에 해당하는 노드가.. 이전 1 2 3 4 5 다음
