외장 뇌 외장 뇌

Virtual DOM이란리액트에서 사용하는 실제 DOM을 추상화한 가상의 DOM(객체타입의 트리 자료구조) 왜 Virtual DOM을 쓰는가실제 DOM을 변경하는 것은 비용이 많이 드는 일이다. 요소가 변경(삽입,삭제,수정)된다는 것은 브라우저 화면에 표시될 Layout 계산과, Painting(화면에 표시) 하는 작업을 모두 다시 해야한다는 뜻이기 때문이다. 더군다나 한 요소의 스타일이 변경될 때, 전체 화면의 배치가 모두 달라지는 경우에는 전체 요소에 대해 Layout 계산과 Painting이 다시 일어나야 한다. 따라서 DOM 조작이 자주 일어날 경우 브라우저에게 과도한 부담이 될 수 있다.React는 실제 DOM 대신 Virtual DOM을 변경한다. Virtual DOM의 변경사항들은 바로 실제..

var 키워드의 문제점 같은 스코프 내, 변수의 중복 선언 허용 함수 레벨 스코프 변수 호이스팅 let 키워드의 특징 변수 중복 선언 금지. 중복 선언 시 문법 에러 블록 레벨 스코프 : 모든 코드 블록(if, for, while, try/catch 등을 포함)을 지역 스코프로 인정. 선언 단계는 런타임 이전에, 초기화 단계(undefined 할당)은 런타임 도중 선언 문장을 만났을 때 진행. 따라서 선언문 전에 참조하면 referenceError가 발생하고, 호이스팅이 발생하지 않는 것처럼(하지만 실제로 호이스팅은 발생한다.) 동작하게 된다. 선언 단계와 초기화 단계 사이 참조할 수 없는 구간을 Temporal Dead Zone 이라 부름. 전역 객체( window, …)의 프로퍼티가 아니다. cons..

변수의 생명 주기 변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제(스코프가 소멸)될 때 까지. 만약 다른 누군가 스코프를 참조하고 있다면 스코프는 소멸하지 않음(클로져. 나중에 다룰 것.) var로 선언한 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 또한 전역 객체의 생명 주기와도 같다. 호이스팅은 스코프를 단위로 동작함. 전역 변수의 문제점 암묵적 결합 : 모든 코드가 전역 변수를 참조, 변경할 수 있음. 긴 생명 주기 : 불필요한 메모리 리소스 소비 뿐 아니라 상태가 변경될 수 있는 시간이 기므로 오류 발생 가능성을 높임 스코프 체인 상에서 종점에 존재 : 검색 속도가 가장 느림. 네임스페이스 오염 : 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유..

스코프란 스코프(= 네임스페이스) : 식별자가 유효한 범위 함수 레벨 스코프와 블록 레벨 스코프 함수에 의해서만 지역 스코프가 생성됨(함수 레벨 스코프). 다른 코드 블록들은 지역으로 안 침. 하지만 let, const는 블록 레벨 스코프를 지원하긴 한다. var 키워드와 중복선언 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언 허용됨. let이나 const는 중복선언 시 Error. 다른 스코프에선 중복선언 가능(더 좁은 스코프라던가) 지역 식별자와 스코프 체인 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효함. 스코프 체인 : 스코프의 계층적 연결. 자바스크립트 엔진이 변수를 참조할 때 사용. 참조하는 코드의 스코프부터 상위 스코프 방향으로 이동하며 검색. 가장 상위 스코프는..

함수는 객체다 함수는 호출이 가능한 ‘객체’다. 함수 정의 방식 함수 선언문 : 표현식이 아닌 문으로 해석됨. 전체를 괄호쳐주면 함수 표현식으로 해석될 것임. function square(x) { return x * x; } 함수 표현식 : 여기서 표현식의 함수 이름(squ)은 함수 내부에서만 사용 가능한 이름임. 해당 객체를 특정 변수에 바인딩 해줘야 외부에서 변수를 통해 접근 가능. 즉, 함수는 함수 이름이 아니라 함수 객체를 가리키는 식별자로 호출하는 것임. const square = function squ(x) { return x * x; }; Function 생성자 함수: 일반적이지 않으며 바람직하지도 않음. const square = new Function('x', 'return x * x')..

값의 불변성 원시 값은 한 번 생성되면 해당 메모리는 변경 불가능(immutable) 하다. 그와 다르게 객체는 생성된 뒤 메모리의 내용을 변경할 수 있다(mutable). 즉 원시값은 읽기 전용이다. 만약 s==’asdf’ 라면 s[0] = ‘t’ 후에도 s==’asdf’ 이다. 애초에 s[0]시에는 s의 값을 복사한 새로운 래퍼 객체를 만들어 수행하는 거긴 하지만. 변수간 값의 전달 방식 원시 값을 갖는 변수를 다른 변수에 할당하면, 새로운 메모리 주소를 확보하고 원시 값을 복사해 확보한 메모리에 넣은 뒤 해당 메모리 주소를 전달한다. 비용이 많이 드는 작업이므로, 일단은 똑같은 메모리 주소를 가리키게 한 뒤 나중에 어느 한 값이 달라지면 해당 메모리만 새로 할당하는 경우도 있다(Copy on wri..

객체와 객체 생성 방법 원시타입 값을 제외한 나머지 모든 값은 객체임. 원시 타입의 값은 immutable value, 객체 타입의 값은 mutable value 자바, C++등의 클래스 기반 객체지향 언어와 달리, 자바스크립트는 프로토타입 기반 객체지향 언어이다. 객체 생성 방법 객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스 프로퍼티 키 규칙 프로퍼티 키로는 문자열 또는 심벌 값을 사용할 수 있다. 네이밍 규칙을 만족하지 않는 문자열도 따옴표로 감싸 키로 만들 수 있지만, 권장되지 않는다. 단순 숫자만 오는건 네이밍 규칙을 만족하지 않지만, 배열을 구현하기 위해서 따옴표로 감싸지 않아도 프로퍼티 키로 사용가능하다. 프로퍼티 값 프로퍼티 값으로는 어떤 타입의 값..

명시적 타입 변환과 암묵적 타입 변환 명시적 타입 변환(타입 캐스팅)과 암묵적 타입 변환(타입 강제 변환)이 있다. 동등 비교와 일치 비교 동등 비교(==) 연산자는 암묵적 타입 변환으로 타입을 일치시킨 후 비교하는 반면, 일치 비교(===) 연산자는 타입 불일치를 허용하지 않는다. Truthy 값과 Falsy 값 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값, Falsy 값으로 구분한다. Falsy 값 false undefined null 0, -0 NaN ‘’(빈 문자열) Falsy 값을 제외한 나머지는 다 Truthy 값이다. 단축 평가 단축 평가를 이용해 if문을 대체할 수 있다. message = done && ‘완료’ : done이 truthy일 때 ‘완료’를 반환 message..