본문 바로가기

FrontEnd/HTML5 & CSS & JavaScript29

[JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 2022. 5. 6.
[JavaScript] 한글 키보드 입력 시 이벤트가 두 번 호출되는 경우 문제상황 Ant Design의 Input에 onPressEnter를 사용하는 중 위와 같은 문제가 발생했다. 텍스트를 입력하고 엔터를 누르면 Select의 옵션 값으로 추가가 되도록 구현했는데, 함수가 두 번씩 호출되어 텍스트의 마지막 글자가 옵션값에 추가가 되어버렸다. 해결 방법 onKeyDown/onKeyUP 그리고 onKeyPress onKeyDown, onKeyUp 키를 누르고 떼는 동작 자체에 반응 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못함 onKeyPress 위와 달리 문자가 실제로 입력됐을 때 반응 따라서 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Sc.. 2022. 5. 2.
HTTP/1.1과 HTTP/2 HTTP/1.1 HTTP/1.1의 동작방식 - 기본적으로 Connection당 하나의 요청을 처리하도록 설계 - 동시전송이 불가능하고 요청과 응답이 순차적으로 진행 - HTTP 문서 안에 포함된 다수의 리소스(Images, CSS, Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간) 증가 HTTP1.1의 단점 HOL(Head Of Line) Blocking : 특정 응답의 지연 HTTP/1.1의 connection당 하나의 요청처리를 개선할 수 있는 기법 중 pipelining이 존재한다. 이것은 하나의 connection을 통해 다수 개의 파일을 요청/응답 받을 수 있는 기법을 말하는데 이 기법을 통해서 어느 정도의 성능 향상이 가능하나 큰 문제점이 하나 있다. 하나의 .. 2022. 4. 4.
[JavaScript] Function의 call과 invoke 차이 일부 문맥에서는 call과 invoke를 동일한 것으로 취급한다. 하지만 의미를 의도적으로 구분하는 경우, invoke는 간접적인 함수의 호출을 의미한다. fn(); // I'm calling it fn.call(); // I'm calling it fn.apply(); // I'm calling it JavaScript 함수는 fn()과 같이 직접 호출(call) 될 수 있고, fn.call(), fn.apply()와 같이 간접 호출(invoke)될 수도 있다. 두 경우 모두 함수 호출이지만, 직접 호출(call)은 말 그대로 함수를 직접 호출 하는 것이나 간접 호출(invoke)은 어딘가에 레퍼런스를 유지한 다음 간접 호출된다. 그래서 간접 호출(invole)는 보통 익명함수, 클로저, 델리게이트 등.. 2022. 1. 24.
[TypeScript] Type Alias vs Interface Type Alias 똑같은 타입을 한 번 이상 재사용하거나 또 다른 이름으로 부르고 싶은 경우 사용하며, Type에 대한 Alias(이름, 별칭)을 제공한다. Type Alias의 구문은 아래와 같다. type Point = { x: number; y: number; }; function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } printCoord({ x: 100, y: 100 }); Type Alias를 사용하면 객체 타입뿐만이 아니라 모든 타입에 대해서 새로운 이름을 부여할 수 있다. 예를 들어, 아래와 같이 유.. 2022. 1. 21.
[JavaScript] 프로토타입 상속(inheritance) 상속이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미한다. 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있으며, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있다. 따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 된다. 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다. 프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다르다. 자바스크립트에서는 현재 존재하고 있는 .. 2022. 1. 19.

티스토리툴바