Colin's Blog
자바스크립트 fetch API를 사용한 크로스 플랫폼 앱 개발

이제는 웹 개발뿐만 아니라 크로스 플랫폼 앱 개발에서도 자바스크립트(fetch API)가 많이 사용되고 있습니다. fetch API는 네트워크 요청을 처리하고 응답을 받아오는 기능을 제공하며, 비동기 방식으로 데이터를 가져올 수 있습니다. 이를 활용하여 웹 애플리케이션과 모바일 앱, 데스크톱 앱 등 다양한 플랫폼에서 공통적으로 사용할 수 있는 앱을 개발할 수 있습니다.

fetch API를 사용하여 크로스 플랫폼 앱을 개발하는 방법에 대해 알아보겠습니다.

1. fetch API 기본 사용법

fetch API를 사용하여 데이터를 요청하려면 fetch 함수를 사용합니다. 아래는 간단한 GET 요청 예시입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 코드에서는 fetch 함수에 요청할 URL을 전달하고, then 메서드를 사용하여 응답을 처리합니다. 첫 번째 then 메서드 내에서는 응답을 JSON 형식으로 변환하여 결과를 출력하고, 두 번째 then 메서드는 에러가 발생한 경우 에러 메세지를 출력합니다.

2. POST 요청하기

POST 요청은 서버에 데이터를 전송하는 용도로 사용됩니다. fetch API를 사용하여 POST 요청을 보내려면 아래와 같이 fetch 함수 호출 시 method 옵션과 body 옵션을 설정해야 합니다.

fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예시에서는 method 옵션에 ‘POST’를 설정하고, body 옵션에 전송할 데이터를 JSON 형식으로 변환하여 전달하고 있습니다. 응답은 이전과 동일하게 처리됩니다.

3. 헤더 정보 설정하기

fetch API를 사용하면 요청 헤더에 다양한 정보를 추가할 수 있습니다. 예를 들어, 인증 토큰이나 사용자 에이전트 정보 등을 헤더에 추가하여 요청할 수 있습니다.

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer <token>',
    'User-Agent': 'Custom User Agent'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예시에서는 headers 객체를 사용하여 ‘Authorization’과 ‘User-Agent’ 헤더를 설정하고 있습니다. 필요한 헤더 정보를 추가하여 사용하면 됩니다.

4. 에러 처리하기

fetch API를 사용하다 보면 네트워크 에러나 HTTP 응답 에러 등이 발생할 수 있습니다. 이를 처리하기 위해 catch 메서드를 사용하여 에러를 처리할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 예시에서는 응답이 정상적이지 않은 경우 response.ok를 체크하여 에러를 처리하고 있습니다. 필요한 에러 처리 로직을 추가하면 됩니다.

마무리

자바스크립트 fetch API를 사용하여 크로스 플랫폼 앱을 개발하는 방법에 대해 알아보았습니다. fetch API를 활용하면 네트워크 요청을 쉽게 처리할 수 있으며, 이를 통해 다양한 플랫폼에서 동일한 로직으로 앱을 개발할 수 있습니다. 추가적으로, fetch API에는 다양한 옵션과 기능이 있으니 필요에 따라 공식 문서 등을 참고하여 활용해 보시기 바랍니다.

© 2018 Colin. All rights reserved.