JavaScript

[자바스크립트] 마이크로 태스크 큐의 비동기 작업 처리와 렌더링 시점을 알아보자.

이전 글 [자바스크립트] 마이크로 태스크 큐 이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립 gobae.tistory.com 이전에 비동기 포스팅에서 알아본 마이크로 태스크 큐에 대해 좀 더 탐색하는 포스팅이다. 이전 글을 요약하면 "비동기 작업에도 우선순위가 있다. 비동기 작업은 마이크로 태스크 큐 혹은 매크로 태스크 큐(=일반적으로 말하는 태스크 큐)에 담기는데, 마이크로 태스크 큐에 있는 태스크가 태스크 큐에 있는 태스크보다 우선순위를 가진다. 그래서 이벤트 루프가 마이크로 태스크 큐에 담긴 태스크를 먼저 콜스택에 옮겨서 자바스크립트 엔진이 실행할 수 있도록..

브라우저/노드 환경에서 모듈, AMD, CommonJS, UMD 알아보기

프론트와 백엔드 공부를 하면서 상당히 혼동을 줬던 개념들이 포함된 개념이다. 브라우저에서 다른 자바스크립트 파일에 선언한 변수들이 같은 공간에서 존재하던 문제도 겪었고 현재 파일에서 다른 파일을 불러올 때 exports/require, export/import 등을 사용해서 불러오는데 무엇을 어느 상황에서 사용해야 하는지, 그리고 왜 babel을 써야 export/import를 사용할 수 있는가..? 등등 여러 문제가 있었다. 그래서 이번 포스팅에서는 모듈이 무엇이고 어떻게 발전해왔으며 프론트와 백엔드에서 어떤 차이가 있는지를 모두 다뤄볼 예정이다. 모듈 모듈을 검색해보면 다음과 같다. 1. (명사) 모듈, 교과목 단위(특히 영국 대학에서 한 교육 과정의 일부가 되는 단위) 2. (명사) 컴퓨터 모듈(특..

자바스크립트의 this는 어떻게 결정되는가?

this 이 포스팅에서는 this 키워드에 대해 알아본다. this는 자기참조변수로, 자신이 속한 객체나 자신이 생성할 인스턴스를 가리킨다. 자바스크립트 엔진에 의해 암묵적으로 생성되며, 어디서든 참조할 수 있다. ※ this의 바인딩은 함수호출방식에 따라 동적으로 결정된다. ★x100개다. 여기서 바인딩은 식별자와 값을 연결하는 과정을 의미하는데, this 바인딩은 식별자이자 키워드인 this에 this가 가리킬 객체를 연결한다는 의미이다. this가 함수 호출 시점에 결정되므로, 개발자가 작성한 코드와 다르게 동작할 우려가 있다. 그러므로 this는 동적으로 결정된다. 는 사실을 꼭 기억하고 this가 필요한 시점에 동작을 예상하며 코드를 작성해야 한다. this는 기본적으로 전역 객체(브라우저의 경..

자바스크립트의 undefined, null에 대해 알아보자.

자바스크립트 데이터의 원시값에는 7가지가 있다. String, Number, Boolean, undefined, null, Symbol, BigInt가 그러하다. undefined, null이 각각 원시 자료형임을 이해하는 것이 우선이다. 이 포스팅에서는 undefined, null은 무엇이며 언제 undefined와 null을 볼 수 있는지 그래서 '개발자가 변수에 직접 이 값을 할당해도 되는지?'에 대한 내용에 대해 다뤄볼 예정이다. undefined undefined가 무엇이고, undefined가 어떤 상황에서 이용되는지 알아보자. undefined는 '정의되지 않은' 이라는 의미이다. 자바스크립트에서 정의란, 변수에 값을 할당해서 변수를 명확히 하는 것을 의미한다. 변수에 값을 할당하기 위해선 ..

자바스크립트 클래스란?

클래스, 객체, 인스턴스 클래스는 객체를 만들어내기 위한 설계도 혹은 틀이며, 연관되어 있는 변수와 메서드의 집합이다. 클래스는 객체 정의를 위한 상태(멤버변수)와 메서드(함수)로 구성된다. 클래스와 객체, 인스턴스 간 연관을 짧게 설명하자면 객체 소프트웨어 세계에서 구현할 대상으로, 클래스에 선언된 형태 그대로 생성된 실체이다. 인스턴스 클래스(설계도)로부터 구현된 구체적인 실체를 의미하며 클래스로부터 객체를 생성했다면, 그것을 인스턴스라고 부른다. 예를 들어, Person 클래스라면 Person 클래스로 구현한 Tom은 인스턴스이다. 객체와 인스턴스의 관계는 다음과 같다. 1. 인스턴스는 객체에 포함된다. 2. oop 관점에서, 객체가 메모리에 할당되어 실제로 사용되면 "인스턴스" 라고 한다. 3. ..

객체 프로퍼티의 getter와 setter

객체 프로퍼티의 종류 객체 프로퍼티는 데이터 프로퍼티, 접근자 프로퍼티로 나뉜다. 데이터 프로퍼티(Data Property) key:value 형태의 값에 문자열, 숫자, 함수, 객체, 배열 등등의 값이 들어간 모든 프로퍼티를 의미한다. 접근자 프로퍼티(Accessor Property) 접근자 프로퍼티는 함수이며, get과 set의 역할을 한다. 그러나, 외부에서 해당 객체를 사용할 때 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있다. Getter & Setter 접근자 프로퍼티는 getter, setter 메서드로 표현될 수 있다. 그리고 객체에서 getter, setter는 각각 get, set으로 나타낼 수 있다. getter 메서드는 객체 프로퍼티를 가져오는 함수이며, setter 메서드는 객..