promise를 응용하여 로직을 하나 구현해보고자 한다! 일단 원하는 로직은 다음과 같다. a가 콘솔에 먼저 찍히고 일정 시간 뒤에 b가 찍히는 로직을 만들고 싶은 상황 해당 로직을 구현하려면 다음과 같이 구현하면 된다. const delay = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); },time * 1000); }); } const run = async () => { console.log('a'); try { await delay(3); } catch (err) { console.log('에러 발생'); return; } console.log('b'); } console.log(run()); ..
요즘 개발자 블로그나 유튜버 개발자 채널 등을 보면 svelte를 소개하는 게시물을 적잖이 접한다. 국내에서 프론트엔드 프레임워크로 React, vue가 대중적인 인기를 끌고 있고 현재 기업의 웹 서비스도 두 프레임워크를 중심으로 도입하고 있는 곳이 많이 있는 한편 최근에는 svelte로 구현되어 있는 웹 서비스도 있으며 심지어 개발자 채용을 보면 svelte 개발자를 찾는 기업도 적잖이 보았다. 이렇게 svelte가 무서운 기세(?)로 핫해지는 이유는 뭘까 궁금해서 공식사이트에서 설명하는 svelte는 무엇인지 알아보았고 최근에는 공식 사이트 튜토리얼을 통해 svelte를 공부하고 있다. 그럼 svelte는 무엇인가? 구글로 검색하면 바로 확인할 수 있듯이 Rich Harris가 개발하였으며 Svelt..
this란? 함수가 어떻게 호출되는지에 따라 동적으로 결정되는 녀석(?)이다. this의 목적 작성된 코드를 여러 목적으로 재사용하기 위해 존재 this의 특징 전역 및 함수 바디에서 사용 가능하다. class 안에서 사용하는 this는 생성자 함수에서 사용하는 this와 동일하다. 전역에서의 this 브라우저 환경에서 this를 전역에서 사용하면 이 this는 전역 객체인 window객체를 가리킨다. 그래서 전역에서 const, let, var 없이 valueA라는 변수를 사용할 경우 window.valueA와 같다. 일반 함수에서의 this this를 사용하는 일반 함수를 호출하면 this는 전역 객체인 window객체를 가리킨다. 단, 함수 내에서 'use strict'키워드를 사용하면 this는 ..
프로그래밍 언어는 값을 자료형(type)으로 분류한다. 이 자료형에 따라 값을 구분하여 알고리즘을 구현하는 만큼 자료형은 매우 중요한 기초지식이다. 자바스크립트의 경우 이 자료형을 크게 두 가지로 분류한다. 우선 기본 타입이 되는 원시타입(primitive data type)이 있고 참조타입(reference data type)이 있다. 원시타입(primitive data type) 값이 변수에 할당될 때 메모리 상으로 고정된 크기로 저장된다. const a = 4; 예를 들어 위와 같이 변수 a에 값이 할당되었을 때 숫자4는 8바이트만큼의 메모리 공간을 마련하여 직접 숫자 4를 보관한다. 이처럼 고정된 공간에 보관된 원시 타입인 값은 불변 값(immutable value)의 특징을 갖는다. 원시타입인 ..
타 저수준 언어에서는 메모리 관리를 따로 해야 하지만 자바스크립트와 같은 고수준 언어는 메모리 관리를 자동으로 수행해준다. 가비지 컬렉션 객체, 함수 등은 메모리를 차지하는데 더 이상 쓸모 없는 것들은 메모리에서 삭제 처리하는 것을 의미하며 그 주체를 가비지 컬렉터라고 한다. 가비지 컬렉션의 알고리즘 자바스크립트의 가비지 컬렉션은 **도달가능성(reachability)**이라는 개념으로 메모리 관리 수행 도달 가능성이 있는 값이란 접근 및 사용이 가능한 값을 의미한다. 예를 들어 A라는 메모리가 있는데 A를 통해 B라는 메모리에 접근할 수있다는 것은 B는 A에 참조된다는 것을 의미하며 B는 접근 및 사용이 가능하는 것이다. 이러한 것들은 메모리에서 삭제되지 않는다. 근본적으로 도달가능성이 있는 값 1. ..
DOM 우선 가상 DOM을 이해하기 전에 DOM의 의미를 짚고 넘어갈 필요가 있다. Document Object Model의 준말이며 HTML과 XML의 문서이자 그것들을 위한 프로그래밍 인터페이스다. 여기서 프로그래밍 인터페이스를 간략히 설명하자면 HTML이나 XML에 어떠한 속성과 엘리먼트들이 존재해야 하는지 기술만 해놓고 실제 구현은 각 구현하는 곳에서 다르게 구현할 수 있도록 약속을 정의해놓은 것이라고 보면 된다. 다시 DOM으로 돌아와서 DOM은 프로그래밍 인터페이스이기 때문에 다양한 브라우저에서 해당 인터페이스를 구현한다. 즉, 브라우저가 DOM을 읽고 그 DOM에 해당하는 것들을 만들 수 있으며 한편 DOM은 자바스크립트로 제어할 수 있기 때문에 DOM에서 정의한 문서의 구조를 수정할 수 있..