영상 자료실 (Video Library)

전문가들의 라이브 코딩 영상 클립(자막) 편집본들이 모여있어요. 짧게는 1분, 길게는 10여분 짜리 영상들이니 영상에 따라 적절히 배속 재생을 하며 시청하시길 권장드려요.

각 영상별로 달려 있는 태그들은 훈련 내용, 포커스 해서 보면 좋을 만한 내용들을 미리 추려둔 내용이니 훈련에 참고해주세요.

(만약 영상 내용에 대한 토론이나 논의가 필요하다면 #training-random 채널에서 편하게 이야기 나눠봐요!)

훈련 간 유의하실 점은 단순히 감상하는 게 아니라 관찰자의 마음으로 능동적으로 독해하는 태도를 가지는지 여부입니다. 영상에는 전문가의 암묵지가 담겨 있어 유용할 수 있지만. 한편 포커스를 제대로 맞추지 못하고 지엽적인 부분에 빠지게 될 수도 있습니다. (ex. ‘저 코드 별로네, 나같으면 이렇게 했을텐데’ 에 시선을 빼앗겨 다른 관찰 포인트를 놓침)

아래와 같은 질문들을 던지며 시청하시길 권장드립니다.

•

왜 저런 판단을 했을까? 무얼 보았길래 이 시점에 저런 생각을 한걸까? 무엇과 무엇의 트레이드 오프 사이에서 고민하는 걸까?

•

나도 실전에서 동일한 판단으로 빠르게 적용할 수 있을까? 내 몸에도 익히려면 평소에 어떤 훈련을 어떻게 해야 할까?

•

나는 이런 부분을 흥미롭게 보았는데 다른 사람들은 같은 영상에서 무엇을 보았을까? 왜 그런 차이가 발생하는걸까?

•

…

Table

영상 자료실

Required

Group

영상 제목

Phase

FoM

태그

필수

1

쿼리스트링 다루는 커스텀 훅 인터페이스가 고민된다면?

Red-Green

Group By Purpose (Keep it Soft)

Stand Alone (Keep it Soft)

Build on Patterns

인터페이스

관심사의 분리

필수

2

이전 달, 다음 달로 이동하는 기능이 담긴 컴포넌트 인터페이스 어떻게 짜는게 좋을까?

Refactor

Act on Signal

No Suprises (Keep it Soft)

Don't Make Me Think (Keep it Soft)

인터페이스

한번에 하나씩

글처럼 읽히는지

관심사의 분리

주석

예측 가능성

2

주의) ErrorBoundary 때문에 컴포넌트 응집이 깨진다?!

Refactor

Group By Purpose (Keep it Soft)

Don't Make Me Think (Keep it Soft)

인터페이스

글처럼 읽히는지

관심사의 분리

필수

2

매번 고민되는 금액 계산, 옳게 된 구현하기

Refactor

Act on Signal

Don't Make Me Think (Keep it Soft)

글처럼 읽히는지

관심사의 분리

시점이동

이름짓기

필수

2

한 번에 하나씩 할걸 ㅠㅠ

회고

Ship Value First

한번에 하나씩

1

계산해서 넘길까, 넘겨서 계산할까… 컴포넌트의 책임, 어디까지일까?

Red-Green

Group By Purpose (Keep it Soft)

Stand Alone (Keep it Soft)

Ship Value First

Act on Signal

인터페이스

관심사의 분리

필수

1

알았으면 미리 했지… 어떻게 할지 모르겠을 땐 일단 뭉쳐놓기

Red-Green

회고

Ship Value First

하면서 나누기

1

Suspense가 성능을 해친다? + 데이터 호출하는 컴포넌트 네이밍 팁!

Refactor

Group By Purpose (Keep it Soft)

No Suprises (Keep it Soft)

이름짓기

예측 가능성

관심사의 분리

필수

1

커밋 전에는 변경사항 점검하기!

Red-Green

Mark Your Checkpoint

한번에 하나씩

1

function 만원이하버림처리(amount: number) {}

Refactor

Act on Signal

Don't Make Me Think (Keep it Soft)

관심사의 분리

이름짓기

글처럼 읽히는지

필수

3

‘이건 됐어, 그 다음 이거 구현해야 해’ (한 번에 하나씩)

Red-Green

Build on Patterns

한번에 하나씩

3

그룹핑 구현 날먹하기 (feat. groupBy)

Red-Green

Build on Patterns

주석

3

컴포넌트, 일단 복붙해도 괜찮아 (switch-case)

Red-Green

Act on Signal

관심사의 분리

하면서 나누기

필수

3

구현 완료 후 요구사항 더블체크 하기

Red-Green

Mark Your Checkpoint

1

탐정처럼 읽어보는 요구사항 & API 스펙 문서

Red-Green

Act on Signal

Type-Driven Guardrails

필수

4

리팩토링, 지금이니? (아니면 나중이니…?)

회고

Act on Signal

Don't Make Me Think (Keep it Soft)

한번에 하나씩

주석

필수

4

눈 코딩 그만하고 손 코딩으로 훈련하세요

회고

필수

1

useSuspenseQuery → groupBy → switch-case 로 스무스하게 UI 렌더링 하기

Red-Green

Build on Patterns

Type-Driven Guardrails

1

“로직이 더러운데, 결과부터 내고 리팩토링 하겠습니다”

Red-Green

Ship Value First

한번에 하나씩

주석

필수

5

작업 계획 - 데이터 호출 & 상태 설계

Build on Patterns

관심사의 분리

필수

5

상태 관리 - path or query parameter

Red-Green

Build on Patterns

관심사의 분리

필수

5

path parameter 파싱 - schema.parse()

Red-Green

Build on Patterns

Parse Don't Validate

5

Tagged Union (Discriminated Union) + switch

Red-Green

Act on Signal

한번에 하나씩

관심사의 분리

Type-Driven Guardrails

필수

5

날짜 정렬, 그룹핑 로직 구현

Red-Green

Group By Purpose (Keep it Soft)

Build on Patterns

Parse Don't Validate

관심사의 분리

데이터 / 계산 / 액션

필수

5

매번 고민되는 금액 처리하는 계산, 옳게 된 구현하기 2 (음수, 양수)

Refactor

No Suprises (Keep it Soft)

Don't Make Me Think (Keep it Soft)

인터페이스

이름짓기

관심사의 분리

하면서 나누기

5

switch case로 컴포넌트 분기

Red-Green

Act on Signal

관심사의 분리

하면서 나누기

Type-Driven Guardrails

필수

5

출금처 입금처 포매팅 함수 분리

Refactor

Group By Purpose (Keep it Soft)

인터페이스

하면서 나누기

5

달 이동 구현

Red-Green

Group By Purpose (Keep it Soft)

필수

5

구현 후 검토

Refactor

글처럼 읽히는지

이름짓기

5

src/remotes, src/models 분리 기준

Red-Green

Build on Patterns

이름짓기

관심사의 분리

5

loader에서 Promise.all 처리

Refactor

데이터 / 계산 / 액션

필수

5

데이터 → UI 변환용 aggregate 레이어 추가

Red-Green

Build on Patterns

관심사의 분리

하면서 나누기

데이터 / 계산 / 액션

5

for of vs reduce

Red-Green

Act on Signal

예측 가능성

필수

5

금액 포매팅 함수 구현 (만원 단위)

Red-Green

Build on Patterns

Group By Purpose (Keep it Soft)

인터페이스

이름짓기

데이터 / 계산 / 액션

필수

5

복잡한 로직 리팩토링 기준

Refactor

Act on Signal

글처럼 읽히는지

관심사의 분리

6

Red-Green

Ship Value First

Build on Patterns

한번에 하나씩

글처럼 읽히는지

필수

6

페이지 - 컨테이너 분리 패턴

Red-Green

Build on Patterns

Group By Purpose (Keep it Soft)

관심사의 분리

하면서 나누기

필수

6

Red-Green

Build on Patterns

Parse Don't Validate

디버거

6

switch case로 분기 로직 구현 (feat. satisfies never)

Red-Green

Ship Value First

Type-Driven Guardrails

6

Suspense 위치 조정 + 데이터 호출과 소비처 응집

Refactor

회고

Group By Purpose (Keep it Soft)

관심사의 분리

필수

6

이터레이션, 불확실성, 분화

회고

Ship Value First

하면서 나누기

한번에 하나씩

필수

6

Suspense, 쿼리 옵션, Hook 분해 후 재설계

Red-Green

Refactor

Stand Alone (Keep it Soft)

Group By Purpose (Keep it Soft)

Act on Signal

데이터 / 계산 / 액션

관심사의 분리

6

계산 로직 별도로 분리한 이유

Refactor

Act on Signal

Group By Purpose (Keep it Soft)

데이터 / 계산 / 액션

하면서 나누기

관심사의 분리

비즈니스 로직

6

함수 분리 기준, 함수 이름 명확하게 짓기

Refactor

Act on Signal

관심사의 분리

시점이동

이름짓기

하면서 나누기

6

switch-case, IIFE, satisfies never

Red-Green

Ship Value First

Don't Make Me Think (Keep it Soft)

시점이동

Type-Driven Guardrails

필수

6

디버거 사용

Red-Green

Act on Signal

디버거

6

데이터 → UI에 그리기 좋은 형태로 변환, 응집

Red-Green

Group By Purpose (Keep it Soft)

관심사의 분리

시점이동

데이터 / 계산 / 액션

6

함수 한 군데만 바꿔서 요구사항 변경에 대응해주세요

Red-Green

Group By Purpose (Keep it Soft)

비즈니스 로직

6

함수 한 군데만 바꿔서 요구사항 변경에 대응해주세요 2

Red-Green

Group By Purpose (Keep it Soft)

비즈니스 로직

필수

6

그때는 맞고 지금은 틀린 설계, 과감하게 재조립 하기 (feat. queryOptions, Composition)

Refactor

회고

Group By Purpose (Keep it Soft)

Stand Alone (Keep it Soft)

Act on Signal

관심사의 분리

데이터 / 계산 / 액션

7

fetcher 세팅 + 예측 가능성

Red-Green

Ship Value First

Build on Patterns

Group By Purpose (Keep it Soft)

Act on Signal

예측 가능성

필수

7

잘 변하지 않을 것 같은 정책 관련 함수, 어떻게 할까?

Red-Green

Act on Signal

Group By Purpose (Keep it Soft)

No Suprises (Keep it Soft)

관심사의 분리

시점이동

하면서 나누기

데이터 / 계산 / 액션

비즈니스 로직

필수

7

useSuspenseQuery + 케이스 분리

Red-Green

Ship Value First

Act on Signal

Parse Don't Validate

한번에 하나씩

관심사의 분리

하면서 나누기

예측 가능성

7

뮤테이션 훅에 로직 응집

Red-Green

Build on Patterns

Don't Make Me Think (Keep it Soft)

예측 가능성

필수

7

함수 이름 짓기 애매할 때, 당신의 선택은?

Red-Green

Act on Signal

Ship Value First

Don't Make Me Think (Keep it Soft)

글처럼 읽히는지

관심사의 분리

이름짓기

예측 가능성

비즈니스 로직

7

“잡았다, 도메인 로직”

Red-Green

Act on Signal

관심사의 분리

하면서 나누기

비즈니스 로직

7

리듀스 싫어 sum 쓸거야

Red-Green

Build on Patterns

Don't Make Me Think (Keep it Soft)

글처럼 읽히는지

필수

7

함수 이름 짓기 애매하면 분리 안한다 2

Red-Green

Act on Signal

관심사의 분리

이름짓기

예측 가능성

필수

7

중복 발견 후 추출 + useSuspenseQuery

Red-Green

Refactor

Group By Purpose (Keep it Soft)

Act on Signal

Parse Don't Validate

한번에 하나씩

관심사의 분리

필수

7

“입력 받는 인터페이스가 명확해야 할거 같아요”, “예측이 되어야 행복해요”

Refactor

No Suprises (Keep it Soft)

인터페이스

예측 가능성

7

type Status = ‘없음’ | ‘다받음’ | ‘받을거존재’ | ‘아직달성못함’

Refactor

Ship Value First

예측 가능성

Type-Driven Guardrails