ALL

[JavaScript]DocumentFragment 와 HTML5 template 태그 사용

Document.createDocumentFragment() 가짜 documement를 생성하는 메서드. fragmentDocument에서 요소 추가에 필요한 모든 작업을 진행한 뒤, 1회의 작업으로 실제 document에 추가하도록 할 수 있다. document 의 태그를 계속 편집하는게 성능 측면에서 좋지 않은데, 이렇게 임시 document 에 작업한 뒤 실제 document에 추가하면 실제로는 마지막 1회만 document를 직접 조작하는 셈이 된다. (리플로우-페이지를 계속 렌더링 하는 것을 줄일 수 있다고 한다.) // fragmentDocument (가짜 document 생성) const fragment = document.createDocumentFragment(); // 새로운 eleme..

DOM : Document Object Model

DOM 이란 무엇인가? DOM 이란 ? Document Object Model의 약자로, HTML 요소를 Object 처럼 조작할 수 있는 모델이다. DOM 을 활용해 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다. 아주 중요한 녀석이다! DOM에서 찾을 수 없는 요스의 반환값이 왜 undefined 가 아니고 null 일까?? 일단 DOM 객체에서의 null은 값이 존재하지 않음 혹은 해당 노드가 없음을 의미한다고 한다. undefined와 null의 차이 : undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값 을 할당한 상태. 즉, 의도적으로 비어 있음을 의미한다고 한다. (또 typeof undefined === 'undefined' 이지만..

[Day 15] Koans 과제

오늘 배운 것 함수 호이스팅 함수 호이스팅이란, 아직 함수 선언문이 실행되기도 이전인데 마치 함수가 선언된 것 처럼 호출해서 사용할 수 있는 현상을 의미한다. 실제로 함수와 변수를 스코프의 최상단으로 끌어 올리는 것은 아니다. (그렇게 보이는 것임!) 함수 호이스팅이 발생하는 이유는, 자바스크립트 언어에서는 인터프리터가 코드 실행 전 변수와 함수의 메모리 공간을 미리 할당해두기 때문이다. 이런 정보들을 미리 알고 있기 때문에, 아직 선언이 되지 않은 시점이어도 아! 이 함수가 존재하는구나! 하고 사용할 수 있게 되는 것이다. 함수 호이스팅의 대상은 var로 선언된 변수와 함수 선언문이며, let, const 선언과 함수 표현식은 호이스팅의 대상이 아니다. 함수 선언문은 초기화 과정에서 실제 함수 값이 할..

[Day 14] 클로저, ES6 주요 문법

오늘은 자바스크립트의 핵심 개념중 하나인 클로저와 그 외 ES6 의 주요 문법(전개연산자, 구조분해할당 등)에 대해서 공부했다. 원래 공부한 내용을 그날 정리하는 것을 원칙으로 하는데, 오늘 너무 피곤해서 간단하게만 정리하고 나중에 따로 블로깅을 하려고 한다. (아래 내용은 매우 간략한 요약과 일부 뇌피셜이 있으므로 주의) 클로저 클로저 : 함수가 생성될 시점의 정보를 기억했다가, 나중에 접근하여 사용하는 것. 함수가 중첩되어 있을 때, 즉 외부 함수와 내부 함수가 있을 때 내부 함수는 외부 함수에서 생성된 변수에 접근할 수 있는데, 심지어 외부 함수가 종료되어 실행 컨텍스트에서 pop되어도 이 정보는 렉시컬 환경에 그대로 남아있기 때문에 접근하여 사용할 수 있다. 생성될 시점의 정보를 기억하고 있다는 ..

[Day 13] 원시타입, 참조타입, 스코프

오늘 배운 것 자바스크립트 엔진은 콜 스택과 메모리 힙으로 구성되어 있다. 엔진을 포함해 자바스크립트가 작동할 수 있는 환경을 자바스크립트 런타임이라고 한다. [JavaScript] 자바스크립트 엔진과 런타임 자바스크립트 엔진 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 각 브라우저별로 고유한 엔진을 가지 friedegg556.tistory.com 콜 스택의 역할 중 하나는 실행 컨텍스트를 관리하는 것이다. 실행 컨텍스트란 자바스크립트의 코드 일부가 실행되는 환경이고, 변수 정보와 스코프등이 여기에 포함된다. [JavaScript] 실행 컨텍스트와 콜 스택 자바스크립트 코드의 실행 컴파일 완료 후 코드의 ..

[JavaScript] 스코프 :: 변수 접근 유효 범위

스코프 Scope 변수 접근 규칙에 따른 변수의 유효 범위라고 할 수 있다. let a = 'apple'; function fruit () { let a = 'banana'; console.log(a); } console.log(a); fruit(); console.log(a); // apple // banana // apple 위 코드의 실행 결과는 apple, banana, apple 이다. 먼저 첫번째 console.log 에서 전역변수 a를 출력하고, 그 뒤 fruit함수를 실행해, 새로운 지역변수 a에 banana를 할당한 뒤 이를 출력한다. 함수 종료 후 다시 console.log를 실행할 때, 함수 내에서 할당했던 banana가 아닌, 전역변수 a의 apple이 출력된다. 이렇게 동작하는 이..

[JavaScript] 콜 스택과 메모리 힙 :: 데이터의 저장 방식

[JavaScript] 자바스크립트 엔진과 런타임 자바스크립트 엔진 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 각 브라우저별로 고유한 엔진을 가지 friedegg556.tistory.com [JavaScript] 실행 컨텍스트와 콜 스택 자바스크립트 코드의 실행 컴파일 완료 후 코드의 실행 준비가 끝나면, 자바스크립트 엔진은 전역 실행 컨텍스트를 생성한다. 여기서 실행 컨텍스트란, 코드가 실행되기 위한 정보를 담고있는 friedegg556.tistory.com 위 게시물의 내용과 같이, 자바스크립트 엔진에는 콜 스택과 메모리 힙이 있다. 콜 스택은 원시타입 데이터의 저장 - 콜 스택 내의 실행 컨텍스트를..

[JavaScript] 실행 컨텍스트와 콜 스택

자바스크립트 코드의 실행 컴파일 완료 후 코드의 실행 준비가 끝나면, 자바스크립트 엔진은 전역 실행 컨텍스트를 생성한다. 여기서 실행 컨텍스트란, 코드가 실행되기 위한 정보를 담고있는 환경을 의미하며, 전역 실행 컨텍스트란 특히 어떤 함수에도 포함되어 있지 않은 전역 코드의 실행을 위한 실행 컨텍스트이다. 먼저 전역 실행 컨텍스트를 생성해 전역 코드를 평가하고 실행한다. 전체 전역 코드가 실행되면서 함수가 호출되었다면, 함수 코드를 평가하면서 해당 함수를 실행하는 실행 컨텍스트를 생성하고 그 안에서 코드를 실행한다. 실행 컨텍스트는 코드의 종류에 따라 각각의 실행 컨텍스트와 독자적인 스코프를 갖는다. 메서드 또한 함수이기 때문에 별도의 실행 컨텍스트 안에서 실행된다. 모든 함수의 실행이 종료되면, 자바스..

[JavaScript] 자바스크립트 엔진과 런타임

자바스크립트 엔진 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 각 브라우저별로 고유한 엔진을 가지고 있고, 어떤 엔진이든 자바스크립트 엔진은 콜스택과 메모리 힙을 포함한다. 콜 스택 우리의 코드가 실제로 실행되는 영역이고, 이 작업은 콜 스택 내의 실행 컨텍스트에 의해서 이루어진다. 또한 원시타입 데이터가 이 영역에 저장된다. 메모리 힙 구조화 되지 않은 메모리 풀(memory pool) 로 앱이 실행되기 위해 필요한 참조타입 데이터(객체)가 저장된다. 컴퓨터는 0과 1밖에 모르기 때문에, 우리가 작성한 소스코드가 실제로 실행되기 위해서는 컴퓨터가 알아들을 수 있는 머신 코드로 변환하는 작업이 필요하다. ..

[JavaScript] JSON

JSON JavaScript Object Notation 클라이어언트 서버간 통신을 위한 텍스트 데이터 포맷이다. 즉 데이터를 저장하거나 전송할 때 사용하는 데이터 형식이다. JSON 표현식은 사람과 기계가 모두 이해하기 쉽고 용량이 작아서, xml을 대체하여 데이터 전송에 많이 사용된다. JSON은 자바스크립트 문법에 기반을 두고 있지만 차이점도 존재하며, 자바스크립트에 종속되지 않는 독립형 데이터 포맷이다. 따라서 자바스크립트 이외에 다른 프로그래밍 언어에서도 사용할 수 있다. JSON 표기 방식 자바스크립트의 객체 리터럴과 유사하게 키 : 값의 쌍으로 구성된 순수한 텍스트이다. JSON의 키는 반드시 "큰따옴표"('작은따옴표' X) 여야 하고, 값은 객체 리터럴과 동일하게 사용하되 문자열은 반드시 ..