브라우저 렌더링 과정 웹 개발자라면 당연히 알아야 할 과정이지만, 의외로 많은 사람들이 모른다. 물론 필자도 처음에 웹을 배울 때 이런거를 모르고 하다가 기본기가 부족해서 공부하다가 나중에서야 알았다. 사실 이 글은 그렇게 쉽게, 그리고 편하게 작성된 글이 아니다. 더 자바스크립트 위주의 설명으로 되어있다는 것을 명심하자. 만약, 더 쉽고 간단하지만 깊은 내용을 알고 싶다면, google에서 설명한 inside-browser-part를 참고하길 바란다. (1 ,2, 3, 4 파트로 이루어졌다.) https://developers.google.com/web/updates/2018/09/inside-browser-part1 1. 브라우저의 렌더링 과정 대부분의 프로그래밍 언어는 운영체제나 가산 머신 위에서 ..
배열 2 1. 배열 고차 함수 고차 함수(Higher-Order Function, HOF)는 함수를 인수로 전달받거나, 함수를 반환하는 함수를 말한다. 자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수도 있다. 고차 함수는 외부 상태의 변경이나 가변(mutable)데이터를 피하고 불변성(immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 순수 함수(pure function)와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. 조건문이나 반복문은 로직의 흐름을 이해하기 어렵게 하여 가독성을 해치고, 변수는 누군가에 의해..
배열 1. 배열 기본적으로 자바스크립트의 배열은 객체타입으로 여러가지 프로퍼티를 가지고 있다. 가장 대표적인 프로퍼티가 length이다. const arr = [1,2,3] for(let i = 0; i < arr.length; i++){ console.log(arr[i]) // 1 2 3 } 배열은 객체로, Array 생성자 함수를 가지고 있다. 때문에 프로토타입도 Array.prototype을 갖는다. const arr = [1,2,3] console.log(arr.constructor === Array) // true console.log(Object.getPrototypeOf(arr) === Array.prototype) // true 1.1 희소 배열 사실 자바스크립트의 배열은 일반적인 배열과는..
ES6 함수의 추가 기능 1. 함수의 구분 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 다시말해 es6이전의 모든 함수는 callable이면서 constructor이다. var foo = function(){ return 1; } foo() // 일반적인 함수로서 호출 new foo() // 생성자 함수로서 호출 var obj = {foo : foo} obj.foo() // 메서드로서 호출 new obj.foo() // 객체의 메서드도 constructor이다. 재밌는 것은 객체에 바인딩된 함수조차도 constructor라는 것이다. 즉, constructor라는 것은 프로토타입 프로퍼티를 가진다는 것이며, 프로토타입 객체도 생성한다는 것을 의미한..
클래스 클래스 2편으로 1편을 먼저 보고와주길 바란다. 1 클래스의 인스턴스 생성 과정 인스턴스 생성과 this 바인딩 new연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 클래스가 생성한 인스턴스이다. 이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 따라서 constructor 내부의 this는 클래스가 생성한 인스턴스를 가리킨다. 인스턴스 초기화 constructor 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 즉 this 바인딩되어 있는 인스턴스에 프로..
클래스 자바스크립트는 프로토타입 기반 객체지향언어이다. 비록 다른 객체지향 언어와는 다른 차이점이 있지만 강력한 객체지향 능력을 지니고 있는 것은 맞다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어이다. ES5에서는 클래스 없이도 함수와 프로토타입을 통해 객체지향 언의 상속을 구현하기도 하였다. 그러나 이는 다른 class 기반의 프로그래밍 언어를 배운 사람들에게는 높은 진입 장벽이되었고, 명시적으로 코드를 확인하기 어렵다는 단점이 있었다. 이에 따라 ES6에서는 클래스가 도입되었는데, 클래스가 프로토타입 기반의 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며, 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사..
클로저( Closures ) 1. 클로저 프론트엔드 개발자 면접에서 가장 많이 등장하는 개념이 아닌가 싶다. 그러나 제대로 대답하는 사람은 10명 중 1명도 보기 힘들다는 현직자 분의 글을 읽은 적이 있다. 대부분이 클로저는 js에서 private 역할을 하기위해 사용한다고 말했다고 하는데, 사실 이는 클로저의 활용이지 클로저의 정의라고 보기는 힘들다. 또한, 클로저는 js에서만 사용되는 개념이 아니다. 요즘 golang으로 개발을 진행하는데 여기서도 클로저의 개념이 사용된다. 이는 클로저가 함수형 프로그래밍에서 시작된 개념이기 때문이다. 그럼 클로저가 무엇이고, js에서는 클로저를 어떻게 정의하는지 알아보도록 하자 우리는 이전에 앞서 실행 컨텍스트에 대해서 공부해보았다. 실행 컨텍스트를 알게된 이상, ..
실행 컨텍스트 2 1. 함수 코드 평가 예제 코드를 다시 한 번 살펴보자 var x = 1; const y = 2; function foo(a){ var x = 3; const y = 4; function bar(b){ const z =5; console.log(a + b + x + y +z ); } bar(10); } foo(20); // 42 foo 함수가 호출되면 전역 코드의 실행을 일시 중단하고 foo 함수 내부로 코드의 제어권이 이동한다. 그리고 함수 코드를 평가하기 시작한다. 함수 코드 평가는 아래 순서로 진행된다. 함수 실행 컨텍스트 생성 함수 렉시컬 환경 생성 함수 환경 레코드 생성 this 바인딩 외부 렉시컬 환경에 대한 참조 결정 위 과정을 거쳐 생성된 foo 함수 실행 컨텍스트와 렉시..