웹사이트를 운영하다보면 사용자가 원하는 테마로 전체적인 디자인을 변경할 수 있는 기능이 필요한 경우가 많습니다. 이번 포스트에서는 JavaScript의 Promise를 사용하여 웹사이트 테마 변경 기능을 개발하는 방법에 대해 소개하겠습니다.

Promise란?

Promise는 JavaScript에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 일반적으로 웹사이트에서 데이터를 불러오거나 서버로부터 데이터를 전송받는 작업을 말합니다. Promise를 사용하면 비동기 작업의 성공 또는 실패에 따라 처리해야 할 로직을 명확하게 분리하여 코드를 구성할 수 있습니다.

테마 변경 기능 구현

테마 변경 기능을 구현하기 위해서는 다음과 같은 단계를 거쳐야 합니다.

1. 사용자가 원하는 테마를 선택할 수 있는 UI를 제공합니다. 예를 들어, 드롭다운 메뉴 또는 라디오 버튼 등을 사용할 수 있습니다.

2. 사용자가 테마를 선택하면 선택한 테마의 CSS 파일을 비동기적으로 로드합니다. Promise를 사용하면 비동기적인 로드 작업을 간편하게 처리할 수 있습니다.

   function loadCSS(url) {
       return new Promise(function(resolve, reject) {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
           link.href = url;
   
           link.onload = function() {
               resolve();
           };
   
           link.onerror = function() {
               reject(new Error('CSS load error'));
           };
   
           document.head.appendChild(link);
       });
   }
   

   위의 코드는 URL로부터 CSS 파일을 로드하는 함수입니다. resolve 함수는 CSS 파일 로드가 성공적으로 완료되었음을 알립니다. reject 함수는 CSS 파일 로드 중 오류가 발생한 경우 오류를 전달합니다.

3. 테마 변경 시 기존에 설정된 테마를 제거하고 선택한 테마를 적용합니다. 이 과정에서 페이지의 전체적인 스타일이 변경됩니다.

   function changeTheme(theme) {
       const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
       linkElements.forEach(function(linkElement) {
           if (!linkElement.href.includes('default.css')) {
               document.head.removeChild(linkElement);
           }
       });
   
       loadCSS(theme.css).then(function() {
           // 테마 변경 완료 후 추가적인 로직을 처리할 수 있습니다.
       }).catch(function(error) {
           console.error(error);
       });
   }
   

   위의 코드는 선택한 테마로 변경하기 위해 이전에 로드된 테마 CSS 파일을 제거하는 함수와 선택한 테마 CSS 파일을 로드하는 함수가 포함되어 있습니다. 변경 완료 후 추가적인 로직을 처리하고 싶다면 then 메서드를 사용할 수 있습니다. 오류 처리는 catch 메서드로 처리합니다.

4. 사용자가 테마를 선택하면 changeTheme 함수를 호출하여 테마를 변경합니다.

   const themeSelector = document.getElementById('theme-selector');
   themeSelector.addEventListener('change', function() {
       const selectedTheme = themeSelector.value;
       changeTheme(selectedTheme);
   });
   

마무리

Promise를 사용하여 웹사이트 테마 변경 기능을 개발하는 방법에 대해 알아보았습니다. Promise를 사용하면 비동기 작업을 보다 효율적이고 명확하게 처리할 수 있습니다. 웹사이트를 개선하고 사용자 경험을 향상시키기 위해 테마 변경 기능을 도입해보세요.

#webdevelopment #javascript