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

2025. 1. 26. 11:06·TypeScript
반응형

소개

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 인터페이스 사용을 권장합니다.

저작자표시 비영리 변경금지 (새창열림)

'TypeScript' 카테고리의 다른 글

Enum을 넘어서 - const assertions의 장점과 Tree-shaking  (0) 2025.02.12
[REST API] RESTful API 설계 가이드  (1) 2025.01.29
[JavaScript] 문자열 검색과 비교  (1) 2025.01.25
[Next.js] HTTP 요청 구현하기 : fetch vs axios  (0) 2025.01.24
[Chrome Extension] Manifest V3 가이드  (2) 2025.01.21
'TypeScript' 카테고리의 다른 글
  • Enum을 넘어서 - const assertions의 장점과 Tree-shaking
  • [REST API] RESTful API 설계 가이드
  • [JavaScript] 문자열 검색과 비교
  • [Next.js] HTTP 요청 구현하기 : fetch vs axios
코샵
코샵
나의 코딩 일기장
    반응형
  • 코샵
    끄적끄적 코딩 공방
    코샵
    • 분류 전체보기 (725)
      • 스마트팜 (0)
      • 상품 추천 (223)
      • MongoDB (4)
      • 하드웨어 (17)
      • 일기장 (4)
      • 파이썬 (130)
        • Basic (41)
        • OpenCV (8)
        • Pandas (15)
        • PyQT (3)
        • SBC(Single Board Computer) (1)
        • 크롤링 (14)
        • Fast API (29)
        • Package (6)
      • Unity (138)
        • Tip (41)
        • Project (1)
        • Design Pattern (8)
        • Firebase (6)
        • Asset (2)
      • Linux (4)
      • C# (97)
        • Algorithm (11)
        • Window (7)
      • TypeScript (51)
        • CSS (10)
      • Git (11)
      • SQL (5)
      • Flutter (10)
        • Tip (1)
      • System (1)
      • BaekJoon (6)
      • Portfolio (2)
      • MacOS (1)
      • 유틸리티 (1)
      • 서비스 (6)
      • 자동화 (3)
      • Hobby (10)
        • 물생활 (10)
        • 식집사 (0)
  • 인기 글

  • 태그

    list
    리뷰이관
    리스트
    learntocode
    programming101
    상품 리뷰 크롤링
    ipcamera
    파이썬
    programmerlife
    긴유통기한우유
    codingcommunity
    쇼핑몰리뷰
    스크립트 실행
    유니티
    appdevelopment
    rtsp
    unity
    Python
    라떼우유
    cv2
    리뷰관리
    스마트스토어리뷰
    믈레코비타멸균우유
    셀레니움
    스크립트 실행 순서
    devlife
    카페24리뷰이관
    카페24리뷰
    codingtips
    C#
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
코샵
[HTTP Header 다루기] fetch API의 Headers 인터페이스
상단으로

티스토리툴바