I'm a Fig, Not a Pig

목차 1. getAttribute() 문법 2. 예제 3. 정리 오늘은 요소의 속성 값을 가져오는 방법인 .getAttribute()에 대해 다룰 것이다. 1. getAttribute() 문법 element.getAttribute(attributename); 여기서 attributename은 얻고자 하는 속성 값에 해당하는 속성 이름이다. 2. 예제 Example Div 개발자 도구(f12)를 확인해보면 "Example Title"이 출력된 것을 확인할 수 있다. getAttribute() 메소드를 사용하면 버튼 요소의 onclick같은 속성 값도 가져올 수 있다. 다음의 예제는 요소의 onclick 속성 값을 가져와 콘솔창에 출력하는 코드이다. Click Me 3. 정리 getAttribute() 메소..

목차 1. 이벤트 버블링 2. 이벤트 캡처링 3. 이벤트 위임 오늘은 이벤트 버블링, 이벤트 캡처링, 이벤트 위임에 대해 다룰 것이다. 모두 JavaScript에서 이벤트 처리와 관련된 중요한 개념이기 때문에 잘 알아두어야 한다. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventListener('click', functio..

1. 1) id 속성을 통해 태그를 선택할 때, 존재하지 않는 id 값으로 태그를 선택하면 무엇이 출력 되는가? 2) class 속성을 통해 태그를 선택할 때, 존재하지 않는 class 값으로 태그를 선택하면 무엇이 출력 되는가? 답: 1) null 2) null 2. css 선택자로 태그를 선택할 때 a)와 b)의 출력 결과는 같다(O,X) a) const myTag = document.querySelector(‘#myNumber’); console.log(myTag); b) const myTag2 = document.getElementById(‘myNumber’); console.log(myTag2); 답: O 3. querySelector 메소드를 활용할 때 클래스나 태그 이름처럼 여러 개의 요소가..

목차 1. 동기 (Synchronous)와 비동기(Asynchronous) 2. 동기와 비동기의 장단점 3. 동기적 처리 4. 비동기적 처리 1. 동기 (Synchronous)와 비동기(Asynchronous) 동기(synchronous) : 동시에 일어나는 동기는 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이므로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어저야 한다. 비동기(Asynchronous) : 동시에 일어나지 않는 비동기는 동시에 일어나지 않는다는 뜻이다. 요청과 그 결과가 동시에 일어나지 않을 것이라는 약속이다. 2. 동기와 비동기의 장단점 - 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있..

유사 객체 배열(array-like objects)란 무엇이고 배열과 어떤 차이가 있는지 간단하게 알아보겠다. 1. 유사 배열 객체 유사 배열 객체란 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 2. 예시 HTML Hello World I'm Programmer JavaScript const texts = document.querySelectorAll('.text'); console.log(texts); 결과값 배열처럼 보이지만 풀어보면 아래와 같이된다. { 0: div.text, 1: div.text, 2: div.text..

목차 1. 옵셔널 체이닝 2. 단락평가 3. ?.()와 ?.[] 4. 정리 1. 옵셔널 체이닝 옵셔널 체이닝(.?)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근 할 수 있다. 이해하기 쉽도록 예제를 통해 알아보자. 사용자가 여러 명 있는데 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이때 사용자의 주소정보를 알기 위해 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 옵셔널 체이닝이 추가되기 전에는 이런 문제를 해결하기 위..

목차 1. Array.prototype.reduce() 2. 예제 1. Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. -MDN reduce는 보통 배열의 요소들을 하나의 결과로 합치는 용도로 많이 사용한다. - 구문 arr.reduce(callback[, initialValue]) 구문을 이루는 각 요소들은 다음과 같다. 1. callback function reduce 함수는 네 개의 인자를 가진다. 누산기 (acc): accumulator는 callback함수의 반환값을 누적함 현재 값 (cur): 배열의 현재 요소 현재 인덱스 (idx): 배열의 현재 요소의 인덱스 원본 배열 ..

for() forEach() map() 기본 형식 for ( 초기문; 조건문 증감문 ) { 실행문; } 배열명.forEach(function(매개변수) { 실행문; }); 배열명.map(function(매개변수){ 실행문; }); 설명 - 조건식에 부합하면 멈추지 않고 계속 순회한다. - 멈추고 싶은 경우 'break';를 사용하면 된다. - 반복문 기능을 지닌 배열 메서드이다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - for문보다 속도가 빠르다. - map도 반복문 기능을 가지지만, 반환값이 있다는 점에서 forEach와 다르다. - 배열의 요소를 순회하며, 모두 순회하면 실행을 멈춘다. - 'break'; 사용이 불가하다. - 기존 배열의 값..

innerHTML, innerText, textContent 이 셋의 차이점 찾아보다가 innerHTML의 위험성이라는 글을 보게 되었고.. innerHTML만 써왔던 사람으로서 insertAdjacentHTML의 필요성을 몰랐기 때문에 정리 해보려 한다. 따라서 이번 포스팅에서는 innerHTML의 위험성과 더불어 HTML 요소를 추가할 수 있는 또 다른 방법인 insertAdjacentHTML메서드에 대해 다룰 것이다.   1. innerHTMLinnerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용한다.  구문element.innerHTML( text )  예시아래는 간단한 HTML 마크업이다. ca..

목차 1. 배열(array)에서의 구조 분해 할당 2. 객체(object)에서의 구조 분해 할당 구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해준다. 1. 배열(array)에서의 구조 분해 할당 구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다. const [i, ,j] = [2, 4, [5, 6]]; console.log(i,j); // 2 [5, 6] 아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 가능다. const nested = [2, 4, [5, 6]]; const [i, ,j] = nested; console.log(i,j..