추월차선

40.8 DOM 요소의 기본 동작 조작40.8.1 DOM 요소의 기본 동작 중단DOM 요소는 저마다 기본 동작이 있다.ex. a 요소를 클릭하면 href 어트리뷰트에 지정된 링크로 이동이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.40.8.2 이벤트 전파 방지이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다. 즉, 상위 DOM 요소에게 이벤트가 전파되는 것을 막는 다는 것이다.40.9 이벤트 핸들러 내부의 this40.9.1 이벤트 핸들러 어트리뷰트 방식다음 예제의 handleClick 함수 내부의 this는 전역 객체 window를 가리킨다.일반 함수로서 호출되는 함수 내부의 this는 전역 객체를 가리키기 때문단, 이벤트 핸들..

1. DOM 조작새로운 노드를 생성하여 DOM에 추가, 기존 노드를 삭제 or 교체하는 것으로 리플로우와 리페인트가 발생하므로 성능에 조심해야한다.innerHTMLElement.prototype.innerHTMLgetter, setter 모두 있는 접근자 프로퍼티해당 요소의 콘텐츠 영역에 있는 모든 HTML 마크업을 문자열로 반환문자열을 할당 시 요소의 모든 자식 노드가 제거되고 할당한 문자열의 HTML 마크업이 자식 노드가 된다.크로스 사이트 스크립팅(악성 스크립트 주입) 공격에 취약  아래와 같이 에러 이벤트를 발생시켜 자바스크립트 코드가 실행되게 할 수 있음  innerHTML의 문제점들모든 노드의 자식을 제거하고 새롭게 할당하므로 비효율적만약 ..

브라우저의 렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행합니다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅합니다. 브라우저..

1. 스프레드 문법을 사용할 수 있는 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정된다.스프레드 문법은 연산자가 아니며 결과 역시 값이 아님 → 결과 변수 할당 불가능. 그냥 뭉쳐 있는 값들을 펼치는 역할만 하는 것이다. 2. 스프레드 문법 사용법함수 호출문의 인수 목록에서 사용하기요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후 이를 함수의 인수 목록으로 전달해야 하는 경우const arr = [1, 2, 3];// = Math.max(1, 2, 3)var max = Math.max(...arr); // 3 스프레드 문법은 앞에서 살펴본 Rest 파라미터와 형태가 동일하여 혼동할 수 있으므로 주의할 필요가 있다. Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다..

1. 이터러블 프로토콜이란Well-known Symbol( 자바스크립트 엔진에 상수로 존재하는 심볼 )인 symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속받은 메서드를 호출하면 이터레이터 프로토콜을 준수한다고 약속한다. 2. 이터레이터 프로토콜이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유한다.  3. 이터러블이란이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다.구체적으로 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. const isIterable = v => v !== null && typeof..

리액트 네이티브 밋업 Fabric interior layer은 fabirc을 지원하지 않아도  리액트 네이티브 0.73에서는 자동으로 이전 호환되지 않는 라이브러리들(레거시들)을 fabric 환경에서 돌릴 수 있다. Fabric module…. 라이브러리의 package.json에서 codegenconfig필드가 있는 지 확인해보면 라이브러리가 어떤 아키텍처를 지원하는지 확인이 가능하다. 일단 리액트 네이티브 업그레이드 먼저 하는게 좋을 듯 하다. 그리고 내가 사용하는 리액트 네이티브의 버전이 라이브러리와 호환이 되는 지 확인하는 것이 좋다. ——라이브러리 만들기~~ callstack이 관리하는 create-react-native-library를 이용해 매우 간편하게 turbo module, fabric..

1. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 만약 정규표현식이 없다면 반복문을 통해서 한문자씩 연속해서 체크해야할 것이다. 정규 표현식은 자바스크립트의 고유의 문법이 아니라 대부분의 언어와 코드 에디터에 내장되어 있다. 2. 정규표현식 생성정규 표현식 리터럴정규 표현식 리터럴은 패턴과 플래그로 구성된다.const target = 'IS this all there is?';// 패턴: is// 플래그: i => 대소문자 구분 안하고 검색const regexp = /is/i;regexp.test(target); // trueRegexp 생성자 함수 사용const target = 'Is this all there is?';const regexp = new RegExp(/is/i);rege..