자바스크립트 HTTP 메서드(GET, POST, PUT, DELETE 등)

10 Sep 2023

javascript

개요

HTTP 메서드는 클라이언트가 서버로 요청을 보낼 때 사용되는 메서드입니다. 이 메서드는 RESTful API와 웹 애플리케이션 개발에서 자주 사용됩니다. 이번 블로그 포스트에서는 자바스크립트를 이용하여 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하는 방법에 대해 알아보겠습니다.

GET 메서드

GET 메서드는 서버로부터 데이터를 조회하기 위해 사용됩니다. 이 메서드는 서버에 요청을 보내고, 서버는 요청에 해당하는 데이터를 응답으로 보내줍니다.

자바스크립트에서 GET 메서드를 사용하기 위해 fetch API를 사용할 수 있습니다. fetch API는 Promise를 반환하며, 쉽게 데이터를 가져올 수 있습니다. 아래는 GET 메서드를 사용하여 서버로부터 데이터를 가져오는 예제 코드입니다.

fetch('https://api.example.com/data', {
  method: 'GET',
})
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

POST 메서드

POST 메서드는 서버에 데이터를 생성하기 위해 사용됩니다. 이 메서드는 서버에 요청을 보내고, 서버는 요청에 포함된 데이터를 처리하여 새로운 리소스를 생성합니다.

자바스크립트에서 POST 메서드를 사용하기 위해서도 fetch API를 사용할 수 있습니다. 아래는 POST 메서드를 사용하여 데이터를 서버에 전송하는 예제 코드입니다.

const data = {
  name: 'John Doe',
  age: 25,
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리 로직
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

PUT 메서드

PUT 메서드는 서버의 리소스를 업데이트하기 위해 사용됩니다. 이 메서드는 서버에 요청을 보내고, 서버는 요청에 포함된 데이터로 리소스를 업데이트합니다.

자바스크립트에서 PUT 메서드를 사용하기 위해서는 업데이트하고자 하는 리소스의 식별자가 필요합니다. 아래는 PUT 메서드를 사용하여 데이터를 업데이트하는 예제 코드입니다.

const resourceId = '123';
const updatedData = {
  name: 'Jane Smith',
  age: 28,
};

fetch(`https://api.example.com/data/${resourceId}`, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(updatedData),
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리 로직
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

DELETE 메서드

DELETE 메서드는 서버의 리소스를 삭제하기 위해 사용됩니다. 이 메서드는 서버에 요청을 보내고, 서버는 요청에 해당하는 리소스를 삭제합니다.

자바스크립트에서 DELETE 메서드를 사용하기 위해서도 fetch API를 사용할 수 있습니다. 아래는 DELETE 메서드를 사용하여 데이터를 삭제하는 예제 코드입니다.

const resourceId = '123';

fetch(`https://api.example.com/data/${resourceId}`, {
  method: 'DELETE',
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리 로직
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

마무리

이번 블로그 포스트에서는 자바스크립트를 이용하여 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하는 방법에 대해 알아보았습니다. 이러한 HTTP 메서드를 활용하여 웹 애플리케이션을 개발하면, 서버와의 효율적인 통신이 가능해집니다. 다음에 또 다른 주제로 뵙겠습니다!