삶도 재입학이 되나요? - mysetting

3:26 5/30

velog.io

mobile screenshot relative

3:26

velog.io

mobile screenshot

삶도 재입학이 되나요?
https://velog.io/@dongha1992

글과 코드와 사람에 관해 생각합니다.

저작도구: velog

최종 피드 수집: 2025-05-07 07:46

전체 (137)

16d

Total Typescript - generic challenge

제네릭 마지막 문제...
translations라는 데이터가 있다.
이 데이터는 translate 라는 함수를 통해 변환된다. translate는 무엇인가
키 인덱싱으로 translations 의 밸류를 가져오는데, 여기서 봐야

000

18d

Total Typescript - function overload

1. use-data-hook
useData라는 데이터 페칭 함수가 있다.
getData를 반환하여 페칭한 값을 가져오는데
inititalData를 넘긴 경우는 초기값이 있는데도 inititalData가 옵셔널이기 때문에 nu

000

19d

Total Typescript - advanced generic

1. currying
마지막 인자가 호출되어야 실행되는 커리함수가 있다. 커리함수의 타입은 어떻게 지정해야할까?
지금은 t를 제외한 나머지 인자들은 unknown으로 추론되고 있다. 한번 수정해보자.
generic attached

000

21d

Epic React - Suspense Image

Suspense Image
이런 경우를 생각해보자.
상단의 버튼으로 배 이름을 클릭할 때마다 새로운 데이터를 가져온다.
Suspese되어 있는 ShipDetails 컴포넌트에서 직접 호출하고
getShip은 캐시의 역할을 하

000

22d

Total Typescript - advanced type transformation

1. string to object
자바스크립트에서 쿼리 스트링을 쿼리 파라미터로 만드는 것처럼 타입스크립트로 string을 obeject로 변환이 가능하다.
몇 시간 도전했지만 실패한 그 문제를 함께 알아보자
문제
흔히 볼 수

001

23d

Total Typescript - key mapping

1. never in key mapping
말그대로 OnlyIdKeys id 관련 키만 추출하는 타입을 작성해본다 가정하자.
이렇게 키를 순회하는 타입의 기본적인 형태로 일단 만든다.
이제 여기서 id와 관련된 키만 추출해야한다.

002

23d

Total Typescript - infer

1. infer basic
infer는 타입스크립트의 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입을 추론할 수 있는 기능을 가진다.
평소에 infer만 보면 쫄았는데, infer가 무엇인지 확실히 알아

001

24d

Epic React - Optimistic UI

1. Optimistic UI
react 19에 useOptimistic 훅이 추가되었다. use도 그렇고 react가 점점 생태계를 넓히려는 것 같다. 아무튼 새로운 기능이 추가되었으니까 무엇인지 살펴보자
예제
아주 귀엽고 간단

001

25d

Total Typescript - as

1. as with props
as라는 props를 받아 동적인 태그를 반환하는 Wrapper가 있다.
as에 따라서 props를 체킹해주고,
존재하는 attribute를 추론해주게 하고 싶다.
이런 비슷한 타입일 것이다.

001

26d

Total Typescript - HOC

1. HOC
코드
리액트에서 자주 사용되는 HOC 패턴의 타입을 지정해보자!
여기 WrappedComponent가 있다. WrappedComponent는UnwrappedComponent와 withRouter의 컴포지션이다.
Unw

002

26d

Total Typescript - HOC

1. HOC
코드
리액트에서 자주 사용되는 HOC 패턴의 타입을 지정해보자!
여기 WrappedComponent가 있다. WrappedComponent는UnwrappedComponent와 withRouter의 컴포지션이다.
Unw

002

27d

Total Typescript - Advanced pattern (1)

1. Lazy load type pattern
흔히 볼 수 있는 컴포넌트를 lazy loading 하는 컴포넌트다.
여기서 fake-external-component라는 컴포넌트를 로드할 건데, fake-external-comp

000

27d

Total Typescript - Exploring HTML Attribute

<div />가 있다.
div 태그에 href라는 attribute를 주면 어떻게 될까?
당연히 속하지 않은 타입이라고 컴파일 에러가 나온다.
그렇다면 도대체 리액트(혹은 타입스크립트)는 div에 href가 없다는 것을 어떻게

001

28d

Total Typescript - JSX.Element

1. React.JSX
리액트 엘리먼트의 타입을 지정할 때 자주 쓰이는 3가지 타입이다.
아래 타입들 쓸 때마다 헷갈렸는데(ReactNode가 다 포함해서 ReactNode를 썼다) 3가지 타입에 대해 알아보자
먼저 JSX.El

000

29d

Total Typescript - hooks

useMutation
아래와 같은 useMutataion 훅을 구현한다고 가정하자.
useMutataion 은 mutate와 isLoading을 return하고 mutate는 비동기적으로 opts.mutation을 호출하여 결과

000

29d

Total Typescript - generic

1. type helper
Input이 있다. 이 Input은 uncontrolled 와 controlled를 동시에 수행해야 한다.
그래서 위와 같이 InputProps를 작성한다. 필수 타입으로 label이 있고, value

000

1M

Total Typescript - props

prop groups with satisfies
buttonPropsMap은 버튼 커스텀 타입의 key와 네이티브 버튼 props을 속성값으로 갖는 객체다.
위와 같이 사용하기 위해 ButtonProps을 만들어 준다.
var

000

1M

Total Typescript - mapped & generic

1. mapped type
특정 키를 담은Attributes 인터페이스를 활용하여 AttributeGetters를 완성하여 아래 테스트를 만족해야 한다.
가장 먼저 생각할 수 있는 것은 Record다.
하지만 age가 numb

000

1M

Total Typescript - callback

1. excess properties in function
users를 맵핑한다고 가정하자. 아래와같이 age라는 새로운 키값을 추가했지만 타입스크립트는 에러를 뱉지 않는다.
타입스크립트는 객체 타입에 대하여 excess pro

000

1M

Total Typescript - deriving types from values & satisfies operator

1. parameters type helper
위와 서드파티 라이브러리 함수의 인자 타입이 필요하다고 가정하자 (더 복잡한 인자와 타입을 가질 수도 있다)
가장 쉬운 방법으로는 아래처럼 튜플 형식으로 타입을 정의하는 것이다.
하지

000