웹페이지에서 데이터를 로딩할 때 사용자에게 로딩 상태를 표시하는 것은 좋은 사용자 경험을 제공하기 위해 중요합니다. JavaScript의 Promise를 활용하여 웹페이지 로딩 상태를 표시하는 기능을 구현해보겠습니다.

HTML 구조 설계

먼저, 로딩 상태를 표시할 HTML 요소를 구성해야 합니다. 예를 들어, 로딩 중인 동안에는 로딩 아이콘이나 메세지를 보여주는 <div> 요소를 추가할 수 있습니다.

<div id="loading-container">
  <i class="fas fa-spinner fa-spin"></i>
  <p>Loading...</p>
</div>

CSS 스타일링

HTML 요소에 스타일을 적용하여 로딩 상태를 시각적으로 표현할 수 있습니다. 아래는 예시로 사용할 CSS 스타일 코드입니다.

#loading-container {
  display: none;
  text-align: center;
  padding: 20px;
  background-color: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

#loading-container i {
  font-size: 40px;
}

#loading-container p {
  margin-top: 10px;
}

JavaScript 코드 구현

이제 JavaScript 코드를 구현하여 Promise를 사용하여 로딩 상태를 관리합니다. 아래는 예시로 사용할 JavaScript 코드입니다.

// 로딩 상태 표시용 HTML 요소를 선택합니다.
const loadingContainer = document.getElementById('loading-container');

// 로딩 상태를 관리하기 위한 Promise를 생성합니다.
const loadingPromise = new Promise((resolve, reject) => {
  // 데이터를 로딩하는 비동기 작업을 수행합니다.
  // 예시로 setTimeout 함수를 사용하여 3초 후에 로딩 완료(resolve)되도록 설정합니다.
  setTimeout(() => {
    resolve();
  }, 3000);
});

// 로딩 상태를 관리하는 함수를 정의합니다.
function showLoading() {
  loadingContainer.style.display = 'block';
}

function hideLoading() {
  loadingContainer.style.display = 'none';
}

// 로딩 상태를 표시하기 위해 Promise를 사용합니다.
showLoading();
loadingPromise.then(() => {
  hideLoading();
}).catch(() => {
  hideLoading();
});

동작 확인

위의 JavaScript 코드를 웹페이지에 추가하고, 웹페이지를 불러온 후 데이터 로딩 과정을 확인해보세요. 로딩 중간에는 “Loading…” 메세지와 로딩 아이콘이 표시되고, 로딩이 완료되면 표시된 로딩 상태 요소가 사라질 것입니다.

위의 예시는 setTimeout 함수를 통해 3초 후에 로딩이 완료되도록 설정되어 있습니다. 실제 데이터 로딩 과정을 구현할 때는 실제로 데이터를 요청하고 받아오는 비동기 작업을 Promise 안에 구현해야 합니다.

#webdevelopment #javascript