U_D

1. 클릭 이벤트(Click Event) 클릭 이벤트는 마우스로 클릭할 때 발생하는 이벤트입니다. HTML 요소에서 onclick 속성, DOM 요소에서 click 이벤트를 사용하여 핸들링할 수 있습니다. Click me! 2. 마우스 이벤트(Mouse Event) 마우스 이벤트는 마우스를 사용할 때 발생하는 이벤트입니다. 마우스 이벤트로는 클릭 이벤트 외에도 마우스 오버(mouseover), 마우스 아웃(mouseout), 마우스 이동(mousemove) 등의 이벤트가 있습니다. 3. 키보드 이벤트(Keyboard Event) 키보드 이벤트는 키보드 입력에 대한 이벤트입니다. HTML 요소에서 onkeydown, onkeyup 속성, DOM 요소에서 keydown, keyup 이벤트를 사용하여 핸들링할..

모던 자바 스크립트에서는 기존의 Object(객체)이외에 Map(맵)과 Set(세트)라는 컬렉션이 추가됐다. 하지만 아직도 대부분의 객체 형태로 많이쓰고 있던 와중 Map이라는 것을 알게되었고, 언제 써야하는지에 대해 고민하게 되었다. MDN에서는 Map의 장점과 어떤 경우에 써야하는지를 서술하고 있다. Map 의 장점 - 객체의 Key는 strings지만, Map의 Key는 모든 값을 가질 수 있다. - 객체는 수동으로 크기를 추적해야 하지만, Map은 크기를 쉽게 알 수 있다. - Map은 삽입된 순서대로 반복된다. - 객체에는 prototype 이 있어 Map에 기본 키들이 있다. 객체 또는 Map을 결정하는 사항 - Map : 실행 시 까지 키를 알 수 없고, 모든 키가 동일한 type이며 모든 ..

브라우저의 렌더링 프로세스는 HTML, CSS 및 JavaScript와 같은 웹 페이지의 리소스를 불러와 브라우저 창에 보여주는 과정을 말합니다. 브라우저는 웹 페이지를 렌더링하기 위해 여러 단계를 거치게 됩니다. 요청과 응답 웹 페이지를 렌더링하는 과정에서 가장 먼저 수행되는 단계는 서버로부터 HTML, CSS, JavaScript 파일 등의 리소스를 요청하는 것입니다. 이를 요청(request)이라고 합니다. 브라우저는 URL 주소를 통해 요청을 보내고, 서버는 요청을 받아 해당하는 리소스를 찾아서 응답(response)합니다. 이 응답은 HTTP 프로토콜을 통해 전송되며, 응답은 여러 가지 상태 코드를 가질 수 있습니다. 성공적으로 리소스를 찾아 응답하는 경우에는 200 상태 코드가 반환되고, 실패..

28. Number 표준 빌트인 객체 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공함 28.1 Number 생성자 함수 표준 빌트인 객체인 Number 객체는 생성자 함수 객체이므로, new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있음 Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체 생성 const numObj = new Number(); console.log(numObj); // Number {[[PrimitiveValue]]: 0} [[PrimitiveValue]] 라는 접근할 수 없는 프로퍼티가 있는데 이는 [[NumberData]] 내부 슬롯을 가..

배열이란? 배열(Array)은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다. 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 배열은 사용 빈도가 높으므로 배열 메서드를 능숙하게 다룰 수 있다면 코딩에 매우 도움이 된다. const arr = ['apple', 'banana', 'orange']; // 'apple'의 인덱스는 0, 'banana'의 인덱스는 1, 'orange'의 인덱스는 2 arr[0] // 'apple' arr[1] // 'banana' arr[2] // 'orange' 배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함..

함수의 구분 ES6 이전의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 일반적인 함수 new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수 객체에 바인딩된 메서드 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서 손해다. var foo = function () { return 1; } // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메서드로서 호출 var obj = { foo: foo }; obj.foo(); // -> 1 즉, ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.. 다시말해 ES6 이전의 모든 함수는 calla..

들어가며 사실 class를 자체적으로 만들어 쓰고있지 않아 어떤 상황에서 써야 하는지에 대한 의문이 많이드는 시간이었다. 나름대로 단순하게 class가 필요한 순간을 고려해면 다음과 같은 상황에 적용해보면 좋을거 같다. 객체 지향적 프로그래밍이 필요할 때 -> 이 말은 즉 확장과 재사용을 고려한 구조를 잡으며 사용할 때라고도 볼 수 있을거 같다. class는 흔히 쓰는 함수와 다르게 만들어 둔 Class를 가져와 확장하여 쓸 수 있다. node 에러 핸들링 -> node가 가지는 Error에 대한 정의를 가져와서 커스텀 할 때, 즉 에러 핸들링을 할 때 class를 통한 확장이 가능해보인다. 변하지 않는 값이 고정적으로 들어갈 때 -> 단편적으로 api 호출에 대한 Fetch가 있을 때 헤더,바디 등 ..

this란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다. 전역에서 this는 전역 객체 window를 가리킨다. 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다. const person = { name: 'Lee', get..

들어가며 객체 리터럴에 의한 객체 생성 방식의 문제점 단 하나의 객체만을 생성한다. 따라서 동일한 프로퍼티를 갖는 여러개 객체를 생성할때는 매번 같은 프로퍼티를 기술해야하기 때문에 비효율적이다. 생성자 함수에 의한 객체 생성방식의 장점 객체를 생성하기 위한 클래스 처럼 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있다. this : 자기 참조 변수 this 바인딩은 함수 호출 방식에 따라 동적으로 결정 일반함수 : 전역 객체 메소드로서 호출 : 메소드를 호출한 객체 생성자 함수로서 호출 : 생성자 함수가(미래에) 생성할 인스턴스 17.1 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후에 프로퍼티 또는 메서..

실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 23.1 소스코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 소스코드의 타입 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다. 1. 전역 코드 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하기 위해 전역 객체와 연결되어 있어야 한다. 전역 코드가 평가됨으로써 전역 실행 컨텍스트가 생성된다. 2. 함수 코드 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, argume..