자바스크립트

script 태그의 defer 키워드와 async 키워드 쉽게 알아보기

defer, async 스크립트란? script 태그에 추가될 수 있는 속성이다. HTML 코드를 보면, 혹은 와 같은 구문을 볼 수 있다. 역사를 알면, 이러한 속성 값들이 왜 생겼는지 알 수 있다. 역사를 살펴보며 천천히 배워보자. script 태그의 특징 초기의 브라우저 자바스크립트는 아주 짧고 간단한 스크립트 코드를 넣기 위해 존재했다. 그런데 동적인 웹의 발달로 자바스크립트 코드는 아주 길게 변했다. 브라우저는 DOM 을 생성하다가도 script 태그를 만나면, script 태그의 내용부터 해석하는 방식으로 동작했다. script 태그의 특징 때문에 생긴 문제 초기에 의도한대로 head 태그에 자바스크립트 코드를 몰아넣으니 DOM 을 생성하기도 전에 자바스크립트를 해석하느라 페이지 로딩 속도가 ..

모던 자바스크립트, 프라미스 2 - 유틸 메서드와 작업 패턴 그리고 안티 패턴

Promise 의 유틸 메서드 상황에 따라 편리하게 이용 가능한 유틸 메서드도 제공한다. Promise.all() 모든 Promise 가 resolve() 여야 then() 을 실행한다. 서로 의존하지 않고 병렬로 수행될 수 있는 여러 개의 비동기 작업이 있는데, 결과를 내기 위해서는 각 비동기 작업의 결과 값이 필요할 때 유용하다. ex) 3개의 영상의 조회수를 구하고 그 합을 구해야 한다면? const viewCount1 = getAsyncViewCount1(); const viewCount2 = getAsyncViewCount2(); const viewCount3 = getAsyncViewCount3(); viewCount1.then((count1) => { viewCount2.then((count..

모던 자바스크립트, 프라미스 1 - 기본 개념

프라미스 (Promise) 란? ES2015 에서 생겼다. 비동기 결과를 나타내는 객체이다. 작업을 비동기화하진 않으며, 비동기식의 결과를 관찰하는 방법이다. 여러 언어에서 promise, future, deferred 라는 다양한 이름으로 불리는 패턴이다. Promises/A+ 사양에 크게 의존한다. ES2018 에서 나온 async 와 상호작용하는 방식으로 많이 쓰인다. Promise 라는 이름은 엔진이 어떠한 비동기 작업을 하겠다고 약속한다는 의미에서 지어졌다고 한다. 프라미스를 사용하는 이유 프라미스는 자바스크립트에서 지원하는 대수타입의 모나드이며, 비동기 작업에서 서로간의 제어를 분리할 수 있도록 도와주는 역할을 한다. 비동기 작업의 제어권은 자바스크립트 엔진의 비동기 큐에게 맡기고, 비동기 작..

매크로 태스크 (Macro Task) 와 마이크로 태스크 (Micro Task) 란?

마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 자바스크립트에서 비동기 작업에 대해 공부하다 보면, 마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 라는 용어가 나온다. 둘 다 즉시 실행되지 않고 일단 대기 후에 실행되는 비동기 작업이라는 공통점이 있지만 둘은 다르게 처리된다. 마이크로 태스크 (Micro Task) 란? 현재 수행 중인 작업이 끝난 뒤에 이어서 실행될 작업 (콜백) 을 말한다. 프로미스 핸들러에서 볼 수 있는 then(), catch(), finally() 와 같은 예시가 있다. Node.js 에서 process.nextTick() 과 같은 메서드가 있다. nextTick() 에서 tick 은 이벤트 루프를 한 번 반복하는..

클로저 (Closure) 란 무엇인지 설명해주세요.

클로저란 무엇인가요? 함수에서 반환된 내부 함수가 이미 콜스택 영역에서 제거된 외부 함수 영역의 참조를 잃지 않고 기억하는 것을 말합니다. 함수 내부에 [[Scopes]] 라는 프로퍼티가 있기에 가능합니다. 이는 자바스크립트 코드로는 접근이 불가능하지만, 실행 컨텍스트에서의 Lexical Environment 를 기억하고 있습니다. function outer() { let count = 0; return function inner() { return count++; }; } const inner = outer(); console.log(inner()); // 0 console.log(inner()); // 1 console.log(inner()); // 2 클로저의 장점은 무엇인가요? 메모리 효율적이다...

모던 자바스크립트, 디스트럭처링 (Desctructuring)

디스트럭처링 (Destructuring) 이란? 객체 혹은 배열을 분해하여 내부 요소를 추출하는 것이다. 일반적으로 직접 추출하는 것보다 더 간결하다. 기본값, 이름 변경, 중첩 및 나머지 구문 등을 제공한다. 함수의 매개변수에서 명확성과 표현력을 제공한다. 객체 디스트럭처링 디스트럭처링의 형태 객체 리터럴과 매우 흡사하다. 다만, value 에 객체 리터럴처럼 값을 넣는 것이 아니라, 요소를 가질 변수명을 넣는다. const obj = { first: 1, second: 2 }; const { first: f, second: s } = obj; console.log(f, s); 아래는 한단계 더 발전시킨 더 직관적인 예제이다. const { first: a } = { first: 42 }; consol..

자바스크립트의 실행 컨텍스트 (Execution Context) 란?

실행 컨텍스트란? 함수 실행 내에서 환경을 가리키는 추상적인 개념이다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트의 생성 시점 실행 컨텍스트는 일반적으로 매 함수 호출 시에 생성된다. 함수 호출만큼 자주 일어나진 않지만, 함수 호출 외에도 전역 공간, eval() 함수 실행에도 실행 컨텍스트가 구성된다. 화살표 함수의 실행 컨텍스트 화살표 함수도 일반 함수처럼 실행 컨텍스트가 생긴다. 단, 화살표 함수의 this 는 lexically scoped 된다. 그래서 화살표 함수는 어떻게 호출되냐보다 어떤 블럭에서 정의되었냐가 중요하다. 실행 컨텍스트가 하는 일 호이스팅을 수행한다. this 의 값을 결정한다. 현재의 스코프에서 어떤 변수에 접근할 수 있는지를 결정한다. 인자(argu..

Lexical Scope (렉시컬 스코프) 란? (자바스크립트의 스코핑 방식)

개요 자바스크립트에서는 렉시컬 스코프(Lexcial Scope) 라는 스코핑 방식을 이용한다. 이는 굉장히 낯설은 영단어로 처음 스코프 개념을 접하는 프로그래밍 초보자들에게 많은 혼란을 준다. Lexical Scope 란? Lexical Scope 란 한글로 번역하면 어휘적 스코프이다. 어휘적 스코프라는 말을 들었을 때 이 스코핑 방식에 대해 이해한다면, 당신은 프로그래밍 고인물일 확률이 높다. Lexical Scope 는 Static Scope (정적 스코프) 라고도 불리운다. 정적 스코프라고 불리우는 이유는 스코프가 컴파일 타임에 결정되고 변하지 않기 때문이다. 런타임에 스코핑을 지원하는 Dynamic Scope 와 다른 방식의 스코프이다. 왜 이름이 Lexical Scope 인가? Lexical S..

자바스크립트 클래스 3 - 상속

서브클래스 ES5 에서 상속을 구현하는 방식은 꽤 복잡했다. class 문법이 생기면서 이러한 부분이 많이 개선되었다. class ClassWithAlpha extends Color {} extends 를 이용하면, 두 개의 상속 체인이 생성된다. 해당 생성자로 생성된 객체에 대한 병렬상속관계라고 한다. 하나는 생성자 자체에 있으며, 하나는 생성자의 프로토타입 객체에 있다. 생성자 상속 체인 ColorWithAlpha 서브클래스 생성자를 만든다. Color (슈퍼클래스 생성자 함수) Color 의 프로토타입을 만들어 모든 정적 속성/메서드를 ColorWithAlpha 에서 접근 가능하게 한다. Function.prototype 이외의 프로토타입을 갖는 함수의 개념이 등장한다. 프로토타입 체인 서브클래스 ..

자바스크립트 클래스 2 - 클래스 바디

클래스 바디의 필드와 메서드 클래스 바디란 {} 내부의 요소들을 말한다. 클래스 바디엔 대표적으로 상태를 저장하는 필드와 상태를 이용해 동작을 수행하는 메서드가 있다. 클래스의 바디에 올 수 있는 요소의 경우의 수 종류: Getter, Setter, Method, Field 위치: Static, Instance 접근: Public, Private 클래스의 바디에 오는 요소는 위 3가지를 모두 가져야 한다. 총 16가지 조합이 가능하다. 클래스에만 있는 특별한 것들 생성자 정적 초기화 블록 클래스 필드 추가하기 class ExampleClass { constructor() { this.field = 1; } } const c = new ExampleClass(); console.log(c.field); /..

자바스크립트 클래스 1 - 기본 개념

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입 체이닝을 이용해 객체를 객체지향의 상속과 비슷한 구현이 가능했다. new function() 을 이용했다. function 키워드가 클래스 생성자 역할까지 하려다보니 이 때 function 에 쓸데없는 것들이 많이 추가됐다. 결국 function 키워드는 화살표 함수의 등장으로 이제는 쓸 필요가 없다. (제너레이터 빼고) ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 컴퓨터 프로그래밍에서의 클래스 를 구현하는 것이 가능해졌다. 여전히 프로토타입도 이용하지만, 단순히 프로토타입만을 이용해서는 불가능하고 클래스로는 가능한 것들이 생겼다. 컴퓨터 프로그래밍에서의 클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메..

이터러블 스프레드 문법이란?

이터러블 스프레드 문법이란? 함수를 호출하거나 배열을 생성할 때, 결괏값을 이산값으로 분산하여 이터러블을 소비하는 방법이다. 속성 스프레드 문법 과 같이 ... 기호를 사용하지만, 다르다. 속성 스프레드 문법은 객체 내부에서만 유효하다. 이터러블 스프레드 문법은 iterable 객체 앞에서만 유효하다. 이터러블 스프레드 문법이 유효한 곳 함수의 인자 괄호 내부 배열 리터럴 내부 예제 1: 함수의 인자에서 사용 이터러블 스프레드 문법을 함수의 인자에서 사용할 수 있다. 이터러블 스프레드 문법 적용 전 Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9, 0); Math.min() 은 원래 위처럼 인자를 하나씩 넣어주어야 한다. 배열에 저 모든 숫자가 들어있다면, 인자를 넣기가 쉽지 않다. con..