자바스크립트 fetch API를 사용한 웹 애플리케이션 아키텍처 설계

10 Sep 2023

javascript

웹 애플리케이션을 개발하다 보면 서버로부터 데이터를 가져와야 하는 경우가 있습니다. 이때 자바스크립트에서는 fetch API를 사용하여 비동기적으로 데이터를 가져올 수 있습니다. 자바스크립트 fetch API는 HTTP 요청을 보내고 응답을 받는 기능을 제공하는 인터페이스입니다. 이를 활용하여 웹 애플리케이션의 아키텍처를 설계해 보겠습니다.

구성 요소

UI Layer
- 웹 페이지에 표시되는 사용자 인터페이스를 관리합니다.
- 사용자 입력을 받고, 데이터를 표시하는 등 UI와 상호작용합니다.
Service Layer
- fetch API를 사용하여 서버로부터 데이터를 가져옵니다.
- HTTP 요청을 보내고, 응답을 분석하여 UI Layer로 전달합니다.
Data Layer
- 서버로부터 받은 데이터를 저장하고 관리합니다.
- 필요에 따라 데이터를 가공하거나 필터링할 수 있습니다.
- Service Layer로부터 받은 데이터를 저장하거나 UI Layer로 전달합니다.

아키텍처 흐름

사용자는 웹 페이지에서 특정 동작(예: 버튼 클릭)을 수행합니다.
UI Layer는 사용자 입력을 감지하고 해당 동작을 처리하는 이벤트 핸들러를 호출합니다.

이벤트 핸들러는 Service Layer의 함수를 호출하여 데이터를 가져옵니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
    // Data Layer로 데이터 전달
  })
  .catch(error => {
    // 에러 처리 로직
    // UI Layer에 에러 메시지 전달
  });

Service Layer는 fetch API를 사용하여 서버에 HTTP 요청을 보냅니다.
서버는 요청을 받고, 필요한 처리를 수행한 뒤 응답을 보냅니다.
Service Layer는 받은 응답을 분석하여 JSON 형식으로 변환합니다.
변환된 데이터는 Data Layer로 전달되어 저장됩니다.
데이터 저장이 완료되면 Service Layer는 UI Layer로 데이터를 전달합니다.
UI Layer는 받은 데이터를 사용하여 웹 페이지를 업데이트합니다.

예제 코드

다음은 fetch API를 사용하여 데이터를 가져와서 화면에 표시하는 간단한 예제 코드입니다.

// UI Layer
const button = document.getElementById('fetchButton');

// Service Layer
function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      // Data Layer에 데이터 전달
      processData(data);
    })
    .catch(error => {
      // UI Layer에 에러 전달
      showError(error);
    });
}

// Data Layer
function processData(data) {
  // 데이터 처리 로직
  // UI Layer로 데이터 전달
  updateUI(data);
}

// UI Layer
function updateUI(data) {
  // 화면 업데이트 로직
  // 데이터를 사용하여 UI 업데이트
}

function showError(error) {
  // 에러 메시지 표시 로직
  // 에러 메시지를 사용하여 UI 업데이트
}

// UI Layer - 이벤트 핸들러 등록
button.addEventListener('click', () => {
  fetchData('https://api.example.com/data');
});

이 예제 코드는 UI Layer에서 ‘fetchButton’ ID를 가진 버튼 클릭 시 데이터를 가져오도록 설계되어 있습니다. 버튼 클릭 이벤트 핸들러는 fetchData 함수를 호출하고, 필요한 데이터를 받아와서 UI Layer를 업데이트합니다.