[HTTP Header 다루기] fetch API의 Headers 인터페이스

소개

HTTP 요청 시 헤더를 다루는 두 가지 주요 방법 - 직접 객체로 전달하는 방법과 Headers 인터페이스를 사용하는 방법에 대해 자세히 알아보겠습니다.

1. 기본적인 헤더 설정

// 단순 객체로 헤더 전달
const fetchData = async (url: string) => {
  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      }
    });
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
};

Headers 인터페이스 활용

class HttpClient {
  private async createHeaders(): Promise<Headers> {
    // 기본 헤더 생성
    const headers = new Headers({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'User-Agent': navigator.userAgent,
      'Accept-Language': navigator.language,
    });

    // 인증 토큰 추가
    const token = localStorage.getItem('token');
    if (token) {
      headers.append('Authorization', `Bearer ${token}`);
    }

    return headers;
  }

  async request<T>(url: string, config: RequestInit = {}): Promise<T> {
    try {
      const headers = await this.createHeaders();

      const requestConfig: RequestInit = {
        method: config.method || 'GET',
        headers: headers,
        credentials: 'include',
        ...config,
      };

      const response = await fetch(url, requestConfig);

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

      return await response.json();
    } catch (error) {
      console.error('Request failed:', error);
      throw error;
    }
  }
}

Headers 클래스의 다양한 메서드 활용

class HeaderManager {
  private headers: Headers;

  constructor() {
    this.headers = new Headers();
  }

  // 헤더 추가
  addHeader(name: string, value: string): void {
    this.headers.append(name, value);
  }

  // 헤더 설정 (기존 값 덮어쓰기)
  setHeader(name: string, value: string): void {
    this.headers.set(name, value);
  }

  // 헤더 삭제
  removeHeader(name: string): void {
    this.headers.delete(name);
  }

  // 헤더 존재 여부 확인
  hasHeader(name: string): boolean {
    return this.headers.has(name);
  }

  // 헤더 값 가져오기
  getHeader(name: string): string | null {
    return this.headers.get(name);
  }

  // 모든 헤더 가져오기
  getAllHeaders(): Headers {
    return this.headers;
  }
}

실전 활용 예제

class ApiClient {
  private baseUrl: string;
  private headerManager: HeaderManager;

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

  private async setupHeaders(): Promise<void> {
    // 기본 헤더 설정
    this.headerManager.setHeader('Content-Type', 'application/json');
    this.headerManager.setHeader('Accept', 'application/json');

    // 언어 설정
    this.headerManager.setHeader('Accept-Language', navigator.language);

    // 인증 토큰
    const token = localStorage.getItem('token');
    if (token) {
      this.headerManager.setHeader('Authorization', `Bearer ${token}`);
    }
  }

  async request<T>(
    endpoint: string, 
    method: string = 'GET', 
    body?: any
  ): Promise<T> {
    await this.setupHeaders();

    const url = `${this.baseUrl}${endpoint}`;
    const requestConfig: RequestInit = {
      method,
      headers: this.headerManager.getAllHeaders(),
      credentials: 'include',
    };

    if (body) {
      requestConfig.body = JSON.stringify(body);
    }

    try {
      const response = await fetch(url, requestConfig);

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

      return await response.json();
    } catch (error) {
      console.error('API request failed:', error);
      throw error;
    }
  }
}

사용 예시

// API 클라이언트 인스턴스 생성
const api = new ApiClient('https://api.example.com');

// GET 요청
const getUser = async (userId: string) => {
  return await api.request<User>(`/users/${userId}`);
};

// POST 요청
const createUser = async (userData: UserCreate) => {
  return await api.request<User>(
    '/users',
    'POST',
    userData
  );
};

// PUT 요청
const updateUser = async (userId: string, userData: UserUpdate) => {
  return await api.request<User>(
    `/users/${userId}`,
    'PUT',
    userData
  );
};

마치며

Headers 인터페이스는 HTTP 헤더를 더 체계적으로 관리할 수 있게 해줍니다. 객체로 직접 헤더를 전달하는 방식보다 더 많은 기능과 유연성을 제공하므로, 복잡한 API 통신이 필요한 경우 Headers 인터페이스 사용을 권장합니다.