Fetch API와 TypeScript 결합하기: 강력한 웹 개발의 시너지 🚀

웹 개발 세계에서 데이터 통신과 타입 안정성은 두 가지 핵심 요소입니다. Fetch API는 네트워크 요청을 간편하게 만들어주고, TypeScript는 JavaScript에 정적 타입을 추가하여 코드의 안정성을 높여줍니다. 이 두 기술을 결합하면 어떤 마법이 일어날까요? 🎩✨

이 가이드에서는 Fetch API와 TypeScript를 함께 사용하는 방법을 상세히 알아보겠습니다. 초보자부터 전문가까지, 모든 개발자가 이해하고 적용할 수 있는 실용적인 접근법을 제시할 것입니다. 특히 재능넷과 같은 플랫폼에서 활동하는 프리랜서 개발자들에게 유용한 내용이 될 것입니다.

자, 이제 TypeScript의 강력한 타입 시스템과 Fetch API의 유연성을 결합하여 더 안전하고 효율적인 웹 애플리케이션을 만드는 여정을 시작해볼까요? 🌟

1. Fetch API 소개 📡

Fetch API는 현대 웹 개발에서 필수적인 도구입니다. AJAX 요청을 보내고 받는 데 사용되는 이 인터페이스는 XMLHttpRequest를 대체하여 더 강력하고 유연한 기능을 제공합니다.

1.1 Fetch API의 특징

• Promise 기반: 비동기 프로그래밍을 더 쉽게 만듭니다.
• 간결한 문법: 복잡한 설정 없이 간단하게 사용할 수 있습니다.
• 스트림 지원: 대용량 데이터를 효율적으로 처리할 수 있습니다.
• CORS 지원: 크로스 오리진 요청을 안전하게 처리합니다.

1.2 기본 사용법

Fetch API의 기본적인 사용법을 살펴보겠습니다:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

이 간단한 예제에서 볼 수 있듯이, Fetch API는 URL을 인자로 받아 Promise를 반환합니다. 이 Promise는 Response 객체로 해결되며, 이를 통해 응답 데이터에 접근할 수 있습니다.

1.3 응답 처리

Fetch API는 다양한 형식의 응답을 처리할 수 있습니다:

• response.json(): JSON 형식의 응답을 파싱합니다.
• response.text(): 텍스트 형식의 응답을 반환합니다.
• response.blob(): 이미지나 파일 등의 바이너리 데이터를 처리합니다.
• response.formData(): form 데이터를 처리합니다.

1.4 요청 옵션 설정

Fetch API는 다양한 옵션을 통해 요청을 커스터마이즈할 수 있습니다:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data));

이 예제에서는 POST 요청을 보내고, 헤더와 본문을 설정하는 방법을 보여줍니다.

1.5 에러 처리

Fetch API에서 주의해야 할 점은 네트워크 오류가 아닌 한 Promise는 거부되지 않는다는 것입니다. 따라서 응답의 상태 코드를 확인하는 것이 중요합니다:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

이렇게 Fetch API의 기본적인 사용법을 살펴보았습니다. 이제 TypeScript와 어떻게 결합하여 사용할 수 있는지 알아보겠습니다. 🧐

2. TypeScript 기초 🏗️

TypeScript는 JavaScript의 슈퍼셋 언어로, 정적 타입 검사와 최신 ECMAScript 기능을 제공합니다. Fetch API와 결합하기 전에, TypeScript의 핵심 개념을 간단히 살펴보겠습니다.

2.1 TypeScript의 장점

• 정적 타입 검사: 컴파일 시점에 오류를 잡아낼 수 있습니다.
• 향상된 IDE 지원: 자동 완성, 리팩토링 등의 기능이 강화됩니다.
• 객체 지향 프로그래밍 지원: 클래스, 인터페이스 등을 사용할 수 있습니다.
• 모듈 시스템: 코드를 모듈화하여 관리할 수 있습니다.

2.2 기본 타입

TypeScript에서 제공하는 기본 타입들을 살펴보겠습니다:

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
let notSure: any = 4;
let unusable: void = undefined;
let u: undefined = undefined;
let n: null = null;

2.3 인터페이스

인터페이스는 TypeScript에서 타입을 정의하는 강력한 방법입니다:

interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
  readonly id: number; // 읽기 전용 속성
}

let user: User = {
  name: "John",
  age: 30,
  id: 1
};

2.4 제네릭

제네릭을 사용하면 재사용 가능한 컴포넌트를 만들 수 있습니다:

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString");

2.5 타입 추론

TypeScript는 많은 경우 타입을 자동으로 추론할 수 있습니다:

let x = 3; // number로 추론됨
let y = [0, 1, null]; // (number | null)[]로 추론됨

2.6 유니온 타입

변수가 여러 타입 중 하나일 수 있음을 나타냅니다:

let multiType: number | string;
multiType = 20; // OK
multiType = "twenty"; // OK

2.7 타입 가드

런타임에 타입을 좁혀나가는 방법입니다:

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

이러한 TypeScript의 기본 개념들은 Fetch API와 결합할 때 매우 유용하게 사용됩니다. 특히 API 응답의 타입을 정의하고 처리하는 데 큰 도움이 됩니다. 다음 섹션에서는 이 두 기술을 어떻게 효과적으로 결합할 수 있는지 살펴보겠습니다. 💡

3. Fetch API와 TypeScript 결합하기 🤝

이제 Fetch API와 TypeScript를 결합하여 사용하는 방법을 자세히 알아보겠습니다. 이 결합은 네트워크 요청의 안정성과 예측 가능성을 크게 향상시킵니다.

3.1 기본적인 Fetch 요청에 타입 추가하기

먼저, 간단한 GET 요청에 타입을 추가해 보겠습니다:

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json() as Promise<User>;
}

// 사용 예
fetchUser(1)
  .then(user => console.log(user.name))
  .catch(error => console.error(error));

이 예제에서는 User 인터페이스를 정의하고, fetchUser 함수가 Promise<User>를 반환하도록 명시했습니다. 이렇게 하면 반환된 데이터의 구조를 명확히 알 수 있고, IDE의 자동 완성 기능을 활용할 수 있습니다.

3.2 POST 요청 처리하기

이번에는 POST 요청을 TypeScript와 함께 사용해 보겠습니다:

interface CreateUserRequest {
  name: string;
  email: string;
}

interface CreateUserResponse {
  id: number;
  name: string;
  email: string;
  createdAt: string;
}

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error('Failed to create user');
  }

  return response.json() as Promise<CreateUserResponse>;
}

// 사용 예
const newUser: CreateUserRequest = {
  name: "John Doe",
  email: "john@example.com"
};

createUser(newUser)
  .then(createdUser => console.log(`Created user with ID: ${createdUser.id}`))
  .catch(error => console.error(error));

이 예제에서는 요청 본문(CreateUserRequest)과 응답 본문(CreateUserResponse)에 대한 인터페이스를 각각 정의했습니다. 이를 통해 요청과 응답 데이터의 구조를 명확히 할 수 있습니다.

3.3 제네릭을 활용한 재사용 가능한 Fetch 함수

여러 API 엔드포인트에서 사용할 수 있는 재사용 가능한 Fetch 함수를 만들어 보겠습니다:

async function fetchData<T>(url: string, options?: RequestInit): Promise<T> {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json() as Promise<T>;
}

// 사용 예
interface Product {
  id: number;
  name: string;
  price: number;
}

fetchData<Product[]>('https://api.example.com/products')
  .then(products => {
    products.forEach(product => console.log(`${product.name}: $${product.price}`));
  })
  .catch(error => console.error(error));

interface Order {
  id: number;
  productId: number;
  quantity: number;
}

const newOrder: Order = {
  id: 1,
  productId: 100,
  quantity: 2
};

fetchData<Order>('https://api.example.com/orders', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newOrder),
})
  .then(order => console.log(`Order created with ID: ${order.id}`))
  .catch(error => console.error(error));

이 제네릭 fetchData 함수는 다양한 타입의 데이터를 처리할 수 있으며, 각 요청에 대해 적절한 타입을 지정할 수 있습니다.

3.4 에러 처리 개선하기

TypeScript를 사용하여 더 구체적인 에러 처리를 구현할 수 있습니다:

class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

async function fetchWithErrorHandling<T>(url: string, options?: RequestInit): Promise<T> {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new ApiError(response.status, `HTTP error! status: ${response.status}`);
  }
  return response.json() as Promise<T>;
}

// 사용 예
fetchWithErrorHandling<User>('https://api.example.com/users/1')
  .then(user => console.log(user.name))
  .catch(error => {
    if (error instanceof ApiError) {
      console.error(`API Error ${error.status}: ${error.message}`);
    } else {
      console.error('An unexpected error occurred:', error);
    }
  });

이 예제에서는 커스텀 ApiError 클래스를 정의하여 API 관련 오류를 더 구체적으로 처리할 수 있게 했습니다.

3.5 응답 헤더 및 상태 처리

때로는 응답 본문뿐만 아니라 헤더나 상태 코드도 처리해야 할 수 있습니다:

interface ApiResponse<T> {
  data: T;
  status: number;
  headers: Headers;
}

async function fetchWithMetadata<T>(url: string, options?: RequestInit): Promise<ApiResponse<T>> {
  const response = await fetch(url, options);
  const data = await response.json() as T;
  
  return {
    data,
    status: response.status,
    headers: response.headers,
  };
}

// 사용 예
fetchWithMetadata<User>('https://api.example.com/users/1')
  .then(({ data, status, headers }) => {
    console.log(`User: ${data.name}`);
    console.log(`Status: ${status}`);
    console.log(`Content-Type: ${headers.get('Content-Type')}`);
  })
  .catch(error => console.error(error));

이 접근 방식을 사용하면 응답 데이터와 함께 상태 코드와 헤더 정보도 쉽게 접근할 수 있습니다.

3.6 인터셉터 패턴 구현하기

인터셉터 패턴을 사용하여 모든 요청과 응답을 가로채고 수정할 수 있습니다:

type RequestInterceptor = (config: RequestInit) => RequestInit;
type ResponseInterceptor = (response: Response) => Response | Promise<Response>;

class FetchClient {
  private requestInterceptors: RequestInterceptor[] = [];
  private responseInterceptors: ResponseInterceptor[] = [];

  addRequestInterceptor(interceptor: RequestInterceptor) {
    this.requestInterceptors.push(interceptor);
  }

  addResponseInterceptor(interceptor: ResponseInterceptor) {
    this.responseInterceptors.push(interceptor);
  }

  async fetch<T>(url: string, options: RequestInit = {}): Promise<T> {
    let config = { ...options };
    for (const interceptor of this.requestInterceptors) {
      config = interceptor(config);
    }

    let response = await fetch(url, config);
    for (const interceptor of this.responseInterceptors) {
      response = await interceptor(response);
    }

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return response.json() as Promise<T>;
  }
}

// 사용 예
const client = new FetchClient();

client.addRequestInterceptor((config) => {
  config.headers = {
    ...config.headers,
    'Authorization': 'Bearer token123',
  };
  return config;
});

client.addResponseInterceptor(async (response) => {
  if (response.status === 401) {
    // 토큰 갱신 로직
    const newToken = await refreshToken();
    // 원래 요청 재시도
    return fetch(response.url, {
      ...response,
      headers: {
        ...response.headers,
        'Authorization': `Bearer ${newToken}`,
      },
    });
  }
  return response;
});

client.fetch<User>('https://api.example.com/users/1')
  .then(user => console.log(user.name))
  .catch(error => console.error(error));

이 패턴을 사용하면 인증 토큰 추가, 에러 처리, 로깅 등의 공통 로직을 모든 요청에 쉽게 적용할 수 있습니다.

3.7 취소 가능한 요청 구현하기

TypeScript와 함께 AbortController를 사용하여 취소 가능한 Fetch 요청을 구현할 수 있습니다:

interface CancellableFetch<T> {
  promise: Promise<T>;
  cancel: () => void;
}

function cancellableFetch<T>(url: string, options?: RequestInit): CancellableFetch<T> {
  const controller = new AbortController();
  const signal = controller.signal;

  const promise = fetch(url, { ...options, signal })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json() as Promise<T>;
    });

  return {
    promise,
    cancel: () => controller.abort()
  };
}

// 사용 예
const { promise, cancel } = cancellableFetch<User>('https://api.example.com/users/1');

const timeoutId = setTimeout(() => {
  cancel();
  console.log('Request cancelled due to timeout');
}, 5000);

promise
  .then(user => {
    clearTimeout(timeoutId);
    console.log(user.name);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was cancelled');
    } else {
      console.error('An error occurred:', error);
    }
  });

이 구현을 통해 장시간 실행되는 요청을 필요에 따라 취소할 수 있습니다.

이러한 다양한 기법들을 활용하면 Fetch API와 TypeScript를 결합하여 강력하고 유연한 네트워크 통신 로직을 구현할 수 있습니다. 다음 섹션에서는 이러한 기법들을 실제 프로젝트에 적용하는 방법에 대해 더 자세히 알아보겠습니다. 🚀

4. 실제 프로젝트에 적용하기 🏗️

지금까지 배운 Fetch API와 TypeScript 결합 기법을 실제 프로젝트에 적용하는 방법을 살펴보겠습니다. 이를 통해 코드의 재사용성, 유지보수성, 그리고 타입 안정성을 크게 향상시킬 수 있습니다.

4.1 API 클라이언트 구현하기

먼저, 재사용 가능한 API 클라이언트를 구현해 보겠습니다:

class ApiClient {
  private baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  async get<T>(endpoint: string): Promise<T> {
    const response = await fetch(`${this.baseUrl}${endpoint}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json() as Promise<T>;
  }

  async post<T>(endpoint: string, data: any): Promise<T> {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json() as Promise<T>;
  }

  // PUT, DELETE 등의 다른 메서드도 유사하게 구현할 수 있습니다.
}

// 사용 예
const api = new ApiClient('https://api.example.com');

interface User {
  id: number;
  name: string;
  email: string;
}

api.get<User[]>('/users')
  .then(users => users.forEach(user => console.log(user.name)))
  .catch(error => console.error(error));

api.post<User>('/users', { name: 'John Doe', email: 'john@example.com' })
  .then(user => console.log(`Created user with ID: ${user.id}`))
  .catch(error => console.error(error));

4.2 서비스 레이어 구현하기

API 클라이언트를 사용하여 특정 도메인의 서비스 레이어를 구현할 수 있습니다:

class UserService {
  private api: ApiClient;

  constructor(api: ApiClient) {
    this.api = api;
  }

  async getUsers(): Promise<User[]> {
    return this.api.get<User[]>('/users');
  }

  async getUserById(id: number): Promise<User> {
    return this.api.get<User>(`/users/${id}`);
  }

  async createUser(userData: Omit<User, 'id'>): Promise<User> {
    return this.api.post<User>('/users', userData);
  }
}

// 사용 예
const api = new ApiClient('https://api.example.com');
const userService = new UserService(api);

userService.getUsers()
  .then(users => users.forEach(user => console.log(user.name)))
  .catch(error => console.error(error));

userService.createUser({ name: 'Jane Doe', email: 'jane@example.com' })
  .then(user => console.log(`Created user with ID: ${user.id}`))
  .catch(error => console.error(error));

4.3 상태 관리와 통합하기

API 호출 결과를 상태 관리 라이브러리(예: Redux)와 통합할 수 있습니다:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

interface UserState {
  users: User[];
  status: 'idle' | 'loading' | 'succeeded' | 'failed';
  error: string | null;
}

const initialState: UserState = {
  users: [],
  status: 'idle',
  error: null
};

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await api.get<User[]>('/users');
  return response;
});

const userSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || null;
      });
  },
});

export default userSlice.reducer;

// 컴포넌트에서 사용
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './userSlice';

function UserList() {
  const dispatch = useDispatch();
  const { users, status, error } = useSelector((state: RootState) => state.users);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUsers());
    }
    }, [status, dispatch]);

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  if (status === 'failed') {
    return <div>Error: {error}</div>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key="{user.id}">{user.name}</li>
      ))}
    </ul>
  );
}

4.4 테스트 작성하기

TypeScript를 사용하면 API 호출에 대한 단위 테스트와 통합 테스트를 더 쉽게 작성할 수 있습니다:

import { ApiClient } from './apiClient';
import { UserService } from './userService';

// Mock ApiClient
jest.mock('./apiClient');

describe('UserService', () => {
  let apiClient: jest.Mocked<apiclient>;
  let userService: UserService;

  beforeEach(() => {
    apiClient = new ApiClient('') as jest.Mocked<apiclient>;
    userService = new UserService(apiClient);
  });

  test('getUsers should return an array of users', async () => {
    const mockUsers: User[] = [
      { id: 1, name: 'John Doe', email: 'john@example.com' },
      { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
    ];

    apiClient.get.mockResolvedValue(mockUsers);

    const users = await userService.getUsers();
    expect(users).toEqual(mockUsers);
    expect(apiClient.get).toHaveBeenCalledWith('/users');
  });

  test('createUser should return a new user', async () => {
    const newUser = { name: 'New User', email: 'new@example.com' };
    const createdUser: User = { id: 3, ...newUser };

    apiClient.post.mockResolvedValue(createdUser);

    const user = await userService.createUser(newUser);
    expect(user).toEqual(createdUser);
    expect(apiClient.post).toHaveBeenCalledWith('/users', newUser);
  });
});
</apiclient></apiclient>

4.5 에러 처리 및 로깅

TypeScript를 사용하여 더 강력한 에러 처리 및 로깅 시스템을 구현할 수 있습니다:

class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

class Logger {
  static error(message: string, error?: Error) {
    console.error(`[ERROR] ${message}`, error);
    // 여기에 외부 로깅 서비스로 에러를 보내는 로직을 추가할 수 있습니다.
  }

  static info(message: string) {
    console.log(`[INFO] ${message}`);
  }
}

class ApiClient {
  // ... 이전 코드 ...

  private async request<t>(url: string, options: RequestInit = {}): Promise<t> {
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new ApiError(response.status, `HTTP error! status: ${response.status}`);
      }
      return response.json() as Promise<t>;
    } catch (error) {
      if (error instanceof ApiError) {
        Logger.error(`API Error: ${error.message}`, error);
      } else {
        Logger.error('Unexpected error occurred', error as Error);
      }
      throw error;
    }
  }

  async get<t>(endpoint: string): Promise<t> {
    return this.request<t>(`${this.baseUrl}${endpoint}`);
  }

  async post<t>(endpoint: string, data: any): Promise<t> {
    return this.request<t>(`${this.baseUrl}${endpoint}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
  }
}

// 사용 예
const api = new ApiClient('https://api.example.com');

api.get<user>('/users')
  .then(users => {
    Logger.info(`Retrieved ${users.length} users`);
    users.forEach(user => console.log(user.name));
  })
  .catch(error => {
    if (error instanceof ApiError) {
      console.error(`API Error ${error.status}: ${error.message}`);
    } else {
      console.error('An unexpected error occurred:', error);
    }
  });
</user></t></t></t></t></t></t></t></t></t>

4.6 환경 설정 및 타입 정의 파일

프로젝트의 환경 설정을 위해 TypeScript 설정 파일(tsconfig.json)과 타입 정의 파일을 활용할 수 있습니다:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

// types.d.ts
declare module '*.svg' {
  const content: any;
  export default content;
}

declare module '*.png' {
  const content: any;
  export default content;
}

interface User {
  id: number;
  name: string;
  email: string;
}

interface ApiResponse<t> {
  data: T;
  message: string;
  status: number;
}
</t>

이러한 설정과 타입 정의를 통해 프로젝트 전반에 걸쳐 일관된 타입 체크와 자동 완성 기능을 활용할 수 있습니다.

4.7 성능 최적화

TypeScript를 사용하여 API 호출의 성능을 최적화할 수 있습니다. 예를 들어, 캐싱 메커니즘을 구현할 수 있습니다:

class CacheManager<t> {
  private cache: Map<string data: t timestamp: number> = new Map();
  private ttl: number;

  constructor(ttl: number = 60000) { // 기본 TTL: 1분
    this.ttl = ttl;
  }

  set(key: string, data: T): void {
    this.cache.set(key, { data, timestamp: Date.now() });
  }

  get(key: string): T | null {
    const cached = this.cache.get(key);
    if (!cached) return null;

    if (Date.now() - cached.timestamp > this.ttl) {
      this.cache.delete(key);
      return null;
    }

    return cached.data;
  }

  clear(): void {
    this.cache.clear();
  }
}

class ApiClient {
  private cache: CacheManager<any>;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
    this.cache = new CacheManager();
  }

  async get<t>(endpoint: string, useCache: boolean = true): Promise<t> {
    const cacheKey = `GET:${endpoint}`;
    
    if (useCache) {
      const cachedData = this.cache.get(cacheKey);
      if (cachedData) return cachedData as T;
    }

    const data = await this.request<t>(`${this.baseUrl}${endpoint}`);
    this.cache.set(cacheKey, data);
    return data;
  }

  // ... 다른 메서드들 ...
}

// 사용 예
const api = new ApiClient('https://api.example.com');

async function fetchUsersTwice() {
  console.time('First call');
  await api.get<user>('/users');
  console.timeEnd('First call');

  console.time('Second call (cached)');
  await api.get<user>('/users');
  console.timeEnd('Second call (cached)');
}

fetchUsersTwice();
</user></user></t></t></t></any></string></t>

이러한 최적화 기법을 통해 반복적인 API 호출의 성능을 크게 향상시킬 수 있습니다.

이렇게 Fetch API와 TypeScript를 결합하여 실제 프로젝트에 적용하면, 코드의 안정성과 유지보수성이 크게 향상됩니다. 또한, 개발자 경험도 개선되어 생산성이 높아집니다. 다음 섹션에서는 이러한 기술을 사용할 때의 모범 사례와 주의사항에 대해 알아보겠습니다. 🚀