API 연동부터 상태관리까지, 데이터 다루는 기술
데이터 최적화
React QueryZustandTypeScriptNext.js
중급총 30회14시간
데이터 최적화280,000원
수강 신청이런 경험, 있지 않나요?
API 호출이 많아지면 코드가 스파게티처럼 꼬인다
같은 데이터를 여러 곳에서 중복 요청해서 앱이 느리다
전역 상태가 뒤엉켜서 어디서 뭐가 바뀌는지 추적이 안 된다
TypeScript 문법은 배웠는데 실전에서 어떻게 쓰는지 감이 안 온다
같은 AI를 써도, 결과가 달라집니다
API 3개 호출 + 로딩/에러 각각 관리 = 스파게티 100줄
React Query 캐싱으로 깔끔하게 20줄
서버 데이터와 UI 상태가 한 곳에 뒤엉킴
서버/클라이언트 상태 분리 → 데이터 흐름이 명확
면접에서 '상태관리 어떻게 하세요?' → 말문 막힘
프로젝트 경험 기반으로 자신 있게 설명
이런 것을 배웁니다
면접관이 가장 먼저 묻습니다 — 데이터를 어떻게 다루세요?
UI를 예쁘게 만드는 건 기본입니다. 프론트엔드 면접에서 합격과 불합격을 가르는 건, 데이터를 얼마나 효율적으로 관리하느냐입니다.
API 100줄 코드가 20줄로 줄어드는 구조화
API 3개 호출에 로딩 3개, 에러 3개, 상태 관리 코드가 뒤엉킨 스파게티. React Query의 캐싱과 자동 상태관리가 이 모든 걸 정리합니다.
서버 상태 vs 클라이언트 상태, 섞지 마세요
API에서 온 데이터와 UI에서만 쓰는 데이터를 한 곳에 넣으면 꼬입니다. 서버 상태는 React Query, 클라이언트 상태는 Zustand — 명확하게 분리합니다.
TypeScript, 이제 실전에서 이렇게 씁니다
문법은 배웠는데 실전에서 어떻게 쓰는지 몰랐다면 이 트랙이 답입니다. API 응답 타입 정의, 제네릭 활용, 타입 가드 — 실무 패턴을 직접 적용합니다.
무한스크롤, 낙관적 업데이트 — 사용자가 느끼는 속도
버튼 누르면 즉시 반응하고, 스크롤하면 자연스럽게 로딩되는 UI. 실제로 빠른 것도 중요하지만, 사용자가 빠르다고 느끼는 것이 더 중요합니다.
대시보드 + 실시간 데이터 — 완성된 포트폴리오
차트, 테이블, 필터, 실시간 업데이트까지 포함된 데이터 대시보드 웹앱. 프론트엔드 개발자로서 자신 있게 보여줄 수 있는 결과물을 완성합니다.
커리큘럼
총 5개 파트 · 30강
00. 프로젝트 설계 & API 구조
1데이터 중심 웹앱 설계 — 요구사항 분석
무료15:00
2API 구조 설계 — RESTful 엔드포인트 정의
무료18:00
3TypeScript 프로젝트 셋업 — 엄격한 설정
무료15:00
4API 응답 타입 정의 — 자동 생성 vs 수동 작성
무료15:00
5에러 타입 체계 — 타입 안전한 에러 핸들링
12:00
6프로젝트 폴더 구조 — 기능별 모듈화
12:00
01. React Query 심화
7캐싱 전략 심화 — staleTime, gcTime, 프리페치
18:00
8쿼리 키 패턴 — 계층적 캐시 무효화
15:00
9무한스크롤 — useInfiniteQuery 실전 구현
18:00
10옵티미스틱 업데이트 — 즉각 반응 UI
18:00
11Suspense 통합 — useSuspenseQuery 패턴
15:00
12에러 바운더리와 리트라이 전략
12:00
02. Zustand 심화
13스토어 설계 패턴 — 슬라이스, 합성
15:00
14미들웨어 — persist, devtools, immer
18:00
15셀렉터 최적화 — 리렌더링 최소화
12:00
16서버/클라이언트 상태 경계 설계
15:00
17비동기 액션 — API 연동 상태관리
12:00
18테스트 — 스토어 단위 테스트 작성
12:00
03. TypeScript 실전 적용
19제네릭 심화 — 조건부 타입, 매핑 타입
18:00
20유틸리티 타입 실전 — Partial, Omit, Extract
15:00
21타입 가드 패턴 — 런타임 안전성 확보
15:00
22API 클라이언트 타입화 — end-to-end 타입 안전성
18:00
23React 컴포넌트 타입 패턴 — Props, Ref, Event
15:00
24tsconfig 최적화 — strict mode 완전 정복
10:00
04. 통합 프로젝트 & 배포
25프로젝트 통합 — 전체 기능 조립
20:00
26대시보드 UI — 차트, 테이블, 필터 통합
22:00
27실시간 데이터 — WebSocket/SSE 연동
18:00
28성능 프로파일링 — 병목 지점 분석 + 해결
15:00
29배포 + 모니터링 설정
12:00
30마무리 — 데이터 전문가로의 다음 단계
10:00