스코프(Scope) : 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데 필요한 잘 정의된 규칙 var a = 2; 위의 간단한 코드에서 컴파일러와 엔진은 각각 다음과 같은 일을 수행한다. - 컴파일러 : (현재 스코프에 미리 변수가 선언되지 않은 경우) 변수 선언 - 엔진 : 스코프에서 변수를 찾고 변수가 있다면 값을 대입 이때 엔진이 어떤 종류의 검색(LHS 혹은 RHS)을 하느냐에 따라 검색 결과가 달라지게 되는데 위의 경우에서는 변수 a를 찾기 위해 LHS(Left- Hand Side) 검색을 수행한다. LHS검색은 변수가 대입 연산자의 왼쪽에 있을 때 수행하고, RHS 검색은 변수가 대입 연산자의 오른쪽에 있을 때 수행한다. 좀 더 살펴보자면 RHS 검색은 단순히 특정 변수의 값을 찾는 것..
이벤트 위임 이벤트 위임은 캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다. 1) 여러 개의 자식 엘리먼트 이벤트를 한 번에 관리 : HTML의 읽기전용 속성인 데이터 속성을 사용하여 이벤트 위임을 구현할 수 있다. 데이터 속성 여기서 데이터 속성은 화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담을 수 있는 속성으로 data- 로 시작하는 속성이다. ... 위처럼 html을 작성하면 각각의 데이터 속성을 읽는 방법은 아래와 같다. (대시는 camelCase로 변환된다.) var article = document.getElementById('electriccars'); article.datase..
이벤트 흐름 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 이벤트 버블링 : 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. focus 이벤트를 포함한 몇몇 이벤트를 제외하고 거의 모든 이벤트는 버블링 된다. 이벤트 캡쳐링 : 이벤트 캡쳐는 이벤트 버블..
브라우저 렌더링 과정을 알아보았으니 최적화시키는 방법을 알아보자. 위와 같은 렌더링 과정에서 Reflow와 Repaint는 둘다 비용이 많이 드는 작업이다. 먼저 이 두 과정에 대해 알아보자. Reflow(Layout)이란? 화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. element의 reflow는 DOM에 있는 모든 하위, 상위 요소의 후속 리플로우를 유발한다. - 모든 엘리먼트의 위치나 길이, 크기 등등을 다시 계산하는 과정 - 상위 엘리먼트를 변경시키면 하위 엘리먼트에도 영향을 끼침 - render tree를 재생성하므로 부하가 크고 레이아웃에 영향을 줌 - DOM노드를 추가, 제거 , 업데이트하는 경우 발생 Repaint(Re..
웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
GraphQL이란 API에 대한 쿼리 언어이며 기존 데이터로 이러한 쿼리를 수행하기 위한 런타임이다. 크게 아래와 같은 특징들이 있다. 1. 필요한 것을 구체적으로 요청. GraphQL 쿼리를 API로 전송하여 필요한 것을 얻을 수 있는데, 이때 GraphQL 쿼리는 항상 예측 가능한 결과를 반환한다. GraphQL을 사용하는 앱은 서버가 아닌 앱이 반환 받을 데이터를 제어하기 때문에 빠르고 안정적이다. 2. 단일 요청으로 많은 데이터 확보 GraphQL 쿼리는 한 리소스의 속성뿐만 아니라 리소스 간의 참조를 원활하게 접근할 수 있다. 일반적인 REST API는 여러 URL 로딩이 필요한 반면, GraphQL API는 앱이 필요로 하는 모든 데이터를 하나의 요청으로 가져오기 때문에 GraphQL을 사용하..
