본문 바로가기

FrontEnd/HTML5 & CSS & JavaScript28

[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.
[JavaScript] .map(), .filter(), .reduce() API 비교 JavaScript의 함수형 프로그래밍은 코드 가독성, 유지 관리 및 테스트에 이점이 있다. 함수형 프로그래밍 사고 방식에 도움이 되는 것 중 하나는 배열 처리 스타일 프로그래밍이다. 배열 처리 스타일 프로그래밍은 배열을 기본 데이터 구조로 사용하며, 배열의 요소에 대한 일련의 작업이 가능하다. forEach : 배열의 항목에 접근 for 루프는 배열의 모든 항목을 접근, 반복하는데 사용된다. forEach 역시 같은 역할을 하지만, for문 보다 더 간단하게 접근이 가능하다. const strings = ['arielle', 'are', 'you', 'there']; const capitalizedStrings = []; for (let i = 0; i < strings.length; i += 1) {.. 2022. 1. 18.
반응형

티스토리툴바