TanStack Query Todo 실습: 서버 연결·낙관적 업데이트·실패 롤백
실제 로컬 API를 연결하고 추가·수정·삭제별 캐시 전략과 실패 복구를 확인합니다.
전체 글
TanStack Query 수동 캐시 정규화: 목록·상세 동기화와 선택 기준
수동 정규화의 구조와 비용을 이해하고 기본 Query 캐시와 비교해 선택합니다.
shadcn/ui 시작 실습: Vite 설정·components.json·입력 폼·Sonner
shadcn/ui의 코드 소유 방식을 이해하고 입력 값과 제출 알림을 연결합니다.
React Router v7 실습: BrowserRouter부터 Layout·Outlet·상세 경로까지
주소와 화면을 연결하고 공통 레이아웃 안에서 목록·상세 화면을 전환합니다.
BlogFlow AI 코드 질문 사용법: 오류 원인과 수정 이유 물어보기
BlogFlow AI 코드 질문의 사용 순서, 질문 작성 예시, 입력 제한과 민감한 정보 보호 방법을 안내합니다.
가위바위보 JavaScript 풀이
가위바위보 N회의 선택을 같은 인덱스로 비교하고 조건문으로 승자를 판정하는 JavaScript 풀이입니다.
보이는 학생 JavaScript 풀이
앞에서부터 학생의 키를 확인하면서 지금까지의 최댓값보다 큰 학생 수를 세는 JavaScript 풀이입니다. 예제와 경계값을 검증합니다.
TanStack Query 컴포넌트 테스트: QueryClient 격리와 실패·재시도·목록 갱신 검증
테스트마다 QueryClient와 fixture를 새로 만들고 Promise 완료 순서를 제어합니다. pending, 오류, 의도적 retry, mutation 뒤 목록 갱신과 캐시 오염 방지를 jsdom 테스트 7개로 검증합…
TanStack Query 페이지네이션 실습: placeholderData로 이전 목록 유지하기
이전·다음 페이지 이동을 useQuery로 구현하고, v5 placeholderData와 keepPreviousData로 대기 중 목록을 유지합니다. 마지막 페이지, 이동 실패, 재시도와 캐시 복귀까지 테스트합니다.
TanStack Query useMutation 저장 실습: 실패·재시도와 목록 갱신까지
제목 입력부터 useMutation 저장, 실패 시 입력 보존과 재제출, invalidateQueries 완료 대기까지 하나의 폼으로 완성합니다. 저장 성공 뒤 목록 읽기 실패도 별도 상태로 처리합니다.
React useReducer와 Context 실습: 작업 목록 상태를 여러 컴포넌트에서 공유하기
순수 reducer로 작업 추가·토글·삭제 규칙을 만들고 Context로 폼·요약·목록을 연결합니다. 로컬 상태 경계와 7개 테스트를 실습합니다.
JavaScript 객체 참조와 불변 갱신: 중첩 객체를 안전하게 바꾸기
얕은 복사가 중첩 객체를 공유하는 이유를 확인하고, 변경 경로만 새로 만드는 상태 갱신 함수를 완성합니다. structuredClone의 복제 범위와 React 상태로 이어지는 원칙도 실습합니다.