[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - fetch()

강경서·2023년 7월 30일

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

41/50

🚀 fetch()

웹 서비스를 제작하다 보면 HTTP 프로토콜을 통해 데이터를 받거나 전달하는 과정을 많이 이용합니다. 지금까지는 fetch 메서드를 사용하면서 원리보다는 막연하게 옵션들을 외어서 작성했는데, 이번 기회를 통해 조금 자세히 알아보려고 합니다.

fetch(resource)
fetch(resource, options)

fetch 메서드는 Fetch API가 제공하는 전역 메서드로 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환하는 방식으로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

resource

취득하려는 리소스의 URL을 제공하는 문자열 또는 URL처럼 문자열 변환자 (en-US)를 포함한 객체이거나 Request 객체입니다.

Request 객체: Fetch API의 Request 인터페이스는 리소스 요청을 나타냅니다. 자세히보기

options

요청에 적용하고자 하는 사용자 지정 설정을 포함하는 객체입니다. 사용 가능한 설정은 다음과 같습니다.

method

GET, POST 등 요청 메서드입니다. 별도로 정의한 메서드를 사용하려면 직접 대문자로 입력해야 합니다.

fetch("url", {
	method: "GET"
})

headers

클라이언트와 서버 간에 전달되는 메타데이터 정보로, 요청의 내용이나 형식, 인증 정보, 캐시 설정 등을 포함합니다.

fetch("url", {
	method: "GET",
	headers: {
    	'Content-Type': 'application/json',
    	'Authorization': `Bearer ${accessToken}`
    }
})

위 예제에서 headers 객체는 Content-Type과 Authorization 헤더를 추가하여 서버로 보내는 요청의 내용과 인증 정보를 명시적으로 설정한 것입니다.

body

요청에 추가하고자 하는 본문입니다. Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 문자열 객체 또는 리터럴, ReadableStream 객체를 사용할 수 있습니다.

fetch("url", {
	method: "GET",
	headers: {
    	'Content-Type': 'application/json',
    	'Authorization': `Bearer ${accessToken}`
	},
    body: JSON.stringify({ key: 'value' })
})

mode

이 요청에 사용할 모드, 즉 cors, no-cors, 또는 same-origin입니다.

cors
기본값이며, 요청에 대해 CORS 정책을 적용합니다. 웹 브라우저는 요청을 보내기 전에 사전 요청(preflight request)을 보내기도 합니다.
no-cors
CORS 정책을 무시하고, 브라우저의 보안 기능을 사용하지 않습니다. 이 모드에서는 일부 헤더들을 사용할 수 없으며, 응답의 데이터에 접근할 수 없습니다. 주로 서비스 워커를 사용하여 요청을 캐싱하는 등의 용도로 사용됩니다.
same-origin
요청을 보낼 때 동일 출처 정책만 적용하고, CORS 정책은 무시합니다. 같은 출처에서만 요청을 보낼 수 있으며, 다른 출처로의 요청은 차단됩니다.

credentials

브라우저가 자격증명(쿠키, HTTP 인증 항목, TLS 클라이언트 인증서)을 어떻게 취급할지 제어합니다. 다음 중 한 문자열이어야 합니다.

omit
브라우저가 요청에서 자격증명을 제외하도록 하고, Set-Cookie 헤더처럼 응답에 포함된 자격증명도 무시하도록 지시합니다.
same-origin
브라우저가 동일 출처 URL 요청에 대해서는 자격증명을 보내고, 동일 출처 URL 응답에 포함된 자격증명도 사용하도록 지시합니다. 기본 값입니다.
include
브라우저 동일과 교차 출처 요청 모두에 자격증명을 보내고, 응답 자격증명도 모두 사용하도록 지시합니다.

cache

요청이 브라우저 HTTP 캐시와 어떻게 상호작용할지 제어합니다. 가능한 값은 default, no-store, reload, no-cache, force-cache, only-if-cached 중 하나입니다. 자세히보기

redirect

리다이렉트 응답 처리법입니다.

follow
자동으로 리다이렉트를 따라갑니다. 기본 값입니다.
error
리다이렉트 발생 시 오류와 함께 요청을 중단합니다.
manual
호출자가 응답을 다른 컨텍스트에서 처리해야 합니다. 자세한 정보는 WHATWG fetch 표준에서 확인하세요.

referrer

요청 리퍼러를 지정하는 문자열입니다. 동일 출처 URL, about:client, 빈 문자열 중 하나를 사용할 수 있습니다.

리퍼러는 현재 요청을 보내는 페이지의 URL을 나타냅니다.

referrerPolicy

요청에 사용할 리퍼러 정책을 지정합니다. no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, unsafe-url 중 하나를 사용할 수 있습니다. 자세히보기

리퍼러는 보안 및 개인 정보 보호와 관련하여 중요한 역할을 합니다. 웹 사이트 간의 정보 유출을 방지하기 위해, 브라우저는 기본적으로 리퍼러 정보를 다른 사이트로 전달하지 않습니다. 이것은 웹 페이지에서 외부 리소스를 가져올 때 브라우저가 리퍼러를 전송하지 않게 함으로써 외부 사이트에서 해당 페이지로 사용자를 추적하는 것을 막는데 도움이 됩니다.

integrity

요청의 하위 리소스 무결성 (en-US)을 지정합니다. (예시: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)

keepalive

요청이 페이지 수명보다 오래 지속되는 걸 허용합니다. keepalive 플래그는 Navigator.sendBeacon() API의 대체제입니다.

signal

AbortSignal 객체 인스턴스입니다. 취득 요청과 통신하다가 필요한 경우 AbortController를 통해 요청을 중단할 수 있습니다.

priority

같은 종류의 취득 요청 중에서 이 요청의 상대적 중요도를 지정합니다. 다음 문자열 중 하나여야 합니다.

high
같은 종류의 취득 요청 중 높은 우선순위입니다.
low
같은 종류의 취득 요청 중 낮은 우선순위입니다.
-auto
자동으로 취득 요청의 우선순위를 결정합니다. 기본 값입니다.

📝 후기

지금까지 fetch 메서드를 사용하면서 한정된 옵션들로만 사용했었습니다. 아직까지는 한정된 옵션만으로도 충분히 사용이 가능했지만 공식문서를 통해서 확인해본 fetch메서드는 수 많은 옵션을 가지고 있었습니다. 미리 숙지해둔다면 추후에 분명 도움이 될거라 생각했습니다.

🧾 Reference

https://developer.mozilla.org/ko/docs/Web/API/fetch

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

강경서

기록하고 배우고 시도하고

이전 포스트

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - Tailwind CSS

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - fetch()