본문 바로가기

FrontEnd94

[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.
웹 접근성과 시맨틱 마크업 시맨틱 마크업 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 작성 방법 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일.. 2022. 1. 17.
Virtual DOM vs Incremental DOM React에 익숙하다면 Virtual DOM이라는 개념에 대해 한 번쯤 들어봤을 것이다. Virtual DOM은 UI 성능을 향상시킴으로써 React의 인기에 기여한 주요 역할 중 하나이다. Angular가 2019년에 새로운 Renderer Angular Ivy를 출시했을 때 많은 사람들이 Virtual DOM 대신 Incremental DOM이라는 개념을 선택한 이유를 궁금해했다. 여전히 Angular는 Incremental DOM을 사용 중이며, Angular가 이러한 선택을 한 이유에 대해 궁금해 할 것이다. Incremental DOM을 알아보기 전, 먼저 Virtual DOM에 대해 알아보자. Virtual DOM 동작 방식 Virtual DOM는 UI 가상 표현을 메모리 상에 두고 재조정(R.. 2022. 1. 16.
반응형