
브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. ✍ 노드 📌 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소의 구조 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소와 노드 객체 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM 트리라고 부르기도 한다. 📌 노드 객체의 상속 구조 DOM은 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. DOM을 구성하..

1. Symbol 다른 값과 중복되지 않는 유일무이한 값이다. 문자열과 같이 프로퍼티의 키값으로 사용할 수 있다. 변경불가능한 원시값이다. ( 원시값이라서 new를 이용해서 생성하면 안됨 ) const symbol = Symbol("apple"); const copy = Symbol("apple"); // 유일무이한 값이기 때문에 같은 시드값을 넣어도 동일할 수 없음 console.log(symbol === copy);// false console.log(symbol.description);// "apple" console.log(symbol.toString());// Symbol(apple) // 문자열 or 숫자로 암묵적 변환 X console.log(symbol + "");// error conso..

32장 - String 32.1 String 생성자 함수 String 객체는 생성자 함수 → new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있음 const strObj = new String(); console.log(strObj); // String {length:0, [[PrimitiveValue]]:""} String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. const strObj = new String('Lee'); console.log(strObj); // String {0:"L", 1:'e", 2:"e", length:3, [[PrimitiveValue]]:..

자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/ 애플리케이션의 클라이언트 사이드다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 브라우저의 렌더링 과정 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응단된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트..

배열이란? 배열 --> 여러 개의 값을 순차적으로 나열한 구조 사실 배열이라는 타입이 존재하는 것은 아니며 객체 타입임. 배열이 가지고 있는 값 : 요소 배열에서 자신의 위치를 나타내는 0 이상의 정수: 인덱스 --> 배열 접근시 대괄호 표기법을 이용해 인덱스를 지정하여 접근 배열의 길이를 나타내는 프로퍼티: length 프로퍼티 구분객체배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 값의 순서와 length 프로퍼티는 배열이 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조로 만들어줌 자바스크립트 배열은 배열이 아니다 일반적인 자료구조에서 말하는 배열 --> 동일한 크기의 메모리 공간에 연속적으로 나열되어 있어서 of..

정규 표현식이란? 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 문자열 대상으로 패턴 매칭 기능 제공 --> 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있게 해줌 정규표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용해서 가독성이 좋지 않다. 정규 표현식의 생성 일반적인 정규 표현식 생성 방법은 정규 표현식 리터럴을 사용하는 것이다. 정규표현식 리터럴은 패턴과 플래그로 구성된다. const target = 'Is this all there is?'; // 패턴: is // 플래그: i => 대소문자를 구별하지 않고 검색한다. const regexp = /is/i; // test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패..
- Total
- Today
- Yesterday
- eventListner
- JWT토큰
- 시스템설계
- 이벤트리스너
- 알고리즘
- 항해플러스후기
- 항해솔직후기
- React18v
- store.js
- Repository pattern
- 로그인 인증
- Vue.js
- focus와blur
- vue.js3
- 더미데이터
- vite
- event종류
- 레포지토리패턴
- 항해플러스프론트엔드
- http
- 개발자
- react
- 결제기능
- 디자인시스템
- 구름톤
- props
- 그림으로 이해하는 시스템 설계
- 프로덕트설계
- vue3
- 회고
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |