우주선

모던 자바스크립트 Deep Dive ― (10) 39장 DOM DOM 은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 프로퍼티와 메서드를 제공하는 트리 자료구조다. 39.1 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. 이 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. DOM을 구성하는 노드 객체는 ECOMScript에 정의된 게 아니라 브라우저 환경에서 추가적으로 제공하는 호스트 객체이다. 1) 트리 자료구조 - 노드들의 계층 구조로 이뤄진다. - 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조다. - 최상위 노드를 루트 노드, 자식 노드가 없으면 리프 노드라 한다. - 노..

모던 자바스크립트 Deep Dive ― (9) 36장 디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 36.1 배열 디스트럭처링 할당 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다. const arr = [1,2,3] const [one, two]= arr console.log(one, two) // 1,2 36.2 객체 디스트럭처링 할당 객체의 각 프로퍼티를 객체로부터 추출하여 1개 ..

신나게 커밋하려는데 Eslint가 오류를 뱉었다. ✖ eslint --fix found some errors. Please fix them and try committing again. unreachable Error: unreachable at CodePathState.popChoiceContext (/~내폴더~/node_modules/eslint/lib/code-path-analysis/code-path-state.js:444:23) 보니까 이 프로젝트에 설정된 eslint로 nullish 병합 연산자(nullish coalescing operator) 즉 ?? 을 쓸 수 없었다 이슈글에서 보니 eslint 버전이 6.1.0이면 지원된다길래 package.json을 열었더니... "@nuxtjs/es..

모던 자바스크립트 Deep Dive ― (8) 32장 String 표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 32.1 String 생성자 함수 String 객체는 생성자 함수 객체로서 new 연산자와 함께 호출하면 String인스턴스를 생성할 수 있다. String 을 new 연산자와 함께 호출하면 String 래퍼 객체를 생성하는데, 이 String 래퍼 객체는 유사 배열이면서 이터러블이다. 따라서 배열과 유사하게 인덱스를 사용하여 각 문자에 접근하거나, length값을 가진다. String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환한다. new연산자를 사용하지 않고 String에 생성자 함수를 호출하면 Str..

모던 자바스크립트 Deep Dive ― (7) 28장 Number 표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 28.1 Number 생성자 함수 Number 객체는 생성자 함수 객체로서 new 연산자와 호출하여 Number 인스턴스를 생성할 수 있다. new 연산자와 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다. new 연산자 없이 호출하면 Number 인수의 타입을 변화시켜 인스턴스가 아닌 숫자를 반환한다. let numObj = new Number('10') console.log(numObj) // Number {10}[[Prototype]]: Number[[PrimitiveVa..

모던 자바스크립트 Deep Dive ― (6) 24장 클로저 클로저는 자바스크립트 고유의 개념이 아니라서 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의한다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 우선 '함수가 선언된 렉시컬 환경'이 무엇인가? 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하고, 이를 렉시컬 스코프(정적 스코프) 라고 한다. 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다. 함수 객체는 내부 슬롯에 저장한 렉시컬 환경의 참조(=상위 스코프)를 자신이 존재하는 한 기억한다. 다음 예제에서 외부 함수보다 중첩..

💻 자바스크립트 옵저버 API 사용해보기 어떤 요소가 viewport(혹은 사용자 지정 root) 내부에 들어오게 되면 요소를 감지하여 특정 콜백을 실행할 수 있다. 뷰포트에 어떤 요소가 들어왔을 때 UI를 변경해주기 위해 한 번 썼다가 정리해본다. 혹시 당신의 코드가 addEventLisnter로 document의 scroll을 하고 있다면... 그리고 깜빡하고 removeEventListener를 잘 안 한다면.... 옵저버 API로 변경합시다 ( ͡o ͜ʖ ͡o) ~ Intersection Observer API 개요 과거에 인터렉션을 감지하려면 영향을 받는 모든 요소를 알기 위해서 getBoundingClientRect()같은 메서드를 사용해야 했다. 호출하는 여러 이벤트 핸들러와 루프가 얽혀있었..

모던 자바스크립트 Deep Dive ― (5) 20장 strict mode ES5부터 지원하는 strict mode 는 자바스크립트 언어의 문법을 조금 더 엄격히 적용하여 오류를 발생시킬 가능서잉 높거나 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 전역의 선두 또는 함체 몸체의 선두에 'use strict'; 를 추가하여 사용한다. 전역에 strict 모드를 적용하는 것은 피해야 한다. 다른 스크립트에 영향을 줄 수 있고, 외부 서드파티 라이브러리가 non-strict mode일 수도 있기 떄문이다. 함수 단위로 적용하는 것도 피해야 한다. 번거롭기도 하거니와 strict mode의 함수가 참조할 외부 함수의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 발..