jopemachine. dev blog

개발 관련 개인적인 일상, 후기, 생각, 스터디, 문서 번역 등 각종 포스팅을 정리하고 공부하고, 공유합니다.

(Typescript) unknown 타입을 이용한 에러 핸들링

Typescript

Typescript unknown 타입을 이용한 에러 핸들링 try-catch 문의 catch 문에서 잡힌 에러는 사실 스트링 타입일 수도 있음. 1 2 3 4 5 6 7 8 function somethingRisky() {} try { somethingRisky(); } catch (err) { // Bad console.e...

Posted by jopemachine on November 28, 2021

(Typescript) type vs interface

Typescript

type vs interface type을 써야할 때 프리미티브 타입의 별칭을 만드는 경우 1 2 3 4 5 // type과 interface의 가장 눈에 보이는 차이는, type은 프리미티브 타입 aliasing이 가능하다는 것. // 아래와 같은 별칭 선언은 interface로 할 수 없다. type Nullish = null | un...

Posted by jopemachine on November 28, 2021

Hot Observable vs Cold Observable

Async Programming

Hot Observable vs Cold Observable Hot Observabel 구독하는 타이밍에 따라 받아볼 수 있는 데이터가 달라짐. 예를 들어, 브라우저의 onClick 핸들러 같은 걸 7초 이후에 구독한다고 하면, 그 때 까지의 유저의 클릭들을 다 놓치게 된다. 그러니 상식적으로 UI의 핸들러들은 생성...

Posted by jopemachine on November 28, 2021

Code Formatter vs Linter

Programming

Code formatter vs Linter Code formatter: tab, space와 같은 옵션을 통일함 Code linter: var 대신 let/const를 쓰게 하는 등 베스트 프랙티스를 가이드함. Linter를 formatter로 쓰는 것 린터와 포맷터의 작업은 겹치는 부분도 있음. 예...

Posted by jopemachine on November 26, 2021

WeakMap의 사용처

자바스크립트 세부사항 스터디

WeakMap의 사용처 WeakMap이란 키가 약하게 참조되는 키/쌍의 컬렉션이다. 이걸 어디에 쓰냐? 키가 가비지 컬렉션 되지 않았을 때만 의미 있는 정보를 저장할 때 (키가 가비지 컬렉팅 되면 자동으로 맵에서 제거) 쓴다. 그런 상황이 어디인가? => 예를 들어 이런 캐싱 라이브러리 (mem...

Posted by jopemachine on November 24, 2021

React.FC를 기피해야 하는 이유

Typescript

React.FC를 기피해야 하는 이유 1 2 3 4 5 type MyComponentProps = { title: string }; // 👍 Like this.. function MyComponentFC(props: MyComponentProps) {} // 👎 ...not like this const MyComponent: React.FC<M...

Posted by jopemachine on November 23, 2021

Core Web Vitals

Frontend 최적화

Core Web Vitals Web vital은 웹에서 우수한 사용자 경험을 제공하기 위한 지표로, 웹에 있는 대부분의 사이트의 성능 특성을 전반적으로 측정 가능하다. 하나의 메트릭 만으론 모든 성능 지표를 나타낼 수 없기 때문에 여러 가지 측정 지표를 만들어 사용한다. 실제로 사용자의 입력을 받아야...

Posted by jopemachine on November 21, 2021

Cumulative Layout Shift

Frontend 최적화

Cumulative Layout Shift Cumulative Layout Shift (CLS)는 Lighthouse v8 기준 가중치 15%로 꽤 높은 가중치를 차지하고 있다. 실제로 사용자가 대기 시간에 다른 요소를 클릭하게 됨으로써 예기치 못한 불편을 초래할 수 있다. 레이아웃 쉬프트를 제거하려...

Posted by jopemachine on November 21, 2021

Typescript 4.5의 새 기능

Typescript

Typescript 4.5의 새 기능 Typescript 4.5에서 추가된 기능들을 공부하며 정리해보았다. (모든 추가 사항을 정리한 것은 아님.) 새 유틸리티 타입, Awaited 1 2 3 4 5 6 7 8 // A = string type A = Awaited<Promise<string>>; // B = num...

Posted by jopemachine on November 19, 2021

PromiseLike, ArrayLike 같은 타입들을 쓰는 이유

Typescipt

PromiseLike, ArrayLike 같은 타입들을 쓰는 이유 Like가 붙는 타입들은 더 느슨한 선언을 가진다. 예를 들어, Array의 경우, 아래의 모든 메서드, 프로퍼티를 가지지 않으면 Array 타입이 아니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 interface...

Posted by jopemachine on November 19, 2021

FEATURED TAGS
Git Frontend Javascript Translation Typescript Browser Frontend Optimization Linux Programming React Redux HTML CSS Web Programming Backend Flux Http Node OSSCA Review Security
ABOUT ME

다양한 CS 분야에 관심을 갖고 공부하는 주니어 개발자입니다.