네트워크 요청

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