본문 바로가기

FRONTEND/Javascript29

Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map set() 과 get() 으로 값 할당하기 Map 내부 순회 Array 와의 관계 WeakMap 사용 방법 Set add() 와 delete() 로 Set 객체 사용 Set 내부 순회 Array 와의 관계 String 과의 관계 WeakSet 사용 방법 Map Map 객체는 Object 와 동일하게 키-값 쌍을 저장하며 삽입 순서도 기억하는 콜렉션 입니다. 어떤 값이라도 key, value 로 설정할 수 있습니다. Map 이 Object 와 구별되는 중요한 특징이 있는데, 주요한 특징들은, Map 의 key 는 함수, 객체 등을 포함한 모든 값이 가능합니다. Map 은 명시적으로 제공한 키 외에는 어떤.. 2021. 5. 9.
bundle size 와 Javascript Performance Javascript Performance Beyond bundle size Bundle Size Bundler 관련 Plugins Bundlephobia Webpack Bundle Analyzer Rollup Plugin Analyzer 그 외의 bundle size tool 들 Beyond the bundle Runtime CPU cost 안전한 속도 측정 방법 Power usage Memory usage Disk usage 결론 출처 nolanlawson 번역 Javascript Performance Beyond bundle size bundle size를 가장 먼저 체크하는 이유는, 가장 빠르게 확인할 수 있기 때문입니다. 그러나 이와 비슷한 중요 다른 metrics들도 있습니다. * 파싱/컴파일링.. 2021. 3. 3.
5) Typescript - Classes 전통 JS는 재사용 가능한 컴포넌트를 만들기 위한 function과 prototype 기반 상속을 사용하였지만, class가 함수를 상속받고 classe로부터 object가 만들어지는 object-oriented에 익숙한 프로그래머들에게는 약간 어색합니다. ECMAScript 2015(ES6)를 시작으로, JS 프로그래머들은 그들의 앱을 이 객체지향(object-oriented) 접근을 사용하여 그들의 앱을 만들 수 있게 되었습니다. TS에서는, JS로 컴파일해서 모든 주요 브라우저와 플랫폼에서 사용할 수 있는 개발자들에게 이 기술을 사용하도록해주었고, JS의 다음버전을 기다릴 필요가 없도록 해주었습니다. Classes class Greeter { greeting: string; constructor (.. 2021. 2. 8.
4) Typescript - LiteralTypes 리터럴은 집합적인 타입의 구체적인 서브 타입입니다. 이는 타입 시스템 내부에서 "Hello World"는 string이지만, string은 "Hello World"가 아닌것을 의미합니다. TS에는 strings, numbers, booleans 세 가지의 리터럴 타입이 있습니다. 리터럴 타입을 이용하여 여러분은 정확한 string, number, boolean 값을 가지도록 정확한 값을 할당 할 수 있습니다. String Literal Types string 리터럴 타입은 type, type guard, type alias와 잘 조합됩니다. 여러분은 이 특징을 enum 같은 방식으로 string과 함께 사용할 수 있습니다. type Easing = 'ease-in' | 'ease-out' | 'ease-.. 2021. 2. 8.
2) Typescript - interface Typescript Interface Interface Typescript의 핵심 원리는 그 값이 가지고있는 형태를 중심으로 타입 체크를 한다는 것입니다. 이것은 "duck typing" 이나 "structural subtyping" 이라고 불리웁니다. interface는 이 타입들의 역할을 채우며, 여러분의 코드를 정의하는 강력한 방법입니다. function printing (obj: { label: string }) { console.log(obj.label) } let myObj1 = { size: 10, label: "Size 10 Object" } let myObj2 = { size: 10 } printing(myObj1) printing(myObj2) // Property 'label&.. 2021. 1. 25.
1) Typescript 기본 타입 사용법 및 정리 Typescript 기본 타입 사용법 및 정리 Boolean let boolType: boolean = false Number let decimal: number = 6 let hex: number = 0xf00d let binary: number = 0b1010 let octal: number = 0o744 let big: bigint = 100n String let color: string = 'blue' color = 'red' Array let list_1: number[] = [1, 2, 3] let list_2: Array = [1, 2, 3] Tuple let x: [string, number] // declare tubple type x = ['hello', 10] // Ok x = [10.. 2021. 1. 22.
ECMAScript 2020 - ES11 목차 ECMAScript는 무엇인가요? BigInt import() Promise.allSettled() globalThis Nullish 통합 연산자 ?? 선택적 체이닝 연산자 ?. 1. ECMAScript는 무엇인가요? - What is ECMAScript 자바스크립트는 ECMAScript 사양에 기반한 프로그래밍 언어입니다. ActionScript나 Javascript, JSccript, TypeScript는 모두 ECMAScript를 핵심으로 사용합니다. 비교하자면, AS/JS/JScript/TS는 4개의 다른 자동차지만 각각의 외형도 다르고 특징을 가지기 위해 수정되더라도, 같은 엔진을 사용하는 것입니다. ECMAScript 의 역사 - History of ECMAScript Brendan Ei.. 2021. 1. 8.
P_브라우저 객체 모델 BOM 브라우저 객체모델(BOM)은 웹에서 사용하는 자바스크립트의 핵심입니다. BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체 입니다. 제대로된 명세가 없는 기간이 길었기 때문에 브라우저 제조사들은 각 회사가 원하는 대로 BOM을 확장했고, 이는 문제를 많이 발생시켰습니다. 브라우저 사이의 공통점이 사실상의 표준이 되었고, 브라우저 개발 목적은 거의 상호작용성에 집중 되었습니다. Window 객체 BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있습니다. window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고 다른 한편으로는 ECMAScript global 객체로 기능합니다. 따라서 웹 페이지에서 정의한 모든 객체, 변수, 함수에서 window 가 global.. 2020. 10. 6.
Javascript Function - 함수 표현식 재귀 재귀함수는 일반적으로 함수가 자기자신을 이름으로 호출하는 형태입니다. function factorial (num) { if (num val2) return 1 else return 0 } } 이 예제는 내부함수 (B scope)이면서 외부 함수(A scope)의 변수(prop) 에 접근합니다. 내부 함수의 scope 체인에 comparison 함수의 스코프가 포함되기 때문에 내부 함수(b)가 반환되어 다른 컨텍스트에서 실행되는 동안에도 prop 에 접근할 수 있습니다. 스코프 체인에 대해서 여기에서 설명했습니다 >> 다른 함수의 내부에 존재하는 함수는, 외부 함수의 활성화 객체 (내부에서 사용하는 매개변수 - arguments 또는 이름 붙은 매개변수) 를 자신의 스코프 체인에 추가하여 자기 자신의.. 2020. 9. 23.
Javascript의 프로토타입 프로토타입 이란? 모든 객체(함수 포함)는 prototype 프로퍼티를 가집니다. 이 프로퍼티는 참조 타입의 인스턴스가 가지고 있는 모든 프로퍼티와 메서드들을 가지고있는 객체입니다. prototype 의 프로퍼티와 메서드는 객체 인스턴스 전체에서 공유된다는 점이 프로토타입의 장점입니다. 자바스크립트 객체는, 생성과 동시에 프로퍼티에 null 이 아닌 값이 할당됩니다. prototype 프로퍼티의 값은 다음과 같이 직접적으로 할당 할 수 있습니다. function Person () { } Person.prototype.name = "JJD" Person.prototype.sayName = function () { console.log(this.name) } const p1 = new Person() con.. 2020. 9. 3.
Javascript의 this this 에 대하여 Javascript에서 this 키워드는 this 가 속해있는 object를 참조합니다. 어디에서 사용되느냐에 따라 this 가 가리키는 값에 차이가 있습니다. 1. Object method 내부 this const person = { firstName: "JJ", lastName: "D", fullName: function => { return this.firstName + " " + this.lastName; } } person.fullName(); // "JJ D" Object의 method 에서 this 는 소유자 객체(owner object)를 참조합니다. 예제에서 this는, fullName Function 을 "소유한" person Object입니다. 다른말로 하면 thi.. 2020. 8. 19.
Javascript Function - Function 타입 Function 타입 ECMAScript에서 함수는 사실 객체입니다. 모든 함수는 Function 타입에 대한 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티/메서드가 있습니다 함수를 정의하는 방법 function sum (num1, num2) { return num1 + num2; } 함수 선언 방식 함수 선언 호이스팅 과정으로 인하여 함수 선언부를 다른 코드를 실행하기전에 먼저 읽고 모든 실행 컨텍스트에서 접근하고 실행할 수 있습니다. ** 함수 선언 호이스팅(hoisting) JS 엔진은 코드를 평가할 때 제일 먼저 함수 선언을 찾은 다음 이들을 맨 위로 올립니다. 함수가 선언된 부분이 함수가 실행되는 부분보다 뒤에 있을 경우에도 JS 엔진이 함수 선언을 '끌어올립니다 hoist'. const s.. 2020. 8. 3.

티스토리툴바