본문 바로가기

전체 글

 (214)
Understanding Repaint and Reflow in JavaScript 브라우저 엔진의 주요 역할은 HTML 문서와 웹 페이지의 기타 리소스를 사용자 기기에서 시각적으로 표현하는 것입니다. 브라우저 엔진외에도 관련 개념과 관련하여 두가지 다른 용어가 일반적으로 사용됩니다. 브라우저 엔진 외에도 관련 개념과 관련하여 두가지 다른 용어가 일반적으로 사용됩니다. 레이아웃 엔진과 렌더링 엔진입니다. 이론적으로는 레이아웃과 렌더링(또는 "페인팅")을 별도의 엔진에서 처리할 수 있습니다. 그러나 실제로는 긴밀하게 결합되어 있으며 분리하여 고려하는 경우는 거의 없습니다. 어떤 링크나 URL 브라우저에서 엔터키를 누르면 해당 페이지에 HTTP 요청을 하고 해당 서버는 HTML 문서를 응답으로 제공합니다. - 브라우저는 HTML 소스코드를 구문 분석하여 모든 HTML 태그에 해당하는 노드가..
JavaScript Data Structure And Algorithm | 재귀 재귀 소개 수학과 언어학, 예술에서 재귀는 자신에 대해 정의한 것이 발생하는 것을 나타낸다. 컴퓨터 과학 분야에서는 재귀함수는 자기 자신을 호출하는 함수이다. 재귀 함수는 '분할 정복' 방식을 통해 복잡한 문제를 해결한다. 재귀의 규칙 재귀함수를 잘못 작성하는 경우 심각한 문제를 일으킨다. 프로그램이 어느 한곳에 빠져서 종료되지 않기 때문이다. 무한 재귀 호출은 스택 오버플로(stack overflow)를 초래한다. 스택 오버플로는 프로그램의 콜 스택 개수가 제한된 양의 주소 공간(메모리)을 초과할 때를 나타낸다. 재귀 함수를 올바르게 구현하기 위해서는 스택 오버플로를 피하기 위한 특정 규칙을 따라야 한다. 기저 조건 재귀에는 기저 조건(종료 조건)이 존재한다. 재귀 메소드는 자기 자신을 호출하기 때문에..
Why is React's concept of Virtual DOM said to be more performant than dirty model checking? Why is React's concept of Virtual DOM said to be more performant than dirty model checking? I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff bet... stackoverflow.com 이 글은 Stackoverflow의 질문을 번역한 글입니다. 작성자가 궁금했던 것은 Pete Hunt가 모델에 대한 Dirty Checking이 느릴 수 있다..
Protocol Buffer Protocol Buffer 프로토콜 버퍼는 구조화된 데이터를 직렬화하기 위한 Google의 언어에 종속되지 않고, 플랫폼에도 종속되지 않으며 확장 가능한 메커니즘이다. XML보다 더 작고 빠르고 간단하다. 데이터를 한 번 구성하는 방법을 정의한 다음 생성된 코드를 사용하여 구조화된 데이터를 쉽게 읽고 쓸 수 있다. - 구글에서 개발하고 오픈소스로 공개한 직렬화 데이터 구조이다. - 직렬화는 데이터를 바이너리 스트림 형태로 저장하는 행위를 말한다. - 다양한 언어로 컨버팅 가능하다.(Java, Python, Objective-C, C++, JavaScript, Ruby) 프로토콜 버퍼란 직렬화 데이터 구조(Serialized Data Structure)이다.(XML, JSON과 유사) 직렬화 속도가 빠르..
Explain dirty checks in React.js 리액트는 virtualDOM을 사용하여 콘텐츠를 렌더링합니다. DOM은 페이지의 HTML 구조를 추상화한 것입니다. DOM Node들은 위 과정을 통해서 만들어집니다. 네트워크를 통해서 HTML 문서를 불러오고 raw byte를 characterize하는 과정을 거칩니다. 그리고 characterize화 후에 tokenize 해줍니다. 그리고 이 친구들을 Node들로 바꿉니다. 이 Node를 기반으로 DOM Tree를 생성해줍니다. 결국 DOM은 HTML로부터 온 것입니다. HTML을 파싱하여 각각의 노드들을 트리 구조의 객체 형태로 래핑합니다. 이는 개발자가 DOM 노드들을 추가, 수정, 삭제할 수 있도록 API를 제공해줍니다. DOM 자체는 정적(static) UI를 위한 것이므로 DOM이 업데이트될..
변수의 유효범위와 클로저 변수의 유효범위와 클로저 ko.javascript.info 자바스크립트는 함수 지향 언어입니다. 이런 특징은 개발자에게 많은 자유를 줍니다. 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수에 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수도 있기 때문입니다. 코드 블록 코드 블록 {...} 안에 선언한 변수는 블록 안에서만 사용할 수 있습니다. { // 지역 변수를 선언하고 몇 가지 조작을 했지만 그 결과를 밖에서 볼 수 없습니다. let message = "안녕하세요."; // 블록 내에서만 변숫값을 얻을 수 있습니다. alert(message); // 안녕하세요. } alert(message); // ReferenceError: message is not defined ..
36장. 디스트럭처링 할당 Destructuring assignment(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열 인덱스이다.(순서대로 할당) const arr = [1, 2, 3] const [one, two, three] = arr console.log(one, two, three) 배열 디스트럭처링 할당의 기준은 배열 ..
실전에서 바로쓰는 Next.js | 렌더링 전략 렌더링 전략이란 웹 페이지 또는 웹 애플리케이션을 웹 브라우저에 제공하는 방법을 의미합니다. Gatsby와 같은 프레임워크는 정적으로 생성한 페이지를 제공하기에 알맞은 프레임워크죠. Next.js는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것인지 쉽게 정할 수 있습니다. 애플리케이션의 특정 페이지에 대한 요청이 있을 때마다 페이지를 다시 생성할 수도 있습니다. 또한 반드시 클라이언트에서 렌더링해야 할 컴포넌트도 지정할 수 있어서 개발이 훨씬 쉽습니다. 이 장에서는 아래와 같은 내용을 다룹니다. - 서버 사이드 렌더링을 사용해서 각 요청별로 페이지를 동적으로 렌더링하는 방법 - 특정 컴포넌트를 클라이언트에서만 렌더링하는 방법 - 빌드 시점에 정적 페이지를 생성..

티스토리툴바