그럼에도 불구하고

요소를 다루는 법에 대해 알아보자 [ 부모 / 자식 / 전 / 후 요소 읽어오기 ] ※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) 소스 코드 HTML 삽입 미리보기할 수 없는 소스 [ 부모 요소에 자식 요소 추가하기 ] ※ 동적 표시 요소를 추가하고..

jQuery가 아닌데 변수명 앞에 $를 붙이는 경우를 알아보자 예전부터 jQuery를 쓰지 않는데 $를 붙이는 경우가 있어서 궁금했었다. 그래서 이번 기회에 그 이유를 알아보고자 한다. 보통 구글에 검색하다 보면 변수명 앞에 $가 붙는다는 것은, jQuery에서 쓰는 변수명을 의미한다는 글이 많았다. $는 jQuery에서 매우 일반적인 사용으로 변수에 저장된 jQuery 객체를 다른 변수와 구별하는 것이다. 윗 말이 제일 많았다. 혹은, jQuery가 아닐 때에도 jQuery를 사용해서 받은 것을 변수에 넣었다는 것을 표시하기 위해서?라는 말이 있었다. (jQuery를 사용하지는 않는데, jQuery를 사용해서 받은 것??? (의문) 무슨 말인지 이해가 잘 안 되고, jQuery라는 단어를 써야만 대답할..

event.preventDefault()와 event.stopPropagation()에 대해 알아보자 [ event.preventDefault() ] event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 주로 사용되는 경우를 나열하자면, 1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음 ★ 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되서 초기..

Map에 대해 알아보자 [ Map ] Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size [ Map 객체의 생성 ] Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..

Set에 대해 알아보자 [ Set ] Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X [ Set 객체의 생성 ] Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set, 객체에 요소로 저장되지 않는다. const set1 = new ..

디스트럭처링 할당에 대해 알아보자 [ 디스트럭처링 할당 ] 디스트럭처링 할당(destructuring assignment (구조 분해 할당))은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. [ 배열 디스트럭처링 할당 ] 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. const arr = [1, 2, 3]; const [ one, two, three ] = arr; c..

스프레드 문법에 대해 알아보자 [ 스프레드 문법 ] ES6에서 도입된 스프레드 문법(spread syntax)... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments와 같이 for... of 문으로 순회할 수 있는 이 트러블에 한정된다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e ..

여려가지 for문에 대해 알아보자 [ for .. of 문 ] for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for...of 문의 문법은 다음과 같다. for (변수선언문 of 이터러블) { ... } for...of 문은 for...in 문의 형식과 매우 유사하다. for (변수선언문 in 객체) { ... } 하지만 두가지 for문에는 차이가 있다. for...in 문의 경우 객체 혹은 유사 배열 객체라면 사용할 수 있다. 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문과 for...in 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형..

심벌에 대해 알아보자 [ 심벌 (Symbol) ] 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이기 때문에 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 다른 값과 중복되지 않는 유일무이한 값 변경 불가능한 원시 타입의 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용 [ 심벌 값 생성 ] 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않은 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); con..

정규표현식에 대해 알아보자 [ 정규 표현식 ] 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 예시 const cellphone = '010-1234-1224'; console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true 위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 정규표현식을 사용하면 반복문과 조건문 없이 ..

마우스 이벤트에 대해 알아보자 [ mousedown ] 마우스 버튼을 누르는 시점에 발생하는 이벤트 [ mouseup ] 마우스 버튼을 떼는 시점에서 발생하는 이벤트 [ mousemove ] 마우스를 움직이는 시점에서 발생하는 이벤트 [ mouseenter ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 [ mouseleave ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 ※ 포인팅 디바이스 마우스, 터치 패드 등을 가리킴 [ mouseover ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) [ mouseout ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링) ※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스..

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자 [ 이벤트 리스너 1회 실행하기 ] addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 세 번째 인수로 지정할 수 있는 옵션은 다음과 같다. 옵션 의미 타입 capture 이벤트 캡쳐 여부 진릿값 once 리스너 1회 실행 여부 진릿값 passive 패시브 이벤트 여부 진릿값 다음 예제를 보자 버튼 버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다. [ 이벤트 리스너 삭제하기 ] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. 버튼 페이지가 실행되고 3초까..