하나씩 알아가기

bundle : (동사) ~을 마구 싸 보내다[밀어 넣다] 웹 환경에서는 머신의 성능과 관계 없이 인터넷 속도나 거리 등에 의해서 영향을 받을 수 있습니다. 그래서 가능하면 파일을 나누어서 요청을 받기 보다는 하나로 합쳐서 보내는 것이 현명합니다. 번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어 주는 역할을 합니다. 모듈 번들러의 등장 배경 수많은 모듈들의 의존성처리를 해결해야만 했다(여러 개의 자바스크립트 파일을 각각 태그에 쓴다고 생각해보면 끔찍할 것이다) 모듈이 많아질 수록 HTTP 요청이 많아질테고 이로 인해 오버로드를 해결해야 했다 모듈 번들러는 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만들어줍니다. 모듈 번들러의 종류 Webp..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 이벤트 위임(Event Delegation)을 알기 위해선 이벤트 버블링과 캡처링의 동작 방식을 이해해야 합니다. 이벤트 버블링이란, 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 시작해서 상위요소까지 이벤트가 전달되는 방식을 말합니다. (하위 -> 상위) 이벤트 캡처링이란, 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트로부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식을 말합니다. (상위 -> 하위) 링크를 클릭했는데 태그를 감싸고 있는 태그와 또 이를 감싸고 있는 태그까지 이벤트가 전달되는 것을 확인할 수 있습니다. 이벤트 버블링이 디폴트이며 이벤트 캡처링으로 바꾸려면 addEventListener() 의 마..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 이번에는 자바스크립트에서의 new가 어떤 역할을 하는 지, this의 new 바인딩이 어떻게 이루어지는지에 대해 알아보겠습니다. 「new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다」 자바스크립트에서도 자바 처럼 new 키워드가 존재합니다. 그러나 인스턴스를 생성하는 전통적인 의미의 new와는 의미가 다릅니다. 「new 키워드는 일반 함수 호출 도중에 가로채어 원래 수행할 작업 외에 객체 생성이라는 잔업을 더 부과하는 지시자고 new로 호출되는 대상은 생성자가 아닌 그냥 일반 함수일 뿐이다」 먼저 생성자(constructor) 부터 다릅니다. 자바스크립트에서 생성자는 앞에 new 연산자가 있을 때 호출되는 일반 함수에 ..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. ES6에 추가된 화살표 함수는 function 키워드 대신 =>(fat arrow) 연산자를 써서 표현합니다. 화살표 함수의 가장 큰 특징은 this의 바인딩 방법입니다. 화살표 함수의 렉시컬 스코프를 살펴봅시다 function foo(){ //화살표 함수를 반환한다 return (a) => { console.log(this.a); } } var obj1 = { a:2 } var obj2 = { a:3 } var bar = foo.call(obj1); bar.call(obj2); foo()의 리턴문에서 생성된 화살표 함수는 foo() 호출 당시의 렉시컬 스코프로 this를 포착합니다. foo()는 obj1에 this가 바인딩 되므로 bar의 this..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 명시적 바인딩(explicit binding) 함수 레퍼런스 프로퍼티를 객체에 넣지 않고 어떤 객체를 this 바인딩에 이용하겠다는 의지를 코드에 명확히 밝힐 방도는 없을까? call(), apply() 메소드에 대해 알아보겠습니다. 두 메소드는 this에 바인딩 할 객체를 첫째 인자로 받아 함수 호출 시 이 객체를 this로 세팅합니다. this를 지정한 객체로 직접 바인딩 하므로 이를 '명시적 바인딩(explicit binding)이라고 합니다. function foo() { console.log(this.a); } var obj = { a: 2 } foo.call(obj); foo.call()에서 명시적으로 바인딩하여 함수를 호출하므로 this..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 자바는 클래스 기반 언어이지만 자바스크립트는 프로토타입 기반의 언어라는 것을 들어보신적 있을 것입니다. 그만큼 자바스크립트에 있어서 중요하다고 해도 과언이 아니지만, 프로토타입의 개념을 정확히 이해하는 것은 쉽지 않기 때문에 한 번 정리해 보도록 하겠습니다. 자바스크립트에는 클래스라는 개념이 없습니다. 프로토타입을 이용하여 상속 기능을 구현합니다. ES6에서 class 문법이 추가되긴 하였지만 자바스크립트가 프로토타입 기반에서 클래스 기반으로 바뀐 것은 아닌 것으로 알고 있습니다.(class 키워드로 인해 구체적으로 자바스크립트 내부적으로 어떤 동작이 이루어지는지도 추후에 공부해 봐야겠군요) function Car() { this.wheel = 4;..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 자바스크립트의 내부 동작을 정확히 이해하는 것은 중요하기 때문에 정리해 보겠습니다. 런타임 환경(Runtime Environment) 자바스크립트의 런타임 환경은 다음 그림과 같이, 네 가지로 구성되어 있습니다. 1. 자바스크립트 엔진(힙과 호출 스택) 2. 웹 API 3. 콜백 대기열 4. 이벤트 루프 자바스크립트 엔진은 웹 브라우저에 존재하기 때문에 특정 소프트웨어를 설치할 필요가 없습니다. 브라우저 별로 다른 엔진을 사용하며, 시장에서 가장 점유율이 높은 Chrome의 경우 자바스크립트 엔진으로 V8 JS 엔진을 사용합니다. 자바스크립트 엔진의 목적은 개발자가 작성한 소스 코드를 컴퓨터가 특정 작업을 수행할 수 있는 기계어 코드로 변환하는 것이..