Toss(웹공유)
/
Frontend Chapter
/
Toss Frontend Accelerator
/
Acc 3기 학습 자료 모음
/
🏡 Frontend Accelerator - Training Board
/
🎬 영상 자료실 (Video Library)
/
영상 자료실
Search
영상 자료실
Table
Required
Group
영상 제목
Phase
FoM
태그
필수
박문철
박문철TV 1화
Open
Refactor
한번에 하나씩
글처럼 읽히는지
시점이동
필수
박문철
박문철TV 3화
Open
Refactor
인터페이스
한번에 하나씩
글처럼 읽히는지
예측 가능성
1
쿼리스트링 다루는 커스텀 훅 인터페이스가 고민된다면?
Open
Red-Green
Group By Purpose (Keep it Soft)
Stand Alone (Keep it Soft)
Build on Patterns
인터페이스
관심사의 분리
필수
2
이전 달, 다음 달로 이동하는 기능이 담긴 컴포넌트 인터페이스 어떻게 짜는게 좋을까?
Open
Refactor
Act on Signal
No Suprises (Keep it Soft)
Don't Make Me Think (Keep it Soft)
인터페이스
한번에 하나씩
글처럼 읽히는지
관심사의 분리
주석
예측 가능성
2
주의) ErrorBoundary 때문에 컴포넌트 응집이 깨진다?!
Open
Refactor
Group By Purpose (Keep it Soft)
Don't Make Me Think (Keep it Soft)
인터페이스
글처럼 읽히는지
관심사의 분리
필수
2
매번 고민되는 금액 계산, 옳게 된 구현하기
Open
Refactor
Act on Signal
Don't Make Me Think (Keep it Soft)
글처럼 읽히는지
관심사의 분리
시점이동
이름짓기
보류
2
한 번에 하나씩 할걸 ㅠㅠ
Open
회고
Ship Value First
한번에 하나씩
보류
1
계산해서 넘길까, 넘겨서 계산할까… 컴포넌트의 책임, 어디까지일까?
Open
Red-Green
Group By Purpose (Keep it Soft)
Stand Alone (Keep it Soft)
Ship Value First
Act on Signal
인터페이스
관심사의 분리
필수
1
알았으면 미리 했지… 어떻게 할지 모르겠을 땐 일단 뭉쳐놓기
Open
Red-Green
회고
Ship Value First
하면서 나누기
1
Suspense가 성능을 해친다? + 데이터 호출하는 컴포넌트 네이밍 팁!
Open
Refactor
Group By Purpose (Keep it Soft)
No Suprises (Keep it Soft)
이름짓기
예측 가능성
관심사의 분리
필수
1
커밋 전에는 변경사항 점검하기!
Open
Red-Green
Mark Your Checkpoint
한번에 하나씩
1
function 만원이하버림처리(amount: number) {}
Open
Refactor
Act on Signal
Don't Make Me Think (Keep it Soft)
관심사의 분리
이름짓기
글처럼 읽히는지
3
‘이건 됐어, 그 다음 이거 구현해야 해’ (한 번에 하나씩)
Open
Red-Green
Build on Patterns
한번에 하나씩
3
그룹핑 구현 날먹하기 (feat. groupBy)
Open
Red-Green
Build on Patterns
주석
필수
3
컴포넌트, 일단 복붙해도 괜찮아 (switch-case)
Open
Red-Green
Act on Signal
관심사의 분리
하면서 나누기
3
구현 완료 후 요구사항 더블체크 하기
Open
Red-Green
Mark Your Checkpoint
1
탐정처럼 읽어보는 요구사항 & API 스펙 문서
Open
Red-Green
Act on Signal
Type-Driven Guardrails
4
리팩토링, 지금이니? (아니면 나중이니…?)
Open
회고
Act on Signal
Don't Make Me Think (Keep it Soft)
한번에 하나씩
주석
4
눈 코딩 그만하고 손 코딩으로 훈련하세요
Open
회고
필수
1
useSuspenseQuery → groupBy → switch-case 로 스무스하게 UI 렌더링 하기
Open
Red-Green
Build on Patterns
Type-Driven Guardrails
필수
1
“로직이 더러운데, 결과부터 내고 리팩토링 하겠습니다”
Open
Red-Green
Ship Value First
한번에 하나씩
주석
필수
5
작업 계획 - 데이터 호출 & 상태 설계
Open
Build on Patterns
관심사의 분리
필수
5
상태 관리 - path or query parameter
Open
Red-Green
Build on Patterns
관심사의 분리
필수
5
path parameter 파싱 - schema.parse()
Open
Red-Green
Build on Patterns
Parse Don't Validate
5
Tagged Union (Discriminated Union) + switch
Open
Red-Green
Act on Signal
한번에 하나씩
관심사의 분리
Type-Driven Guardrails
5
날짜 정렬, 그룹핑 로직 구현
Open
Red-Green
Group By Purpose (Keep it Soft)
Build on Patterns
Parse Don't Validate
관심사의 분리
데이터 / 계산 / 액션
필수
5
매번 고민되는 금액 처리하는 계산, 옳게 된 구현하기 2 (음수, 양수)
Open
Refactor
No Suprises (Keep it Soft)
Don't Make Me Think (Keep it Soft)
인터페이스
이름짓기
관심사의 분리
하면서 나누기
5
switch case로 컴포넌트 분기
Open
Red-Green
Act on Signal
관심사의 분리
하면서 나누기
Type-Driven Guardrails
5
출금처 입금처 포매팅 함수 분리
Open
Refactor
Group By Purpose (Keep it Soft)
인터페이스
하면서 나누기
필수
5
달 이동 구현
Open
Red-Green
Group By Purpose (Keep it Soft)
5
구현 후 검토
Open
Refactor
글처럼 읽히는지
이름짓기
5
src/remotes, src/models 분리 기준
Open
Red-Green
Build on Patterns
이름짓기
관심사의 분리
5
loader에서 Promise.all 처리
Open
Refactor
데이터 / 계산 / 액션
5
데이터 → UI 변환용 aggregate 레이어 추가
Open
Red-Green
Build on Patterns
관심사의 분리
하면서 나누기
데이터 / 계산 / 액션
5
for of vs reduce
Open
Red-Green
Act on Signal
예측 가능성
필수
5
금액 포매팅 함수 구현 (만원 단위)
Open
Red-Green
Build on Patterns
Group By Purpose (Keep it Soft)
인터페이스
이름짓기
데이터 / 계산 / 액션
5
복잡한 로직 리팩토링 기준
Open
Refactor
Act on Signal
글처럼 읽히는지
관심사의 분리
필수
6
fetcher 등록
Open
Red-Green
Ship Value First
Build on Patterns
한번에 하나씩
글처럼 읽히는지
6
페이지 - 컨테이너 분리 패턴
Open
Red-Green
Build on Patterns
Group By Purpose (Keep it Soft)
관심사의 분리
하면서 나누기
6
날짜 파싱
Open
Red-Green
Build on Patterns
Parse Don't Validate
디버거
6
switch case로 분기 로직 구현 (feat. satisfies never)
Open
Red-Green
Ship Value First
Type-Driven Guardrails
필수
6
Suspense 위치 조정 + 데이터 호출과 소비처 응집
Open
Refactor
회고
Group By Purpose (Keep it Soft)
관심사의 분리
6
이터레이션, 불확실성, 분화
Open
회고
Ship Value First
하면서 나누기
한번에 하나씩
필수
6
Suspense, 쿼리 옵션, Hook 분해 후 재설계
Open
Red-Green
Refactor
Stand Alone (Keep it Soft)
Group By Purpose (Keep it Soft)
Act on Signal
데이터 / 계산 / 액션
관심사의 분리
6
계산 로직 별도로 분리한 이유
Open
Refactor
Act on Signal
Group By Purpose (Keep it Soft)
데이터 / 계산 / 액션
하면서 나누기
관심사의 분리
비즈니스 로직
6
함수 분리 기준, 함수 이름 명확하게 짓기
Open
Refactor
Act on Signal
관심사의 분리
시점이동
이름짓기
하면서 나누기
필수
6
switch-case, IIFE, satisfies never
Open
Red-Green
Ship Value First
Don't Make Me Think (Keep it Soft)
시점이동
Type-Driven Guardrails
필수
6
디버거 사용
Open
Red-Green
Act on Signal
디버거
6
데이터 → UI에 그리기 좋은 형태로 변환, 응집
Open
Red-Green
Group By Purpose (Keep it Soft)
관심사의 분리
시점이동
데이터 / 계산 / 액션
6
함수 한 군데만 바꿔서 요구사항 변경에 대응해주세요
Open
Red-Green
Group By Purpose (Keep it Soft)
비즈니스 로직
6
함수 한 군데만 바꿔서 요구사항 변경에 대응해주세요 2
Open
Red-Green
Group By Purpose (Keep it Soft)
비즈니스 로직
필수
6
그때는 맞고 지금은 틀린 설계, 과감하게 재조립 하기 (feat. queryOptions, Composition)
Open
Refactor
회고
Group By Purpose (Keep it Soft)
Stand Alone (Keep it Soft)
Act on Signal
관심사의 분리
데이터 / 계산 / 액션
7
fetcher 세팅 + 예측 가능성
Open
Red-Green
Ship Value First
Build on Patterns
Group By Purpose (Keep it Soft)
Act on Signal
예측 가능성
7
잘 변하지 않을 것 같은 정책 관련 함수, 어떻게 할까?
Open
Red-Green
Act on Signal
Group By Purpose (Keep it Soft)
No Suprises (Keep it Soft)
관심사의 분리
시점이동
하면서 나누기
데이터 / 계산 / 액션
비즈니스 로직
7
useSuspenseQuery + 케이스 분리
Open
Red-Green
Ship Value First
Act on Signal
Parse Don't Validate
한번에 하나씩
관심사의 분리
하면서 나누기
예측 가능성
7
뮤테이션 훅에 로직 응집
Open
Red-Green
Build on Patterns
Don't Make Me Think (Keep it Soft)
예측 가능성
필수
7
함수 이름 짓기 애매할 때, 당신의 선택은?
Open
Red-Green
Act on Signal
Ship Value First
Don't Make Me Think (Keep it Soft)
글처럼 읽히는지
관심사의 분리
이름짓기
예측 가능성
비즈니스 로직
7
“잡았다, 도메인 로직”
Open
Red-Green
Act on Signal
관심사의 분리
하면서 나누기
비즈니스 로직
7
리듀스 싫어 sum 쓸거야
Open
Red-Green
Build on Patterns
Don't Make Me Think (Keep it Soft)
글처럼 읽히는지
필수
7
함수 이름 짓기 애매하면 분리 안한다 2
Open
Red-Green
Act on Signal
관심사의 분리
이름짓기
예측 가능성
7
중복 발견 후 추출 + useSuspenseQuery
Open
Red-Green
Refactor
Group By Purpose (Keep it Soft)
Act on Signal
Parse Don't Validate
한번에 하나씩
관심사의 분리
필수
7
“입력 받는 인터페이스가 명확해야 할거 같아요”, “예측이 되어야 행복해요”
Open
Refactor
No Suprises (Keep it Soft)
인터페이스
예측 가능성
필수
7
type Status = ‘없음’ | ‘다받음’ | ‘받을거존재’ | ‘아직달성못함’
Open
Refactor
Ship Value First
예측 가능성
Type-Driven Guardrails