doeunn.log

▶요소 검색하기 이전에 살펴봤던 parentNode, ChildNode 같은 노드 프로퍼티를 사용하면 원하는 노드에 직접 접근할 수 있습니다. 하지만 이 방법은 문서 구조가 자주 변경되거나 계층적으로 깊게 위치한 요소에 접근하는 경우 효율적으로 탐색할 수 없습니다. 이런 경우 querySelector(), getElementById() 같은 요소 검색 메서드를 통해 해당 요소에 바로 접근할 수 있습니다. 1) getElementById() 요소의 id 속성을 이용해 document.getElementById(id)로 접근할 수 있습니다. id는 문서에서 유일하기 때문에 요소를 찾을 때 가장 빠르게 찾을 수 있습니다. 일치하는 id를 가진 요소가 있을 경우 해당 DOM 요소인 Element 객체를 반환하며..

▶DOM Node 추가·제거 DOM API를 사용해 동적으로 기존 노드의 위치를 바꾸거나, 노드를 추가하고, 제거하는 방법에 대해 알아보겠습니다. 1) createElement document.createElement(tagName)을 호출하면 tagName에 맞는 요소 노드를 생성합니다. const divElem = document,createElement('div'); // const liElem = document.createElement('li'); // liElem.className = 'li-class-name'; // class 속성 할당 liElem.id = 'li-id'; // id 속성 할당 liElem.innerHTML = "삽입되는 요소"; // li 내부 HTML 노드 할당 2) ..

▶Node 노드 인터페이스는 전체 문서의 요소들에 대한 객체 형태의 기본 형태의 기본 데이터 타입입니다. DOM 트리의 구성 요소를 나타내며 nodeType이나 nodeName, nodeValue, 자식 노드와 형제 노드에 대한 관계 등 여러 정보를 갖습니다. 또한 appendChild(), removeChild() 같은 노드 조작 메서드 등을 사용할 수 있습니다. 1) 노드의 계층구조 노드 인터페이스는 트리 형태의 계층 구조가 존재합니다. 위 그림에서 알 수 있듯이 계층 구조의 제일 꼭대기에는 EventTarget이 존재합니다. 이 EventTarget 추상 클래스는 이벤트가 발생했을 때 대상이 되는 타깃을 의미합니다. Node는 EventTarget을 상속받은 추상 클래스로 DOM 노드의 기초가 되며..

▶BOM과 DOM 프론트엔드 개발의 발전으로 많은 플랫폼에서 자바스크립트 코드를 구동할 수 있게 되었지만, 여전히 가장 많이 사용되는 플랫폼은 브라우저입니다. 브라우저를 통해 우리들은 컨텐츠를 볼 수 있고 필요한 정보를 검색할 수 있습니다. 그리고 프론트엔드 개발자는 DOM과 다양한 이벤트를 사용하여 사용자가 브라우저 내에서 인터랙션(interaction)을 할 수 있도록 만듭니다. 앞으로 화면 요소에 접근할 수 있는 DOM API와 브라우저 정보를 제공하는 BOM API에 대해 살펴보고, 이를 이용해 페이지를 구성하고 사용자에게 정보를 제공하는 방식에 대해 알아보겠습니다. ▶문서 객체 모델 문서 객체 모델(Document Object Model, DOM)은 XHTML, HTML 문서용 API입니다. D..

▶모듈 모듈은 외부로 공개한 API를 통해서 상태를 변경하고 내부 구현에 대한 캡슐화의 역할을 합니다. 각각의 모듈은 애플리케이션을 구성하는 단위가 하며, 모듈 단위로 재사용하여 불필요한 코드를 줄이고 유지 보수성을 높일 수 있습니다. 1) export, import 모듈 안에 선언한 식별자를 다른 모듈에서 접근할 수 있도록 하고 싶다면 export 키워드를 사용하여 내보내기를 하면 됩니다. 함수, 변수, 클래스 모두를 내보낼 수 있으며, 이들은 반드시 모듈의 최상위 위치(top-level)에 존재해야 합니다. export const a = 1; export function foo() { // ... } const b = 1; function bar() { // ... } export { b, bar }..

▶클로저(closure) 클로저(closure)는 함수의 랙시컬 스코프를 기억하는 함수가 렉시컬 스코프를 벗어난 외부 스코프에서 실행될 때에도 자신의 렉시컬 스코프에 접근할 수 있게 해주는 것입니다. 클로저는 자바스크립트에서 굉장히 중요한 개념이며, 함수를 사용하는 곳이면 어디든지 적용할 수 있습니다. 클로저를 활용하면 특정한 상태를 기억하고 캡슐화하거나 나아가 하나의 모듈을 정의하는 패턴으로도 확장할 수 있습니다. 이렇게 강력한 활용도를 가진 클로저는 앞서 설명한 렉시컬 스코프와 스코프 체인(이하 렉시컬 스코프 체인)만 제대로 이해하면 쉽게 사용할 수 있습니다. function foo() { var a = 1; function bar() { console.log(a); // 1 } bar(); } fo..