네트워크 요청
1. 네트워크 요청
- 네트워크 요청에 대해 알아봅시다.
- 네트워크 요청이란? 클라이언트가 서버에 데이터를 요청하거나 보내는 일련의 통신 과정을 말합니다.
2. Fetch API
- Fetch API는 JavaScript에서 네트워크 요청을 만들고 응답을 다루는 기능을 제공하는 기술입니다.
- 기존의 XMLHttpRequest 객체보다 더 간결하고 강력한 인터페이스를 제공하합니다.
- fetch 함수는 주로 다음과 같은 방식으로 사용합니다.
fetch('URL', {
method: 'POST', // method : 네트워크 요청의 종류
headers: { // headers : 서버에 부가적으로 전달할 정보를 넣음
Cookie: '',
},
body: { // body : 데이터를 실어 보내는 필드
name: '',
}
});
- 이 때, method 속성은 여러가지 메서드를 지정할 수 있습니다. 주요 메서드들은 다음과 같습니다.
- GET : 사이트 불러오기
- POST : 게시물 생성
- PUT : 게시물 수정
- DELETE : 게시물 삭제
- fetch( )함수를 사용하여 다음과 같은 방식으로 데이터를 불러오고 활용할 수 있습니다.
fetch('URL')
.then(async(response) => {
const data = await response.json();
// 결과 데이터 활용
});
Response {
status: 200,
ok: true
}
- 그러면 직접 실습해 봅시다. index.html과 main.js, sample.json에 다음과 같이 입력한 후, 실행해 줍니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
main.js
fetch("./sample.json").then(async (result) => {
console.log("result", result);
if (result.ok) {
const data = await result.json();
console.log(data);
}
});
sample.json
{
"date" : "2024-03-25T00:00:00+09:00"
}
결과
- 정상적으로 데이터를 불러왔음을 확인할 수 있습니다.
- 그러면, 이번엔 외부 URL에서 네트워크 요청을 해봅시다. main.js를 다음과 같이 입력한 후, 실행해 줍니다.
// 외부 url 불러오기
fetch("https://ohou.se")
.then((res) => {
console.log("success", res);
})
.catch((err) => {
console.log("error", err);
});
- 그러면 다음과 에러 메시지와 함께 같이 나오게 됩니다. 이러한 이유는 CORS 정책에 의해 막히게 된 것입니다.
- 여기서 CORS란? 다른 도메인의 사이트에 요청을 보낼 때, 미리 허용된 호스트가아니라면 요청을 거부하는 정책입니다.
- 허용된 호스트가 아니라면 CORS Error를, 맞다면 응답 헤더 Access-Control-Allow-Origin와 함께 정상 응답을 보냅니다.
3. 정리하며
- 지금까지 네트워크 요청에 대해 알아보았습니다.
- 네트워크 요청을 통해 시스템의 효율성을 향상시키고 성능을 최적화할 수 있으며, UX를 향상시키는 데 도움이 됩니다.
- 또한, 보안 측면에서도 중요한 역할을 하며 데이터의 안정성을 유지할 수 있습니다.
※ Git 주소
JavaScript-study/입문자를 위한 자바스크립트 실습/웹 프론트 언어로서 자바스크립트/6. 네트워크 요
Contribute to NewBean0312/JavaScript-study development by creating an account on GitHub.
github.com
'Front-End Study > JavaScript' 카테고리의 다른 글
| 웹 스토리지 (0) | 2024.03.25 |
|---|---|
| 쿠키 받아오기(Cookie) (0) | 2024.03.25 |
| 에러 핸들링(Error Handling) (0) | 2024.03.24 |
| 이벤트(Event) (0) | 2024.03.24 |
| 브라우저 객체 (0) | 2024.03.24 |
