자바스크립트

[JS] 중요 랜더링 경로( Critical Rendering Path )

중요 랜더링 경로 HTML, CSS, JavaScript로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것을 랜더링이라고 하며, 그 일련의 단계를 중요 랜더링 경로라고 한다. 파싱 리플로우 & 리페인트 페인트 1. 파싱 파싱은 텍스트 문서를 읽어 들여 실행하기 위해 문자열을 의미 있는 토큰(어휘 분석의 단위)으로 분해하고 토큰화 된 문자열들로 파스 트리를 생성하는 과정이다. 이러한 파싱을 전문적으로 해주는 부분을 파서라고 한다. HTML, CSS는 랜더링 엔진에서 파싱 하고, JavaScript는 별도의 자바스크립트 엔진에서 파싱 한다. (1) HTML 파싱과 DOM 생성 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다. 따라서 앞서 설명한 파스 트리를..

[JS] 변수 호이스팅

1. 정의 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것을 의미한다. 쉽게 말해서 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. console.log(a); //undefined var a = 1; // 에러가 나지않고 undefined가 나온다. 코드를 위에서 아래로 읽으면서 아직 나오지 않은 a를 불러오는데 에러가 나지 않는다. 이미 a라는 변수는 선언되었고, var a= 1 라인에 와서야 a 변수에 1을 할당하는 것이다. 2. 소스코드 '이미 변수가 선언되었다'는 내용을 이해하기 위해 소스코드를 읽어오는 순서에 대해 알아보았다. 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다. 평가 과정에서..

[JS] HTMLCollection & NodeList

DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결괏값을 반환하기 위한 DOM 컬렉션 객체이다. HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 for... of 문으로 순회할 수 있으며 스프레드 문법을 사용하여 간단히 배열로 변환할 수 있다. 1. HTMLCollection HTMLCollection은 class, tag에 접근 가능하며 텍스트 노드에는 접근하지 못한다. getElementsByTagName, getElementsByClassName 메서드가 반환하는 HTMLCollection 객체는 노트 객체의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션이다. '살아있다'라는 게 어떤 의미인지 생소..

[JS] 이터러블과 유사 배열 객체

DOM에서 요소를 취득할 때 HTMLCollection과 NodeList를 객체로 받는다. 객체인 이 두 가지 자료에서 for문 탐색이 되는 이유에 대해 궁금해서 찾아봤는데, 이를 이해하려면 '이터러블'과 '유사 배열 객체'에 대해서 알아야 한다. 이 글에서 선행지식을 공부하고 다음 글에서 HTMLCollection과 NodeList에 대해 써보려 한다. 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 명세에 정의하여 미리 약속한 규칙이다. ES6 에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for... of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도..

[JS] var vs. let vs. const

1. var ES5까지 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 방법뿐이었다. 하지만 ES6부터 let, const 키워드가 나오면서 var사용을 지양하게 되었는데, var는 어떤 기능을 하고 또 어떤 문제 때문에 지양하게 되었는지 알아본다. 변수의 중복 선언을 허용 var x =1; var y =1; var x = 100; var y;// 초기화문이 없는 변수의 중복 선언문은 무시된다. console.log(x);//100 console.log(y);//1 처음에 x와 y 변수가 선언되고 할당된 후, 중복 선언되었다. 이때 초기화문(변수 선언과 동시에 초기값을 할당하는 문) 유무에 따라 다르게 동작한다. 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 중복 선언하면서 값까지 할..

[JS] Array vs. Set

백준 1920번 문제를 해결하면서 Set과 Array는 속도 차이가 나는지 차이가 난다면 얼마나 나는지, 특정 상황에서 어떤 구조가 더 빠른지 찾아보았다. Set 객체는 Map 객체와 함께 자바스크립트 ES6 버전에서 생긴 기능이다. 속도에 관한 내용을 찾던 도중 Set이 나왔을 당시 성능에 대한 내용과 현재는 어떤 지 알아볼 수 있는 글을 찾았다. 1. Set,Map 등이 처음 나왔을 당시 스택오버플로우에서 첫 요소의 추가, 변경, 삭제에 대해 테스트 케이스를 만들어 수행한 결과를 찾았는데, 일반적으로 Array가 빠르지만 입력받는 숫자가 아주 크다면 delete 메서드를 사용해 요소를 삭제하는 경우에 한하여 Set 이 압도적으로 빠르다는 내용이었다. 하지만 속도를 비교하기에 테스트 케이스가 적절한가에..

[JS] Set & Map

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 다음과 같은 차이가 있다. 중복된 값을 포함할 수 없다. 요소 순서에 의미가 없다. 따라서 인덱스로 요소에 접근할 수 없다. Set 객체의 생성 let set = new Set(); console.log(set) //Set(0) {} 이터러블을 인수로 전달받아 Set 객체를 생성한다. Set은 중복된 값을 포함할 수 없으므로, 중복된 값은 무시된다. let set = new Set('Hello'); console.log(set) //Set(4){ 'H', 'e', 'l', 'o' } 요소 개수 확인 let set = new Set('Hello'); console.log(set.size)// 4 let set1 = new Set..

[JS] 정규 표현식 RegExp

얼마 전까지만 해도 for문으로 문자열을 탐색, 교체했는데 정규표현식을 사용하니 써야 할 코드가 많이 줄어서 좋다. 기호들이 들어가다 보니 가독성은 별로긴 하지만, 여러모로 사용할 것 같으니 미리 정리해둔다. 정규 표현식 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어. 문자열을 대상으로 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 제공한다. 반복문과 조건문 없이 패턴을 정의하고 테스트할 수 있다. 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다. 정규 표현식의 생성 슬래쉬( '/' ) 를 이용해 열고 닫고, 플래그를 이용해 검색 방식을 설정한다. let text = "Today is wednesday"; l..