- 터보링크를 사용하여 자바스크립트 앱의 로딩 화면 구현하기

09 Nov 2023

javascript

웹 애플리케이션을 개발할 때, 사용자들이 초기 로딩 시간 동안 기다리는 동안 로딩 화면을 제공하는 것은 좋은 사용자 경험을 제공하는 방법 중 하나입니다. 이러한 로딩 화면을 구현하기 위해 터보링크(Turbolinks)를 사용할 수 있습니다.

터보링크는 Ruby on Rails에서 시작된 기술로, 자바스크립트를 사용하여 페이지 간 전환을 더 빠르고 부드럽게 만들어줍니다. 터보링크를 사용하면 페이지의 일부 내용만 업데이트되고 전체 페이지를 다시 로드하지 않기 때문에 로딩 시간을 크게 줄일 수 있습니다.

터보링크를 사용하여 자바스크립트 앱의 로딩 화면을 구현하는 방법은 다음과 같습니다:

1. 터보링크 라이브러리 설치하기

먼저, 프로젝트에 터보링크 라이브러리를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 필요한 패키지를 설치할 수 있습니다:

npm install turbolinks

2. 로딩 화면 디자인하기

로딩 화면을 디자인하기 위해 HTML과 CSS를 사용할 수 있습니다. 다음은 예시 로딩 화면의 HTML과 CSS 코드입니다:

<div id="loading-screen">
  <div class="spinner"></div>
  <p>Loading...</p>
</div>

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #333;
  border-top-color: #fff;
  animation: spin 0.8s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. 자바스크립트 코드 작성하기

로딩 화면을 표시하기 위해 자바스크립트 코드를 작성해야 합니다. 터보링크는 페이지 간 전환을 관리하는 역할을 하므로, 페이지 간 전환 시 로딩 화면을 표시하고 숨기는 코드를 작성할 수 있습니다. 다음은 예시 코드입니다:

document.addEventListener('turbolinks:request-start', function() {
  showLoadingScreen();
});

document.addEventListener('turbolinks:load', function() {
  hideLoadingScreen();
});

function showLoadingScreen() {
  document.getElementById('loading-screen').style.display = 'flex';
}

function hideLoadingScreen() {
  document.getElementById('loading-screen').style.display = 'none';
}

위 코드는 turbolinks:request-start 이벤트가 발생할 때 showLoadingScreen 함수를 호출하여 로딩 화면을 표시하고, turbolinks:load 이벤트가 발생할 때 hideLoadingScreen 함수를 호출하여 로딩 화면을 숨깁니다.

4. 터보링크 초기화하기

마지막으로, 앱의 자바스크립트 파일에서 터보링크를 초기화해야 합니다. 다음과 같이 호출하여 터보링크를 시작할 수 있습니다:

import Turbolinks from 'turbolinks';
Turbolinks.start();

이제 앱을 실행하고 페이지 간 전환을 테스트하면, 터보링크를 사용하여 로딩 화면이 표시됩니다. 원하는 경우 CSS 코드를 수정하여 로딩 화면의 디자인을 변경할 수 있습니다.

터보링크를 사용하여 자바스크립트 앱의 로딩 화면을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자들에게 부드러운 화면 전환과 짧은 로딩 시간을 제공할 수 있습니다.

레퍼런스:

터보링크 공식 문서: https://github.com/turbolinks/turbolinks

해시태그:

#자바스크립트 #로딩화면