본문 바로가기

Front-End13

[React] useEvent is not dead! Github에서 관련 코드를 확인할 수 있으며, 배포 URL은 아래 링크와 같습니다. Github : https://github.com/mugglim/use-event-hook 배포 URL : https://use-event-hook.vercel.app/ 프롤로그 프론트엔드 뉴스레터를 살펴보던 중 useEvent RFC가 중단되었다는 소식을 확인 (관련 트윗 링크 : https://twitter.com/t3dotgg/status/1574913828613021697) 정말로 useEvent 개발은 끝난걸까요? useEvent useEvent는 함수를 메모제이션 하기 위한 훅입니다. useEvent로 생성된 함수는 재생성되지 않고, 항상 동일한 참조값을 가집니다. useCallback과 유사하게, 함수를 메.. 2022. 11. 6.
[JavaScript] 호이스팅(Hosting) 호이스팅 호이스팅은 변수의 선언부와 함수의 선언문이 스코프의 최상단으로 끌어 올려지는 현상을 의미합니다. 스코프는 변수의 유효범위를 의미하며, 변수 선언 방식에 따라 다른 스코프를 가집니다. var은 function 스코프, let과 const는 block 스코프를 가지게 됩니다. // (1) scope of x var x; { // scope of y let y; { // scope of z let z; } } 변수의 생성 과정 변수의 생성 과정은 선언 -> 초기화 -> 할당으로 3단계를 거칩니다. 위에서 살펴본 호이스팅은 변수의 선언 단계에 해당합니다. 단, var은 호이스팅 중 undefined로 초기화가 동시에 발생합니다. let과 const는 선언만 발생합니다. TDZ(Temporal Dead .. 2022. 7. 16.
[TypeScript] "T extends U ? X : Y"에 대한 고찰 TL;DR 타입은 가능한 값의 집합이다. 서브 타입과 슈퍼 타입을 집합의 관계로 설명할 수 있다. 조건부 타입은 분배법칙을 허용한다. 타입은 집합 타입은 가능한 값의 집합이다. 타입은 가능한 값의 집합? 직관적으로 한 번에 이해가 잘 되지 않는다. 예시를 통해 타입과 집합 관계를 이해해보자. never 타입은 어떠한 값도 할당할 수 없는 타입이다. 어떠한 값도 할당할 수 없기 때문에 공집합이라고 말할 수 있으며, never = {}라고 표기할 수 있다. 예를 하나 더 들어보자. number 타입에는 정수, 소수를 할당할 수 있다. 그러면 number = {정수, 소수}라고 표기할 수 있다. 서브타입과 슈퍼 타입 집합 A가 집합 B의 부분 집합이면 A ⊂ B라고 표기할 수 있다. 두 집합이 서로 같을 때에.. 2022. 6. 7.
[JavaScript] 정말 Promise.all()은 병렬로 실행될까? 병렬성과 트랜잭션 동시성(Concurrency)과 병렬성(Parallelism) 프로그래밍을 공부하다 보면 동시성과 병렬성이란 용어를 듣게 된다. 두 용어 모두 멀티 태스크를 처리하는 방법이다. 우선 동시성을 알아보자. CPU는 한 시점에 하나의 태스크 밖에 처리하지 못한다. 만약 CPU가 하나 인데 여러 태스크를 처리해야 한다면, 태스크를 번갈아가면서 실행시켜야 한다. 이를 동시성이라고 말할 수 있다. 운영체제에서의 컨텍스트 스위칭을 생각해보자. 병럴성은 CPU가 2개 이상인 경우에 사용되는 개념이다. CPU가 여러개 이다 보니, 한 시점에서 여러 태스트를 처리할 수 있다. (동시성과 병렬성을 더 자세히 알고 싶다면, Deview2021 심흥운님의 세션을 들어보면 좋을 것 같다.) 트랜잭션(Transa.. 2022. 6. 1.
[TypeScript] any vs unknown TL;DR any는 모든 타입에 할당될 수 있으며, unknown은 unknown, any 타입에만 할당될 수 있다. any는 속성에 접근이 가능하며, unknown은 불가하다. any, unknown 모두 다른 타입과 연산을 허용하며, unknown은 비교 연산, 논리 연산, typeof, instanceof 연산만 허용한다. unknown은 추론된 타입이 아닌, 개발자가 직접 명시한 타입이다. (타입 시스템이 추론하지 못한 값은 any가 최대) 1. 할당 관점 let anyVal: any; let unknownVal: unknown; let numVal: number; let strVal: string; numVal = anyVal; numVal = unknownVal; // Error: Type '.. 2022. 6. 1.
[TypeScript] type vs interface (차이점을 중심으로) TL;DR 상속 시, type은 동일한 속성의 값 타입을 오버로딩 하며 interface는 서브 타입 관계를 확인한다. type은 모든 타입으로 확장 할 수 있으며, interface는 object 형태의 타입만 상속받을 수 있다. (class, interface, typeof object) type은 선언 병합을 허용하지 않으며, interface는 선언 병합을 허용한다. (단, interface에서 선언 병합 시 동일한 속성이 있다면, 반드시 값 타입이 같아야 한다.) 용어 A >: B : A는 B의 슈퍼타입이다. (= B는 A의 서브타입이다.) 1. 상속 시 동일한 속성이 존재하는 경우 type은 상속 시, 동일한 프로퍼티에 대해 오버로딩한다. interface는 상속 시, 부모 interface의.. 2022. 5. 31.