웹 사이트 테마 스위칭은 사용자에게 다양한 디자인 옵션을 제공하여 사용자 경험을 향상시키는 중요한 요소입니다. 자바스크립트 fetch API를 사용하면 동적으로 테마를 변경하고 사용자가 선택한 테마를 유지할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트 fetch API를 통해 웹 사이트 테마 스위칭을 구현하는 방법을 살펴보겠습니다.

Fetch API 소개

Fetch API는 웹 브라우저에서 네트워크 요청을 수행하는 자바스크립트 인터페이스입니다. 이 API를 사용하면 AJAX 요청과 같은 비동기적인 작업을 간편하게 처리할 수 있습니다. Fetch API는 새로운 네트워크 요청을 만들고 응답을 받을 수 있습니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터를 처리하는 코드
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 코드에서 fetch() 함수는 url 매개변수로 지정한 주소로 GET 요청을 보냅니다. 응답 객체는 Promise를 반환하고, response.json() 메서드를 통해 JSON 형식의 데이터를 추출할 수 있습니다.

웹 사이트 테마 스위칭 구현하기

웹 사이트 테마 스위칭을 위해선 먼저 테마에 대한 설정을 가지고 있는 JSON 파일이 필요합니다. 이 JSON 파일은 테마별로 다른 스타일 시트, 이미지 등의 리소스 경로를 제공합니다. 사용자가 원하는 테마를 선택하면 이 JSON 파일을 가져와 현재 페이지의 테마를 변경합니다.

다음은 간단한 테마 설정 JSON 파일의 예시입니다.

{
  "default": {
    "stylesheet": "default.css",
    "backgroundImage": "default.jpg"
  },
  "dark": {
    "stylesheet": "dark.css",
    "backgroundImage": "dark.jpg"
  },
  "light": {
    "stylesheet": "light.css",
    "backgroundImage": "light.jpg"
  }
}

위의 예시에서는 “default”, “dark”, “light”라는 세 가지 테마가 정의되어 있습니다. 각 테마에는 해당 테마에 적용할 스타일 시트와 배경 이미지의 경로가 포함되어 있습니다.

이제 자바스크립트 fetch API를 사용하여 테마 설정 JSON 파일을 가져와 현재 페이지의 테마를 변경하는 코드를 작성해보겠습니다.

const themeSelector = document.getElementById('theme-selector');

themeSelector.addEventListener('change', () => {
  const selectedTheme = themeSelector.value;

  fetch('themes.json')
    .then(response => response.json())
    .then(themes => {
      const theme = themes[selectedTheme];

      if (theme) {
        document.getElementById('stylesheet').href = theme.stylesheet;
        document.body.style.backgroundImage = `url(${theme.backgroundImage})`;
      }
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

위의 코드에서는 theme-selector라는 ID를 가진 셀렉트 박스의 change 이벤트를 감지하여 사용자가 선택한 테마를 가져옵니다. 테마 설정 JSON 파일을 가져온 후 사용자가 선택한 테마에 해당하는 스타일 시트와 배경 이미지의 경로를 가져와 현재 페이지의 테마를 변경합니다.

결론

자바스크립트 fetch API를 사용하면 웹 사이트 테마 스위칭을 간편하게 구현할 수 있습니다. 사용자가 선택한 테마에 대한 정보가 있는 JSON 파일을 가져와 적절한 리소스를 동적으로 로드하여 테마를 변경할 수 있습니다. 이를 통해 사용자에게 다양한 디자인 옵션을 제공하고 사용자 경험을 향상시킬 수 있습니다.