분류 전체보기

#DOM 이란? 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. Chapter 1 - Node Overview HTML 요소는 DOM을 구성하는 요소 노드 객체로 변환됨 요소간 중첩관계에 의해 부자관계 형성 DOM은 HTML 문서의 계층적 구조와 정보를 표현 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 가능 문자열인 HTML을 자바스크립트가 이해할 수 있는 형태로 바꾸는것 → PA..

파싱(parsing) : 문법에 맞게 작성된 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토근(token, 문법적으로 더는 나눌 수 없는 코드의 기본 요소)으로 분해하고, 토큰에 문법적의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 렌더링(rendering) : HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 렌더링 과정 필요한 리소스를 요청 서버로부터 응답 응답받은 HTML, CSS를 파싱하여 DOM, CSSOM을 생성 결합하여(DOM + CSSOM) 렌더트리 생성 렌더트리를 기반으로 HTML 요소의 레이아웃(위치와 크기) 계산 브라우저 화면에 HTML요소 페인팅 # 요청과 응답 서버에 요청을 전송하기 위해 브라우저는 주소창을..

#callback 1. 동기와 비동기 자바스크립트는 동기적이다. hoisting이 된 이후 부터 작성한 순서에 맞춰 하나씩 실행된다는 것(한번에 하나의 일만 수행) hoisting? var, function declaration(함수선언) 같은 선언들이 제일 위로 올라가는것 synchronous(동기)는 정해진 순서에 맞게 코드가 실행되는것이고 asynchronous는 비동기적으로 언제코드가 실행될지 예측할 수 없는것 console.log(1); console.log(2); console.log(3); 자바스크립트 엔진은 코드를 제일 위에서 부터 밑으로 실행하기 때문에 순서대로 작동된다. console.log(1); setTimeout(() => console.log(2),1000); console.lo..

- 리액트 할 때 정말 많이 썼던 자바스크립트 문법 - 잘 이해하고 알아두면 리액트 앱 만들 때 고생을 덜 할수있다.(과거 나에게...) 스프레드 문법 (Spread) const arr = [1, 2, 3]; const max = Math.max(arr); // NaN const max = Math.max(...arr); // 3 es6 ... 순회가 가능한(이터러블한) 여러 값들의 집합체를 펼쳐 개별적인 값들의 목록으로 만든다. 값을 생성하는 연산자가 아니기 때문에 변수에 할당할 수 없다. Rest 파라미터와 형태가 동일하지만 전혀 다른 컨셉을 가지고 있다. Rest 파라미터는 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 앞에 사용하는 것 기존에 사용했던 concat, splice, slice..

- 리액트를 할 때 제일 유용하고 자주 사용했던게 고차함수 였다. 잘 알아두자 고차함수란? - 함수를 인수로 전달받거나(콜백함수) 함수를 반환하는 함수 - 일급객체의 특징을 가지고 있다. - 외부변경을 피하고 불변성을 유지하는 함수형프로그래밍을 기반으로 한다. - 데이터 변경 ❌, 변수 사용 ❌, 조건문 ❌, 반복문 ❌ 지향 - 순수함수를 통해 에러를 줄이고 가독성을 높이고 안전성을 보장하려고 한다. 유용한 고차함수 메서드 알아두기 ✨ sort 배열의 요소 정렬 (기본 오름차순 정렬) forEach 자신의 내부에서 반복문을 통해 순회하며 콜백함수로 전달받아 실행 map 배열의 모든 요소를 순회하며 요소들을 각각 새로운 요소로 매핑하여 새로운 배열로 반환 filter 콜백함수의 반환값이 true인 경우 즉..

- 옮기기전에 있던 블로그에서 가져오고 싶은 글들을 조금씩 옮겨야겠다. - 배울 때 새롭게 배우면서 웹접근성에 대해 확 이해할 수 있었던 부분! wai-aria (Web Accessibility Initiative Accessible Rich Internet Applications) w3c가 출판한 기술로, 인터넷을 사용하는 사람들이 쉽게 접근할 수 있게 도와주는 장치로 스크린리더를 사용하는 유저들의 접근성을 높인다. 예를들어 rohjs bugless-101 previous 1