<aside> 💻

feature/external-api 브랜치 작업 내역

feature/auth 브랜치의 주요 목적은 JSON Placeholder를 이용한 외부 통신 테스트입니다.

1. Todo 데이터 타입 정의

2. Todo API 통신 구현

• 전체 목록 조회 API: GET /todos
• 단일 항목 조회 API: GET /todos/1

3. React Query로 데이터 관리(패칭)

• useQuery hooks 구현
• 캐싱 전략 설정

4. Todo 리스트/상세 페이지 구현(캐싱 테스트를 위한 컴포넌트 구현)

• 목록 페이지
• 상세 페이지
• 페이지 간 이동

5. React Query DevTools 설정(React Query DevTools로 캐싱 확인)

• 캐싱 상태 확인
• 데이터 갱신 테스트

이해하기 쉽도록 각 단계별로 진행하면서, 캐싱이 어떻게 동작하는지 확인해볼 수 있습니다.

구현 순서:

src/
├── types/              # Todo 타입 정의
├── services/           # Todo API 함수
├── hooks/queries/      # Todo Query Hooks
├── pages/             # Todo 리스트/상세 페이지
└── components/        # Todo 관련 컴포넌트

</aside>

구현 상세 가이드

1. Todo 데이터 타입 정의

JSON Placeholder API와의 통신을 위한 기본적인 타입들을 정의했습니다.

// src/types/todo.ts// Todo 아이템의 기본 구조
export interface Todo {
  userId: number;// Todo 작성자 ID
  id: number;// Todo 항목의 고유 ID
  title: string;// Todo 제목
  completed: boolean;// 완료 여부
}

// API 응답 타입 정의
export interface TodoListResponse {
  data: Todo[];// Todo 목록 응답
}

export interface TodoDetailResponse {
  data: Todo;// 단일 Todo 응답
}

이러한 타입 정의를 통해:

• 명확한 데이터 구조 파악 가능
• TypeScript의 타입 체크 활용
• API 응답 데이터의 타입 안정성 확보

다음은 이 타입들을 사용하여 Todo API 통신을 구현할 예정입니다.

2. Todo API 통신 구현

JSON Placeholder API와 통신하기 위한 기본 API 함수들을 구현했습니다.

// src/services/todoApi.ts
import axios from 'axios';
import type { Todo } from '@/types/todo';

const BASE_URL = '<https://jsonplaceholder.typicode.com>';

export const todoAPI = {
// Todo 목록 조회
  getTodos: async (): Promise<Todo[]> => {
    const response = await axios.get<Todo[]>(`${BASE_URL}/todos`);
    return response.data;
  },

// Todo 상세 조회
  getTodoById: async (id: number): Promise<Todo> => {
    const response = await axios.get<Todo>(`${BASE_URL}/todos/${id}`);
    return response.data;
  }
};

이렇게 구현된 API 함수들은:

• axios를 사용한 HTTP 요청 처리
• TypeScript를 통한 응답 데이터 타입 보장
• 재사용 가능한 모듈화된 구조

3. React Query로 데이터 관리