Fetch API란?
Fetch API는 브라우저에서 서버와 데이터를 주고받기 위한 최신 웹 기술이다.
ex) 웹사이트(프론트엔드) → 서버(백엔드)로 데이터를 요청하고 응답을 받는 기능!
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json()) // 응답을 JSON으로 변환
.then(data => console.log(data)) // 변환된 데이터 출력
.catch(error => console.error("에러 발생:", error)); // 오류 처리
Fetch API를 사용하면 HTTP 요청을 보낼 수 있다.
결과
[
{ "userId": 1, "id": 1, "title": "Hello World", "body": "..." },
{ "userId": 1, "id": 2, "title": "Second Post", "body": "..." }
]json으로 변환된 값을 볼 수 있다.
- 궁금한 점
왜 응답을 json으로 변환하는 거지?
response.json()을 사용하는 이유는 서버에서 받은 응답(Response)이 "문자열"이기 때문이야!
💡 변환 전 (서버에서 받은 원본 데이터)
"{ \"userId\": 1, \"id\": 1, \"title\": \"Hello World\" }" // JSON 문자열 (텍스트)➡ JavaScript에서는 이걸 바로 사용할 수 없어!
💡 변환 후 (response.json())
{ userId: 1, id: 1, title: "Hello World" } // JavaScript 객체➡ 이제 data.title처럼 속성에 바로 접근 가능! 🚀
📌 간단한 비교
| 변환 전 (JSON 문자열) | 변환 후 (JavaScript 객체) |
|---|---|
"{"name": "Alice"}" | { name: "Alice" } |
"{"age": 25}" | { age: 25 } |
💡 즉, response.json()을 써야 JSON 데이터를 쉽게 다룰 수 있다!! 😊
get, post, put, delete 같은 http 요청 방식을 지원합니다!!
get 요청으로 데이터를 가져오자!!
fetch("https://jsonplaceholder.typicode.com/posts/1") // 특정 게시글(id=1) 요청
.then(response => response.json())
.then(data => console.log(data));
http요청을 보내면 서버에서 데이터를 보내준다. 보내준 데이터를 json으로 변환!
post 요청으로 데이터를 추가하자!!
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST", // 데이터를 추가하는 요청
headers: {
"Content-Type": "application/json" // JSON 형식으로 보낸다고 명시
},
body: JSON.stringify({
title: "새로운 게시글",
body: "이 게시글은 Fetch API로 추가됨!",
userId: 1
}) // JSON 데이터를 문자열로 변환
})
.then(response => response.json())
.then(data => console.log("추가된 데이터:", data));
서버에 데이터를 저장할 때 사용! (body에 데이터를 넣어 전송)
- 궁금한 점
json방식으로 데이터를 보낸다고 헤더에 명시해 놨는데 왜 json 데이터를 문자열로 변환하는거지?
JSON 데이터를 문자열로 변환하는 이유는?
✅ body에 넣을 데이터는 반드시 "문자열"이어야 하기 때문이야!
✅ JavaScript 객체 → JSON 문자열로 변환해야 서버가 올바르게 해석할 수 있어
📌 JSON.stringify()가 필요한 이유
(1) 변환하지 않고 보낸다면? ❌ 오류 발생!
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: {
title: "새로운 게시글",
body: "이 게시글은 Fetch API로 추가됨!",
userId: 1
} // 객체 그대로 보냄 ❌ (문자열이 아님)
})🚨 오류 발생! → TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.
💡 이유? fetch()의 body는 문자열이어야 하는데, 객체를 넣었기 때문!
(2) JSON.stringify()로 변환 후 보낸다면? ✅ 정상 동작!
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
title: "새로운 게시글",
body: "이 게시글은 Fetch API로 추가됨!",
userId: 1
}) // 객체 → JSON 문자열로 변환 ✅
})✅ 정상 요청!
📌 JSON.stringify()의 역할
| 변환 전 (JavaScript 객체) | 변환 후 (JSON.stringify()) |
|---|---|
{ title: "Hello" } | "{"title":"Hello"}" |
{ age: 25 } | "{"age":25}" |
💡 즉, JSON.stringify()를 사용해야 Fetch가 JSON 데이터를 정상적으로 보낼 수 있어! 🚀
put 요청으로 데이터를 수정하자!!
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT", // 데이터를 수정하는 요청
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "수정된 제목",
body: "이 게시글이 수정됨!",
userId: 1
})
})
.then(response => response.json())
.then(data => console.log("수정된 데이터:", data));
서버의 기존 데이터를 수정할 때 사용! (id=1인 게시글을 수정)
- 궁금한 점
json 방식 말고 다른 방식으로 보내는 방법은 무엇이 있을까?
delete 요청으로 데이터를 삭제하자!!
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "DELETE" // 데이터를 삭제하는 요청
})
.then(response => console.log("삭제 완료!"));
서버에서 특정 데이터를 삭제할 때 사용! (id=1인 게시글 삭제)
- 궁금한 점
fetch api, rest api, fast api 등등 각각 차이점이 뭐지??
🚀 Fetch API, REST API, FastAPI 차이점 쉽게 이해하기!
1️⃣ Fetch API (프론트엔드에서 서버와 통신하는 방법)
✅ 브라우저에서 서버에 HTTP 요청을 보낼 때 사용하는 JavaScript 함수!
✅ REST API와 통신할 때 자주 사용됨!
💡 예제 (GET 요청)
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data));2️⃣ REST API (서버에서 데이터를 주고받는 방식, 규칙)
✅ 웹에서 데이터를 주고받기 위한 "규칙" (HTTP 요청 방식: GET, POST, PUT, DELETE 사용)
✅ 서버와 클라이언트가 통신하는 "표준" 방식
3️⃣ FastAPI (백엔드 웹 서버 프레임워크, Python)
✅ Python 기반의 초고속 웹 API 서버 프레임워크! (Flask보다 빠름 🚀)
✅ REST API를 쉽게 만들 수 있음
💡 예제 (FastAPI로 REST API 만들기)
from fastapi import FastAPI
app = FastAPI()
@app.get("/users")
def get_users():
return [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]➡ FastAPI로 만든 API는 Fetch API로 호출 가능!
🚀 한 줄 정리!
| 개념 | 역할 | 주요 사용처 |
|---|---|---|
| Fetch API | 프론트엔드에서 HTTP 요청 보내는 방법 | 클라이언트(JavaScript) |
| REST API | 서버와 클라이언트가 데이터를 주고받는 표준 방식 | 백엔드(Flask, FastAPI 등) |
| FastAPI | Python으로 REST API를 만드는 프레임워크 | 백엔드(Python) |
✔ Fetch API는 REST API를 요청할 때 사용!
✔ REST API는 서버와 클라이언트가 소통하는 방식!
✔ FastAPI는 REST API를 쉽게 만들 수 있는 Python 프레임워크! 🚀
headers
서버에 데이터를 보낼 때, "이 데이터는 어떤 형식이야!" 라고 알려줘야 해.
application/json → JSON 데이터를 보낼 때 사용
application/x-www-form-urlencoded → HTML 폼 데이터 전송 시 사용
- 궁금한 점
json 데이터를 보내야 되는 상황, html 폼 데이터를 보내야 하는 상황이 뭘까?
🚀 application/json vs application/x-www-form-urlencoded 언제 사용해야 할까?
💡 둘 다 데이터를 서버에 전송하는 방식이지만, 상황에 따라 적절한 방식을 선택해야 해!
✅ application/json → JSON 데이터를 보낼 때 (API 통신, 복잡한 데이터)
✔ REST API와 통신할 때 많이 사용됨
✔ 객체, 배열 등 복잡한 데이터 구조를 보낼 때 적합
✔ JavaScript에서 fetch() 또는 axios와 함께 사용
💡 예제 (사용자 회원가입 API 요청)
fetch("https://api.example.com/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: "Alice",
password: "1234",
email: "alice@example.com"
})
});✅ JSON은 객체 형태로 데이터를 주고받을 수 있어서 API 통신에 최적화됨!
✅ 모바일 앱, 웹 애플리케이션, 서버 간 통신 등에서 많이 사용됨
✅ application/x-www-form-urlencoded → HTML 폼 데이터를 보낼 때 (간단한 데이터, 기존 웹 폼)
✔ HTML <form> 태그로 데이터를 보낼 때 기본적으로 사용됨
✔ 데이터를 key=value&key2=value2 형식으로 변환하여 전송
✔ 브라우저에서 기존 방식으로 쉽게 처리 가능
💡 예제 (로그인 폼 데이터 전송)
<form action="/login" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>💡 예제 (Fetch API로 전송)
fetch("https://api.example.com/login", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: "username=Alice&password=1234"
});✅ 기존 HTML <form> 방식과 호환성이 높음
✅ 간단한 텍스트 데이터를 보낼 때 사용하면 좋음
🚀 정리: 언제 사용해야 할까?
| 상황 | application/json | application/x-www-form-urlencoded |
|---|---|---|
| REST API 요청 (로그인, 회원가입, 데이터 전송) | ✅ 적합 | ❌ 비효율적 |
HTML <form> 태그 사용 | ❌ 불편 | ✅ 적합 |
간단한 데이터 (username=Alice&password=1234) | ❌ 불편 | ✅ 적합 |
복잡한 데이터 ({user: {name: "Alice", age: 25}}) | ✅ 적합 | ❌ 비효율적 |
✔ API 요청 및 복잡한 데이터 전송 → application/json 사용
✔ 기존 HTML 폼 데이터 전송 → application/x-www-form-urlencoded 사용
CORS(다른 서버로 요청할 때 발생하는 문제)
만약 프론트엔드(http://localhost:3000)에서 백엔드(http://localhost:5000)로 요청하면?
Access to fetch at 'http://localhost:5000/data' from origin 'http://localhost:3000'
has been blocked by CORS policy.
해결 방법: 백엔드(Flask)에서 CORS 허용 설정 추가
from flask_cors import CORS
CORS(app) # 모든 도메인에서 요청 허용
- 궁금한 점
왜 CORS에러가 발생하는 걸까?
🚀 CORS 오류가 발생하는 이유!
✅ CORS란?
CORS(Cross-Origin Resource Sharing)는 다른 도메인 간 요청을 보낼 때 보안을 위해 제한하는 정책이야.
즉, "내가 A 사이트에서 B 서버로 데이터를 요청할 때, B 서버에서 허용해줘야만 정상적으로 요청할 수 있어!"
✅ CORS 오류가 발생하는 이유
✔ 프론트엔드(클라이언트)와 백엔드(서버)의 도메인이 다르면 브라우저가 보안상 차단!
✔ 브라우저는 보안을 위해 기본적으로 다른 도메인에서 오는 요청을 차단!
✅ CORS 오류 해결 방법 (서버에서 허용)
💡 해결 방법: 백엔드에서 CORS를 허용해야 함!
📌 (1) Flask에서 CORS 해결하기
from flask import Flask, jsonify
from flask_cors import CORS # CORS 해결 라이브러리
app = Flask(__name__)
CORS(app) # 모든 요청 허용
@app.route("/data")
def get_data():
return jsonify({"message": "Hello, world!"})
app.run(debug=True)✔ CORS(app) 추가하면 모든 도메인에서 API 요청 가능! 🚀
📌 (2) FastAPI에서 CORS 해결하기
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 모든 도메인 허용
allow_credentials=True,
allow_methods=["*"], # 모든 HTTP 메서드 허용 (GET, POST 등)
allow_headers=["*"] # 모든 헤더 허용
)
@app.get("/data")
def get_data():
return {"message": "Hello, world!"}✔ FastAPI에서는 CORSMiddleware를 사용하면 해결 가능!
🚀 정리
| CORS 오류 발생 원인 | 해결 방법 |
|---|---|
다른 도메인에서 요청 (예: localhost:3000 → localhost:5000) | 백엔드에서 CORS 설정 추가! (CORS(app), CORSMiddleware) |
| 백엔드가 CORS 응답 헤더를 포함하지 않음 | Access-Control-Allow-Origin: * 설정 추가 |
| 브라우저가 보안 정책으로 차단 | 서버에서 요청을 허용해야만 해결 가능 |
✔ CORS는 브라우저 보안 정책!
✔ 백엔드에서 CORS 허용 설정을 추가하면 정상 동작! 🚀
