본문 바로가기

javascript38

가상돔(Virtual DOM) Virtual DOM웹 성능 최적화를 위한 DOM관리 방법으로 웹 어플리케이션의 상태 변경 시 ,객체 형태의 가상 DOM을 통해 변경된 부분만 찾아내어 실제 DOM에 적용하는 것.Virtual DOM의 동작순서Diffing 이란?가상 돔에서 변경점을 찾아내는 과정Reconciliation 이란?Diffing 으로 찾아낸 변경 점을 실제 돔에 적용 하는 과정Virtual DOM의 동작예시어플리케이션이 렌더링 될 때, 어플리케이션의 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성한다.어플리케이션이 실행되면서 state나 props가 변경되는 부분이 있는 경우 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성합니다.새로운 돔이 생성 된 후 이전 버전의 Virtual DOM과 비교.. 2024. 8. 1.
Reflow ,Repaint Reflow ,RepaintReflow란?웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을때, 변화된 레이아웃을 다시 계산 하는 과정을 말한다.크기 관련 속성width , height , padding , margin 등위치 관련 속성position , top , left 등레이아웃 속성display, flex, grid 등폰트 크기 관련 속성font-size , font-weight 등Repaint 란?웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하여 렌더 트리에 적용하는 과정색상 관련 속성color , background-color 등테두리 관련 속성border-color , border-radius 등Reflow 와 Repaint 의 성능상 차이점Reflow.. 2024. 8. 1.
모던 자바스크립트 | 전역 변수의 문제점 전역 변수의 문제점전역 변수의 무분별한 사용은 위험하다. 전역변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역변수를 사용해야 한다.변수의 생명 주기지역 변수의 생명 주기변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 사용이 된 블럭을 빠져나가게 된다면 사라지게 된다.변수가 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 종료되면 소멸한다.function foo() { var x = 'local'; // 변수 생성 시점 console.log(x); // local return x; .. 2024. 8. 1.
모던 자바스크립트 | 스코프(scope) 스코프란?스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.스코프의 이해가 부족하면 다른 개념을 이해하기 어려울 수 있다.더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다.function add(x,y){ //매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x,y) // 2 , 5return x + y}// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.console.log(x,y) // ReferenceError : x is not defined변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있다.이때 코드 블.. 2024. 8. 1.
모던 자바스크립트 | 원시 값과 객체의 비교 원시 값변경 불가능한 값원시 타입의 값은 변경 불가능한 값이다. (읽기전용) 변경 불가능 하다는 것은 변수가 아니라 값에 대한 진술이다.원시 값 자체를 변경 할 수 없다는 것이지 변수 값을 변경 할 수 없다는 것은 아니다.변수는 언제든지 재 할당을 통해 변수 값을 변경 할 수 있다.변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다. 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.// const 키워드를 이용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수다.const o = {};// const 키워드를 사용해 선언한 변수에 할당한 원시 값(상수)은 변경할 수 없다.// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.o.a.. 2024. 8. 1.
모던 자바스크립트 | 객체 리터럴 객체 리터럴객체란객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key), 값(value)으로 구성된다.const parson = {name : 'Lee', // name - key , 'Lee' - valueage : 20 // age - key , 20 - value}객체 리터럴에 의한 객체 생성C++ 나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.객체 리터럴Object 생성자 함수생성자 함수Object.create 메서드클래스이러한 객체 생성 방법 중.. 2024. 7. 23.
모던 자바스크립트 | 단축 평가 단축 평가논리 연산자를 사용한 단축평가'Cat' && 'Dog' // 'Dog''Cat' || 'Dog' // 'Cat'논리곱(&&) 연산자는 두 개의 피연산자가 모두 true 일때, true를 반환한다. (좌→우 로 평가 진행)논리곱 연산자는 첫번째 피연산자가 true일때, 두번째 피연산자가 true이면 두번째 피연산자의 문자열을 그대로 반환한다.논리합 연산자는 두개의 피연산자 중 하나만 true 여도 true로 반환이 된다. (좌→우 로 평가 진행)논리 연산 결과에 첫번째 피연산자가 true이면 두번째 연산자가 true 여도 첫번째 피연산자를 반환한다.두번째 피연산자만 true 일경우 두번째 피연산자를 반환한다.이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 반환 하는 것을 단축 평.. 2024. 7. 23.
모던 자바스크립트 | 명시적 타입 변환 명시적 타입 변환명시적으로 타입을 변경하는 방법에는 표준 빌트인 생성자 함수(String, Number, Boolean) 를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법 등이 있다.문자열 타입으로 변환String 생성자 함수를 new 연산자 없이 호출하는 방법// 숫자 -> 문자열 타입String(1) // '1'String(NaN) // 'NaN'String(Infinity) // Infinity// 불리언 -> 문자열 타입String(true) // 'true'String(false) // 'false' Object.prototype.toString 메서드를 사용하는 방법// 숫자 -> 문자열 타입(1).toString(); // '1'(NaN).toString() //'NaN'.. 2024. 7. 23.
모던 자바스크립트 | 암묵적 타입 변환 암묵적 타입 변환자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때 가 있다.// 피연산자가 모두 문자열 타입이어야 하는 문맥'10' + 2 // -> '102'// 피연산자가 모두 숫자 여야 하는 문맥5 * '10' // -> 50// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥!0 // -> trueif(1){}표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생 할 수 있다.자바스크립트에선 에러를 발생하지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. (쓰레기 언어네)암묵적 타입 변환이 발생하면 문자,숫자,불리언 과 같은 원시 타입 중 하나로 타입이 자동 벼환한다.문자열 타입으.. 2024. 7. 23.
728x90

티스토리툴바