JavaScript

[JavaScript] Promise

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 비동기 작업이 가질 수 있는 3가지 상태 Pending 대기상태 : 현재 비동기 작업이 진행 중 혹은 시작할 수 없는 문제가 있는 상황. Fulfilled 성공 Rejected 실패 비동기 작업은 한 번 성공하거나 실패하면, 그것으로 끝이 난다. Pending → Fulfilled : Resolve 해결 Pending → Rejected : Reject 거부 성공과 실패를 이렇게 두 가지 경우로 볼 수 있다. 비동기 처리 결과 핸들링 : 콜백 함수 버전 콜백 함수를 활용하여 비동기 처리의 결과를 성공 resolve, 실패 reject 로 핸들링. (promise 객체 사용 x) function isPositive(num..

[JavaScript] 동기와 비동기

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 동기 처리 방식 & 비동기 처리 방식 동기 처리 방식 : Synchronous 코드가 작성된 순서대로 처리한다. 한 번에 하나의 요청을 처리하며, 다음 요청이 실행되지 않도록 막는 블로킹 방식이다. 문제점은 수행해야 하는 하나의 작업이 너무 오래 걸리면, 다음 작업이 시작되기 까지 오래걸리고, 또 그 작업이 끝날 때 까지 기다려야 하기 때문에 느리다. 비동기 처리 방식 : Asynchronous 하나의 요청이 끝날 때 까지 기다리는 것이 아니라, 끝나든 말든 그냥 다음 요청을 실행하는 것이다. 다음 요청이 실행되는 것을 막지 않는 논블로킹 방식. 그러면, 비동기 처리 방식에서는 각 요청들이 끝난 것을 어떻게 확인할 수 ..

[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' 이지만..

[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) 여야 하고, 값은 객체 리터럴과 동일하게 사용하되 문자열은 반드시 ..

[JavaScript] 객체 Object

객체란 무엇인가? 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 객체에 속한다. 객체에서 각 요소는 프로퍼티 (key : value 쌍)으로 구성되어 있다. key는 속성 이름, value는 속성 값이 된다. value는 어떤 값이든 될 수 있고, key는 문자열이다. 함수 역시 값을 반환하므로 객체 내에 프로퍼티로 존재할 수 있다. 이를 객체의 메서드(method)라고 한다. 이 프로퍼티(key:value)의 key는 메서드의 이름, value는 함수가 반환하는 결과 값이 된다. 객체 vs 배열 배열에서는 각 요소에 접근하기 위해, 이름 없이 순서(index)로 접근한다. 객체에서는 각 요소의 key값으로 value값에 접근할 수 있..