What Iterator란 반복자라고도 하며 배열과 비슷하지만 배열과 달리 next()라는 메서드를 가지고 있어야 하고, {value, done} 이라는 속성 값을 가지고 있는 객체이다. 본 글에서는 Iterator에 대한 기본 개념 및 자세한 설명보다는 entries()와 같은 메서드로 배열에서 생성된 Iterator 객체를 사용하는 방법에 대해서 간략히 다룰 예정이다. How Array.entries() : Iterator의 [index, value]를 반환 const arr = ['A', 'B', 'C']; const iterator = arr.entries(); for (const x of iterator){ console.log(x); } // Console [0, 'A'] [1, 'B'] [2..

What 자바스크립트를 이용해서 DOM을 제어할 때, 그 DOM의 텍스트 속성으로 자주 사용되는 것들이 있다. HTML 태그까지 모두 가져오는 innerHTML, 태그를 제외하고 오로지 텍스트만 가져오는 innerText, 텍스트 노드를 가져오는 textContent가 바로 이번에 다룰 DOM 텍스트 속성들이다. 각 속성별로 대표적인 특징이 무엇인지, 무슨 차이가 있는지 알아보도록 하자. How innerHTML Hello World! const app = document.getElementById('app'); console.log(app.innerHTML); // Console Hello World! innerHTML은 가장 일반적이고 많이 사용되는 속성 중 하나이다. 사실 텍스트 속성이라고 하기에도..

What 상대 좌표는 현재 우리가 보고 있는 브라우저 창의 크기(뷰포트)를 기준으로 위치를 나타날 때 쓰이고, 절대 좌표는 전체 페이지 내에서 해당 요소가 어디에 위치하였는지를 구할 때 쓰인다. 높이가 10,000px인 페이지가 있다고 할 때, 페이지 중앙에 있는 요소의 상대 좌표와 절대 좌표를 구해본다면 절대 좌표는 5,000px 정도가 나오더라도 상대 좌표는 1px 밖에 안 나올 수도 있는 것이다. How 윈도우 내부 (뷰포트) 크기 구하기 const width = window.innerWidth; // 뷰포트 너비 const height = window.innerHeight; // 뷰포트 높이 브라우저 창을 봤을 때, 상단의 주소창/북마크 바 및 우측의 스크롤바, 브라우저 창을 감싸고 있는 테두리 ..

What 스프레드 연산자란, ES6에서 추가된 '...'와 같은 형태의 문법을 말하는데 객체나 배열, 함수 등에서 값이나 인자를 한꺼번에 집어넣기 위한 역할을 수행하기 위해 태어난 아이라고 생각하면 된다. 말 그대로 펼친다는 의미의 스프레드 연산자를 이용하면 객체나 배열을 더 효율적으로 다룰 수 있다. How 배열에서 사용하는 경우 // 배열과 배열을 더하는 경우 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6] // 기존 배열에 새로운 값을 추가하는 경우 const arr1 = [1, 2, 3, 4]; const arr2 = [...ar..

문제 코딩 공부를 위해 혹은 수정을 위해 여러 사이트를 뜯어보다 보면, 문득 드는 생각이 있다. "어떤 건 script의 위치가 head에 있고, 어떤 건 body 안에 있고.. 이건 또 맨 밑에 있네? 도대체 script의 위치는 뭐가 맞는 거지...?" 이것은 웹 구조를 공부하지 않은 사람이라면 충분히 헷갈릴 만한 문제이다. 일단 정답은 HTML의 맨 밑에 위치하는 것이 일반적으로 좋다. 그 이유는 웹 브라우저가 HTML을 렌더링하는 과정을 보면 쉽게 이해할 것이다. 원리 Hello! DOM을 조작하는 코드가 있는 app.js를 불러온다고 하자. 1번의 경우 script는 실행되지 않는다. 하지만, 2번의 경우 script는 실행된다. 코드는 똑같지만, script를 어디서 불러오냐의 차이로 실행 여..