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

3:26 5/30

velog.io

mobile screenshot relative

3:26

velog.io

mobile screenshot

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

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

저작도구: velog

최종 피드 수집: 2025-06-04 10:46

전체 (143)

21d

Epic React - React Server Component (5)

Server Actions에 대해
이제 드디어 RSC의 마지막 파트다.
지금까지 우리는 RSC를 통해 서버에서 컴포넌트를 렌더링하는 방식, use Client로 클라이언트 컴포넌트를 참조로 렌더링 하는 방식 그리고 클라이언트 사

000

23d

Epic React - React Server Component (4)

Client Router에 대해
1. Client Router
이제 서버 컴포넌트와 클라이언트 컴포넌트를 모두 사용할 수 있는 그럴듯한 앱이 되었다. 하지만 잊으면 안 된다. 이 앱은 아주 원시적인 앱이라는 것을.
목록에서 아이템

000

25d

Epic React - React Server Component (3)

Client Component 에 대해
사실 지금부터가 진짜다!!
앞선 1, 2편에서의 서버 컴포넌트의 개념은 지난 수년 간 지속적으로 등장했던 것들이다.
하지만, RSC의 클라이언트 컴포넌트는 조금 새로운 개념이다. 단순한

000

26d

Epic React - React Server Component (2)

Server Component 에 대해
1편에서 RSC에 대해 대략적으로 살펴봤다면, 다음으로 Server Component에 대해 알아보자.
1. Async Components
이제, RSC가 서버에서 실행되므로, 각 컴포넌트

000

28d

Epic React - React Server Component (1)

RSC에 대해
1. 그전에 먼저 CSR
React Server Component에 대해 탐구해보기 전에 워밍업으로 CSR를 다시 짚고 넘어가야 한다. 그것도 아주 전통적인 방식의 CSR를 통해 전통 CSR에서 현대 모던 짱짱 CS

000

28d

Epic React - React Server Component

RSC에 대해
1. 그전에 먼저 CSR
React Server Component에 대해 탐구해보기 전에 워밍업으로 CSR를 다시 짚고 넘어가야 한다. 그것도 아주 전통적인 방식의 CSR를 통해 전통 CSR에서 현대 모던 짱짱 CS

000

1M

Total Typescript - generic challenge

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

001

1M

Total Typescript - function overload

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

000

1M

Total Typescript - advanced generic

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

001

1M

Epic React - Suspense Image

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

000

1M

Total Typescript - advanced type transformation

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

001

1M

Total Typescript - key mapping

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

002

1M

Total Typescript - infer

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

001

1M

Epic React - Optimistic UI

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

001

1M

Total Typescript - as

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

002

1M

Total Typescript - HOC

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

003

1M

Total Typescript - HOC

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

002

1M

Total Typescript - Advanced pattern (1)

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

001

1M

Total Typescript - Exploring HTML Attribute

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

001

2M

Total Typescript - JSX.Element

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

001