자바스크립트는 웹 애플리케이션에서 데이터를 서버로 전송하는 것이 필요한 경우가 많습니다. 이를 위해 사용자가 입력한 데이터나 애플리케이션에서 생성된 데이터를 서버로 보내야 합니다. 이를 위해 자바스크립트의 Fetch API를 사용할 수 있습니다.

Fetch API는 비동기 웹 요청을 수행하는 기능을 제공합니다. 이를 사용하면 서버에서 데이터를 가져오거나 데이터를 서버로 보낼 수 있습니다. Fetch API는 사용하기 간편하고 강력한 기능을 제공하기 때문에 많은 개발자들이 사용하고 있습니다.

Fetch API 기본 사용법

Fetch API를 사용하여 데이터를 전송하려면 fetch() 함수를 호출하고 전송할 데이터를 설정해야 합니다. 아래는 기본적인 Fetch API의 사용 예제입니다.

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 응답 데이터를 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 예제에서는 /api/data의 URL로 POST 요청을 보내고, Content-Type이 application/json인 헤더와 { key: 'value' }와 같은 JSON 형식의 데이터를 전송하고 있습니다. 전송이 완료되면 서버로부터 받은 응답 데이터를 처리하는 로직을 작성할 수 있습니다.

위 예제에서 fetch() 함수는 Promise를 반환합니다. 따라서 .then()을 사용하여 비동기 요청이 성공적으로 완료된 후에 실행할 코드를 작성할 수 있습니다. 또한, .catch()를 사용하여 에러 처리를 할 수 있습니다.

Fetch API 추가 설정

데이터 전송 이외에도 Fetch API를 사용하여 서버로 요청을 보낼 때 다양한 설정을 추가할 수 있습니다. 아래는 일부 추가 설정을 보여주는 예제입니다.

헤더 설정

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 응답 데이터를 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 예제에서는 Authorization 헤더를 추가로 설정하여 JWT 토큰을 서버로 전송하고 있습니다.

GET 요청

fetch('/api/data?param1=value1&param2=value2')
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 응답 데이터를 처리
  })
  .catch(error => {
    // 에러 처리
  });

위의 예제에서는 GET 요청을 보내고 URL에 쿼리 매개변수를 추가하여 서버로 전달하고 있습니다.

결론

자바스크립트 Fetch API를 사용하면 간편하게 데이터를 서버로 전송할 수 있습니다. Fetch API는 다양한 설정을 제공하여 요청을 커스터마이즈할 수 있고, Promise를 사용하여 비동기 요청의 처리를 용이하게 할 수 있습니다. 따라서 Fetch API를 적절히 활용하여 웹 애플리케이션에서 데이터 전송 기능을 구현할 수 있습니다.