[JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성

728x90

📌 AJAX(Asynchronous JavaScript and XML)

JavaScript로 XMLHttpRequest 객체를 사용해 서버와 비동기 통신을 가능하게 해주는 기술

이를 통해 웹 페이지를 새로 고침하지 않고도 필요한 부분만 업데이트할 수 있습니다.

AJAX라는 이름에 XML이 포함되어 있지만, 현재는 JSON 등 다양한 데이터 형식 사용

AJAX는 서버와 데이터를 비동기적으로 주고받아 사용자 경험을 개선하는 중요한 역할

비동기 HTTP 통신이란, request(요청)와 response(응답)를 비동기 방식으로 처리

🔎 HTTP 서버 요청 메서드 종류(CRUD)

HTTP 요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방식입니다.

AJAX와 Fetch 등의 통신 방식에서 자주 사용하는 CRUD 작업은 다음과 같습니다.

💡 페이로드 : 서버로 전송되는 데이터로, 주로 요청 본문에 포함

HTTP 요청 메서드	종류	목적	페이로드
GET	조회 (Read)	URL 쿼리 문자열로 데이터를 요청	❌
POST	생성 (Create)	요청 본문(body)에 데이터를 담아 생성 요청	⭕
PUT	전체 교체 (Update)	리소스의 전체 교체	⭕
PATCH	부분 수정	리소스의 일부 수정	⭕
DELETE	삭제 (Delete)	모든 / 특정 리소스 삭제	❌

📌 Fetch 란?

Fetch는 서버와 데이터를 주고받는 비동기 통신 기술(AJAX 대안 사용)

Promise 기반으로 동작하여 AJAX보다 코드가 간결하고 가독성이 높습니다.

ES6부터 JavaScript에 내장되어 있어 별도의 설치 없이 사용할 수 있습니다.

비동기 작업이 완료되면 결과를 반환하며 .then() .catch() .finally() 메서드로 결과를 처리하거나,

Async / Await 구문을 사용해 더 쉽게 관리할 수 있습니다.

fetch(url)
  .then(response => /* 응답 처리 */ )
  .catch(error => /* 오류 처리 */ )
  .finally(() => /* 작업 완료 */ );

Fetch 장점

내장 라이브러리이므로 설치 없이 간편하게 사용 가능
비동기 통신 처리가 쉬워 에러 관리 용이

Fetch 단점

일부 브라우저(IE11)에서 지원되지 않습니다.
timeout 설정이 없어 네트워크 에러 발생 시 무한 대기가 발생할 수 있음
JSON 데이터를 받으려면 response.json() 호출 필요

주의사항 : JSON 데이터에서 {a: b,}, [1, 2,] 같은 형식의 마지막 쉼표가 오류 발생

📌 Fetch 사용법과 옵션 설명

Fetch는 서버와 데이터를 주고받는 비동기 통신 기술

URL과 옵션을 사용해 서버에 요청을 보낼 수 있습니다.

📝 Fetch 기본 형태

url : 요청할 서버 링크를 문자열로 작성
options : 요청에 필요한 추가 정보를 담는 객체(생략 가능)

fetch(url, options);

🔎 Fetch 요청 옵션(options)

method
headers
body
mode
credentials
cache
redirect

Fetch 요청 옵션	설명
method	HTTP 요청 방식 (기본값 GET) ➡️ GET, POST, PUT, DELETE
headers	요청에 포함할 추가 헤더 정보 ➡️ Content-Type, Authorization
body	서버로 전송할 데이터 POST / PUT 요청 시 사용 ➡ JSON 데이터는 JSON.stringify()로 변환하여 전달
mode	요청의 모드 설정 (다른 출처 리소스를 허용할지 여부) ➡️ cors, same-origin, no-cors
credentials	쿠키 포함 여부 설정 ➡ same-origin, include
cache	동일 URL 요청 시 캐시 사용 여부 설정 ➡️ no-cache, reload, no-store
redirect	요청 중 리디렉션을 따를지 여부 설정 ➡ follow, manual

📝 method

요청할 HTTP 메서드를 설정합니다.

데이터를 조회할 때는 GET, 데이터를 보낼 때는 POST를 사용합니다.

fetch('https://www.요청URL.com', 
 {   
    method: 'GET'  // 데이터 조회는 'GET', 데이터를 전송할 경우 'POST'
 })

📝 headers

요청에 추가 정보를 담고 싶을 때 사용하는 헤더 옵션입니다.

주로 Content-Type과 같은 정보를 포함합니다.

fetch('https://www.요청URL.com', 
 {   
    method: 'POST',
     // JSON 데이터 전송 시 Content-Type 설정
    headers: { 'Content-Type': 'application/json' }
 })

📝 body

서버로 데이터를 보낼 때 사용합니다.

JSON 또는 FormData로 데이터를 보내며, GET 메서드에서는 사용할 수 없습니다.

fetch('https://www.요청URL.com', 
 {   
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    // JSON 데이터를 문자열로 변환하여 전송
    body: JSON.stringify({ 
       name: "Sohyun",
       userId: 1
    })
 })

📝 mode

mode 옵션은 다른 도메인에 요청을 보낼 때의 접근 방식을 설정합니다.

cors : 다른 도메인의 리소스에 접근 가능
same-origin : 같은 도메인에서만 요청 가능
no-cors : 제한적으로 요청 가능

fetch('https://example.com/data', {
  mode: 'cors' // 또는 'same-origin', 'no-cors'
})

📝 credentials

credentials 옵션은 요청 시 쿠키를 포함할지 여부를 설정합니다.

same-origin : 같은 도메인에서만 쿠키 포함
include : 다른 도메인에서도 쿠키 포함

fetch('https://example.com/data', {
  credentials: 'include' // 또는 'same-origin'
})

📝 cache

cache 옵션은 동일한 URL에 요청할 때 캐시된 데이터를 사용할지 여부를 설정합니다.

no-cache : 캐시 사용하지 않음
reload : 서버에서 새로 데이터를 받아옴
no-store : 캐시에 저장하지 않고 항상 새로 요청

fetch('https://example.com/data', {
  cache: 'no-cache' // 또는 'reload', 'no-store'
})

📝 redirect

redirect 옵션은 리디렉션 응답을 따를지 여부를 설정합니다.

follow : 리디렉션을 따름
manual : 리디렉션을 따르지 않음 (필요에 따라 직접 처리 가능)

fetch('https://example.com/data', {
  redirect: 'follow' // 또는 'manual'
})

🔎 Fetch 응답 속성(response)

1️⃣ 응답 정보 확인

status
statusText
ok
headers
url
redirected

2️⃣ 응답 데이터 변환

json()
text()
blob()

1️⃣ 응답 정보 확인

Fetch의 응답을 받은 후 .then( response => ) 응답 객체에서 정보를 확인할 수 있습니다.

response 객체 속성	설명
status	HTTP 상태 코드 ➡️ 200은 성공, 404는 찾을 수 없음
statusText	상태 코드 설명 ➡️ OK, Not Found
ok	상태 코드가 성공(200~299) 사이일 경우 true 그렇지 않으면 false ➡ true, false
headers	서버에서 추가로 보낸 헤더 정보
url	Fetch 요청한 경로 URL
redirected	리디렉션이 발생했는지 여부 확인 ➡️ true, false

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    // HTTP 상태 코드 확인
    console.log('Status:', response.status); // 예: 200 (성공), 404 (찾을 수 없음)
    
    // 상태 코드에 대한 설명 확인
    console.log('Status Text:', response.statusText); // 예: OK, Not Found
    
    // 상태 코드가 성공(200~299)인지 확인
    console.log('OK:', response.ok); // 성공이면 true, 실패면 false
    
    // 서버에서 추가로 보내온 헤더 정보 확인
    console.log('Headers:', response.headers.get('Content-Type')); // 예: application/json
    
    // 요청한 경로 URL 확인
    console.log('URL:', response.url);
    
    // 리디렉션 여부 확인
    console.log('Redirected:', response.redirected); // 리디렉션 발생 시 true, 아니면 false

    // JSON 형식으로 응답 데이터 변환 후 출력
    return response.json();
  })
  .then(data => {
    console.log('Response Data:', data); // 변환된 JSON 데이터 출력
  })
  .catch(error => {
    console.error('Fetch Error:', error); // 오류 발생 시 출력
  });

2️⃣ 응답 데이터 변환

응답 데이터를 JSON, 텍스트, 파일 형식으로 변환할 수 있습니다.

.then( response => response.json() ) 형태로 사용합니다.

response 데이터 변환 메서드	설명
json()	데이터를 JSON 형식 변환
text()	데이터를 텍스트 형식 변환
blob()	데이터를 파일 객체(Blob) 형식 변환

📝 json()

서버에서 JSON 형식의 데이터를 받아올 때 사용합니다.

response.json()은 응답 데이터를 JSON 형식으로 변환하여 객체 형태로 반환합니다.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // JSON 형식으로 변환
  .then(data => console.log('JSON Data:', data))
  .catch(error => console.error('Error:', error));

📝 text()

서버에서 일반 텍스트나 HTML 문자열을 받아올 때 사용합니다.

response.text()는 응답 데이터를 문자열로 변환하여 반환합니다.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.text()) // 텍스트 형식으로 변환
  .then(data => console.log('Text Data:', data))
  .catch(error => console.error('Error:', error));

➕ 서버 텍스트 데이터를 JSON으로 변환

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.text()) // 1. 응답을 텍스트 형식으로 변환
  .then(data => JSON.parse(data))    // 2. 텍스트를 JSON 객체로 변환
  .then(data => console.log(data));  // 3. 변환된 JSON 객체를 콘솔에 출력

📝 blob()

이미지나 PDF 같은 파일을 받아올 때 사용합니다.

response.blob()은 응답 데이터를 파일 객체(Blob)로 변환하며,

이미지, PDF 등 파일 데이터를 화면에 표시하거나 다운로드할 때 사용됩니다.

// ▶ 이미지 화면 표시
fetch('https://cdn.pixabay.com/photo/2022/02/13/17/24/rabbit-7011660_1280.jpg')
  .then(response => response.blob()) // 파일 객체(Blob) 형식으로 변환
  .then(blob => {
    // 이미지 URL을 생성하여 화면에 표시
    const imgUrl = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img); // 이미지 화면에 표시
  })
  .catch(error => console.error('Error:', error));

➕ 영상 다운로드

// ▶ 영상 다운로드
fetch('https://v.redd.it/8d899w7y6n0e1/DASH_480.mp4?source=fallback')
    .then(response => response.blob()) // 파일(blob) 형식으로 변환
    .then(blob => {
        // 파일 다운로드 
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4'; // 저장할 파일명 설정
        a.click();
        
        // 메모리 해제
        URL.revokeObjectURL(url);
    })
    .catch(error => console.error('Error:', error));

➕ 버튼 클릭 시 영상 다운로드

<button id="downloadBtn">영상 다운로드</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', () => {
    fetch('https://v.redd.it/8d899w7y6n0e1/DASH_480.mp4?source=fallback')
        .then(response => response.blob()) // 파일(blob) 형식으로 변환
        .then(blob => {
            // 파일 다운로드
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'video.mp4'; // 저장할 파일명 설정
            a.click();
            
            // 메모리 해제
            URL.revokeObjectURL(url);
        })
        .catch(error => console.error('Error:', error));
});
</script>

728x90

저작자표시

'📌 Front End > └ JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 라이브러리 모음(CDN) - CryptoJS, Dropzone, SweetAlert2, Swiper, Chart.js, interact.js (4)	2024.11.15
[JavaScript] 프록시(Proxy) 객체, 핸들러 메서드 - 객체 보호, 함수 호출 제어, 생성자 제어, 값 제한, 읽기 전용 (0)	2024.11.13
[JavaScript] 자바스크립트 구조 분해 할당 (0)	2024.09.04
[JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() (1)	2024.08.22
[JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 (0)	2024.08.21

사용자 중심의 서비스를 만들 때까지 🐇

[JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성

📌 AJAX(Asynchronous JavaScript and XML)

🔎 HTTP 서버 요청 메서드 종류(CRUD)

📌 Fetch 란?

Fetch 장점

Fetch 단점

📌 Fetch 사용법과 옵션 설명

📝 Fetch 기본 형태

🔎 Fetch 요청 옵션(options)

📝 method

📝 headers

📝 body

📝 mode

📝 credentials

📝 cache

📝 redirect

🔎 Fetch 응답 속성(response)

1️⃣ 응답 정보 확인

2️⃣ 응답 데이터 변환

1️⃣ 응답 정보 확인

2️⃣ 응답 데이터 변환

📝 json()

📝 text()

📝 blob()

'📌 Front End > └ JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성

📌 AJAX(Asynchronous JavaScript and XML)

🔎 HTTP 서버 요청 메서드 종류(CRUD)

📌 Fetch 란?

Fetch 장점

Fetch 단점

📌 Fetch 사용법과 옵션 설명

📝 Fetch 기본 형태

🔎 Fetch 요청 옵션(options)

📝 method

📝 headers

📝 body

📝 mode

📝 credentials

📝 cache

📝 redirect

🔎 Fetch 응답 속성(response)

1️⃣ 응답 정보 확인

2️⃣ 응답 데이터 변환

1️⃣ 응답 정보 확인

2️⃣ 응답 데이터 변환

📝 json()

📝 text()

📝 blob()

'📌 Front End > └ JavaScript' 카테고리의 다른 글

관련글

티스토리툴바