자바스크립트 메모리 구조를 모른다면, 이전 글을 먼저 읽고 와주세요! https://jaenny-dev.tistory.com/13 V8 엔진이 사용하는 가비지 컬렉터는 generational GC의 일종으로, 객체의 나이를 기준으로 힙 영역을 여러 하위 영역으로 세분화하여 가비지 컬렉션을 수행합니다. V8 엔진이 수행하는 가비지 컬렉션에는 크게 두 단계가 존재합니다. Minor GC(Scavenger)Minor GC는 New space 영역에 존재하는 새로 생긴 객체들을 가비지 컬렉트합니다.New space 영역에선 '할당 포인터'를 사용하여 새로운 객체를 위한 메모리 영역을 할당하는데, 객체가 새로 할당될 때마다 포인터 값이 증가하다가 New space 영역 끝에 다다르면 Minor GC가 수행됩니다...
자바스크립트 V8 엔진의 메모리 구조 V8 엔진에서 메모리는 크게 스택(Stack)과 힙(Heap)으로 구성됩니다. 스택(Stack) : 원시 타입 변수, 함수 인자, 객체를 가리키는 포인터 등이 저장되는 공간입니다. 힙(Heap) : 객체 타입과 같이 동적인 데이터를 저장하는 공간입니다. 아래 영역들로 세분화 됩니다. New space : Young generation 이라고도 하는 이 영역은 짧은 생명 주기(short- lived) 를 가지는 새로 생성된 객체가 저장되는 공간입니다. 두 개의 semi-space가 있으며, Scavenger(Minor GC) 가 이 영역을 관리합니다. Old space: Old generation 이라고도 하는 이 영역은 New space에서 두 번의 Minor GC가..
문제 배열을 받아, 배열을 평탄화하여 반환하시오. 예제: type flatten = Flatten // [1, 2, 3, 4, 5] 풀이 제네릭 타입으로 배열을 받아야 하니 T extends any[]로 배열만 받도록 제한해 줍니다. infer와 spread를 사용해서 T 배열의 첫 원소를 First로 가져옵니다. 만약 빈 배열이라면 First로 가져올 수 없으니 바로 T를 리턴해줍니다. 그런데 지금 구현하려는 Flatten은 1 depth만 평탄화하는 것이 아니고, 모든 배열을 평탄화해야 합니다. 따라서 재귀로 구현해 줄 것입니다. First가 배열이 아니여서, 더 이상 평탄화가 필요없는 경우부터 생각해줍니다. First가 배열이 아니라면, 리턴하려는 배열의 첫 번째 자리에 두고, 나머지 원소들을 확인..
원문 : https://www.devjobsscanner.com/blog/the-most-demanded-frontend-frameworks-in-2022/ 이 기사에서는 어떤 프론트엔드 프레임워크가 가장 많이 사용되었고, 일자리가 많았는지 보여줄 것입니다. DevJobsScanner는 2021년 10월 1일부터 2022년 11월 31일까지 13개월간 약 65만 개의 프론트엔드 일자리를 조사했습니다. 모든 일자리는 Linkedin, Classdorr, RemoteOk, Dice 등 믿음직한 곳으로부터 수집된 것입니다. 가장 많이 사용된 프론트엔드 프레임워크는 무엇인가요? 14개월간 65만개의 FE 일자리를 조사한 후, 약 35.5만 개의 일자리 제안이 있는 React가 가장 많이 사용되는 프론트엔드 프레..
문제 인자로 T와 K 두 개를 받는 제네릭 타입 RequiredByKeys을 구현하세요. K는 T의 프로퍼티들로 필수 타입이 되어야 합니다. K가 전달되지 않는다면, Required와 동일하게 T의 모든 프로퍼티들을 필수로 만들어야 합니다. 예시: interface User { name?: string age?: number address?: string } type UserRequiredName = RequiredByKeys // { name: string; age?: number; address?: string } 풀이 먼저 error 케이스부터 처리해줍니다. K에는 T의 프로퍼티들만 전달되어야 합니다. 따라서 K extends keyof T 로 K의 값을 제한해줍니다. K로 인자가 전달되면 K를 필..
문제 T의 모든 프로퍼티를 readonly로 바꾸는 내장 제네릭 Readonly를 직접 구현하세요. 예시: interface Todo { title: string description: string } const todo: MyReadonly = { title: "Hey", description: "foobar" } todo.title = "Hello" // Error: cannot reassign a readonly property todo.description = "barFoo" // Error: cannot reassign a readonly property 풀이 type MyReadonly = { readonly [key in keyof T]: T[key]; }; readonly readonly는..
문제 제네릭 T에서 프로퍼티 K만 선택해 새로운 객체 타입을 반환하는 내장 제네릭 Pick를 구현해보세요. 예시: interface Todo { title: string description: string completed: boolean } type TodoPreview = MyPick const todo: TodoPreview = { title: 'Clean room', completed: false, } 풀이 먼저 error 케이스를 처리해 줍니다. 제네릭 K에는 객체 타입 T의 프로퍼티들만 전달되어야 합니다. 유효하지 않은 키가 들어온다면 error를 반환합니다. keyof를 사용하여 객체 타입 T의 프로퍼티들만 뽑아옵니다. 정답 type MyPick = { [key in K]: T[key]; }..
문제 JavaScript의 Array.includes 함수를 타입 시스템에서 구현하세요. 배열과 인자를 받아서 인자가 배열에 속해있다면 true를, 속해있지 않다면 false를 반환해야 합니다. 예시: type isPillarMen = Includes // expected to be `false` 풀이 type Includes = T extends [infer K, ...infer R] ? Equal extends true ? true : Includes : false; T extends [infer K, ...infer R] 배열 안에서 spread operator를 사용해서 배열 내부의 원소에 접근합니다. 배열의 첫 원소를 infer K로 변수 선언 해줍니다. Equal extends true 첫 원..
문제 Promise와 같은 타입에 감싸진 타입이 있을 때, Promise 내부에 감싸진 타입이 무엇인지 어떻게 알 수 있을까요? 예를 들어, Promise이 있을 때 ExampleType을 어떻게 얻을 수 있을까요? type ExampleType = Promise type Result = MyAwaited // string 풀이 먼저 error를 내야하는 케이스를 고려해줍니다. 제네릭 타입으로는 Promise에 감싸진 타입 혹은, then을 메서드로 가지는 Promise와 같은 타입을 받아야 합니다. 이 경우가 아니라면 error를 내도록 Promise를 extends하도록 제네릭 T를 제한해줍니다. 그 다음 Promise 내부의 타입에 접근합니다. infer를 사용해줍니다. 먼저 T extends Pr..
타입스크립트에는 -Like 타입이 있다. Array와 ArrayLike, Promise와 PromiseLike -Like postFix가 붙여진 타입이 왜 필요한지 알아보자. Array vs. ArrayLike Array lib.es2015.core.ts 파일에서는 Array 타입을 다음과 같이 정의하고 있다. 자주 사용하는 find, fill 등의 메소드도 찾아볼 수 있다. interface Array { /** * Returns the value of the first element in the array where predicate is true, and undefined * otherwise. * @param predicate find calls predicate once for each elem..