목차1. 모듈이란2. 모듈의 핵심 기능3. 브라우저 특정 기능4. 빌드 툴1. 모듈이란개발 중인 애플리케이션 크기가 커지면 파일을 여러 개로 분리해야하는 시점이 온다.이렇게 분리된 파일 각각을 모듈(module)이라고 한다.모듈은 보통 클래스 하나 or 복수의 함수로 구성된 라이브러리 하나 로 구성된다. 그리고 이런 모듈들을 다른데서 불러오고, 구성해주고 하는 역할을 하는 것이 모듈 시스템이다.https://ldd6cr-adness.tistory.com/354 자바스크립트 모듈 시스템목차1. 개요2. 자바스크립트 모듈 시스템 2-1. 모듈의 구성 2-2. 모듈 시스템3. ESM (ECMAScript Module)1. 개요JS 계열 파일의 개발, 환경 설정 등을 하다보면 뭔가 자바스크립트의 환경이나 설정 ..

목차1. 002. 003. 001. 제목본문 2. 제목본문 참고더보기https://ko.javascript.info/default-browser-action

목차1. 이벤트 위임 1-1. 테이블 선택하기 1-2. 여러가지 버튼을 포함한 메뉴 구현하기2. 행동 패턴 2-1. 카운터 구현하기 2-2. 토글러 구현하기1. 제목본문 2. 제목본문 참고더보기https://ko.javascript.info/event-delegation

이건 머메이드 다랑어인데, 얘한테서 나오는 200g의 특수 부위가 '버블리 뱃살'이다.포획한 후 일주일 뒤에 맛이 정점에 달하지만 동시에 일주일이 지나면 버블이 되어 사라진다. (그래서 머메이드 다랑어인가..)국제 법안을 통과 시키기 위해 다랑어 뱃살 좋아하는 대통령에게 내놓을 요리 재료로 사용된다. 그냥 버블링을 보니까 생각났다. 정말 맛있게 생겼다. 토리코 18화쯤에 나온다. 목차1. 버블링2. 캡처링1. 버블링한 요소에 이벤트가 발생하면,1. 이 요소에 할당된 핸들러가 동작하고,2. 이어서 부모 요소의 핸들러가 동작한다.가장 최상단의 조상 요소를 만날 때까지 이 과정을 반복하며, 요소 각각에 할당된 핸들러가 동작한다. 이렇게 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 핸들러가..

목차1. 브라우저 이벤트2. 자주 사용하는 DOM 이벤트 2-1. 마우스 이벤트 2-2. 폼 요소 이벤트 2-3. 키보드 이벤트 2-4. 문서 이벤트 2-5. css 이벤트3. 이벤트핸들러 3-1. DOM 프로퍼티로 이벤트 핸들러 할당 3-2. 메서드로 이벤트 핸들러 할당1. 브라우저 이벤트브라우저에서의 이벤트는 무언가 발생했다는 신호를 말한다.모든 DOM 노드는 이벤트를 발생시킨다.2. 자주 사용하는 DOM 이벤트1. 마우스 이벤트이벤트설명click요소 위에서 마우스 왼쪽 버튼 클릭(tap)contextmenu요소 위에서 마우스 오른쪽 버튼 클릭mouseover /mouseout마우스 커서를 요소 위로 움직였을 때 /커서가 요소 밖으로 움직였을 때mousedown /..

목차1. 브라우저 창 사이즈2. 스크롤 정보 얻기3. 001. 브라우저 창 사이즈브라우저 창의 사이즈(width, height)를 구할 수 있다.documentElement.clientHeightdocumentElement.clientWidth alert(document.documentElement.clientHeight) window.innerWidth, window.innerHeight로 창 크기를 구할 수도 있으나,window는 스크롤바 공간까지 포함된 크기를 구한다. 이 부분 차이를 인지하고 필요에 따라 documentElement나 window를 사용하면 된다. 2. 스크롤 정보 얻기DOM 요소의 현재 스크롤 상태(스크롤에 의해 가려진 영역에 대한 정보)는 scrollLeft, scrollT..

목차1. 메서드로 문서 수정하기 1-1. 요소(Element), 노드(Node) 생성 1-2. 요소 삽입 1-3. HTML 문자열 삽입 1-4. 삭제 1-5. 복제 1-6. DocumentFragment 사용2. 스타일 적용하기1. 메서드로 문서 수정하기메서드로 요소를 생성하고 수정하는 방법들을 알아보자. 1. 요소(Element), 노드(Node) 생성document.createElement(tag)새로운 HTML 요소 태그를 생성// 1. 요소 만들기let div = document.createElement('div');// 2. 만든 요소의 클래스를 'alert'로 설정div.className = "alert";// 3. 내용 채워넣기div.innerHTML = "..

목차1. DOM 노드 클래스2. DOM 노드를 조작할 때 사용하는 주요 프로퍼티1. DOM 노드 클래스DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원한다.예를 들어 태그 에 대응하는 요소 노드는 링크와 관련된 프로퍼티를,에 대응하는 요소 노드는 입력 관련 프로퍼티를 제공한다. 또한 DOM 노드는 종류에 따라 대응하는 내장 클래스가 다르다. 모든 노드들은 공통적으로 위와 같은 상속 구조를 가지므로, 클래스 역시 상속한다.각 클래스의 특징은 아래와 같다.EventTarget : 루트에 있는 추상 클래스로, 대응 하는 객체가 실제로 만들어지지 않음Node : DOM 노드의 베이스 역할을 하는 추상 클래스로 주요 트리 탐색 기능을 제공Element : DOM 요소를 위한 베이스 클래스로, getElemen..

목차1. 요소의 검색2. document.getElementById3. querySelectorAll, querySelector5. matches();6. closest1. 요소의 검색요소들이 가까이 붙어있지 않다면, 상대 위치로 요소 노드에 접근할 수 없다.이럴 경우, id를 검색해서 원하는 요소에 접근할 수 있다.2. id로 검색해서 요소 다루기요소에 id 속성이 있으면 document.getElementById(id)를 사용해 접근할 수 있다. blah blah 3. querySelectorAll, querySelector1. querySelectorAll[element].querySelectorAll(css)는 자식 요소 중 주어진 css 선택자에 대응하는 요소를 모두 반환한다. 1-1 1..

목차1. DOM 탐색2. 자식 노드 탐색3. 001. DOM 탐색DOM의 모든 연산은 document 객체로부터 시작한다.document 객체는 DOM에 접근하기 위한 진입점인 셈이다.https://ldd6cr-adness.tistory.com/279 따라서 JS로 HTML 문서에 접근할 때는 document를 통해 접근한다.html, body, head 태그에 접근할 수 있는 속성들은 각각 아래와 같다. : document.documentElement : document.body 위 예시에서 내부에서 document.body를 접근 시도하면 null을 얻는다.아직 읽지 않았기 때문에 존재하지 않음을 뜻하는 null을 출력하는 것이다. 2. 자식 노드 탐색자식 노드 (child node ..

목차1. iterable 객체 1-1. iterable 객체의 개념 1-2. iterable 개념 이해해보기2. 내장 이터러블3. Array.from으로 Array 만들기1. iterable 객체1. iterable 객체의 개념iterable 객체는 배열을 일반화한 객체이다.반복할 수 있는 구조의 객체이다.대표적으로 배열, 유사배열, 문자열, map, set 등이 있다.이터레이션(Symbol.iterator)함수를 가져야한다.for..of 문법을 적용하여 순회를 할 수 있다.2. iterable 개념 이해해보기우선 이터러블이라는 개념에 대해 이해할 필요가 있다.let range = { from: 1, to: 5,};객체 range는 1부터 5까지의 간격을 나타낸다.여기에 Symbol.itera..

목차1. 옵셔널 체이닝 등장 배경2. 옵셔널 체이닝 ?.3. ?.() ?.[] 3-1. 객체 내 함수의 존재 여부 확인 3-2. 객체 내 프로퍼티의 존재 여부 확인 1. 옵셔널 체이닝 등장 배경사용자 중 어떤 사람들은 주소를 등록하고 싶지 않을 수도 있다.주소를 등록하지 않아 null인 상태로 남겨두면, 주소 정보에 접근했을 때 에러가 발생할 수 있다.let bang = {};console.log(bang.address.street); // TypeError: Cannot read property 'address' of undefined ?. 이 추가되기 이전에는 && 연산자를 활용했었다.let bang = {};console.log(bang && bang.address); // undef..