- 터보링크를 사용하여 자바스크립트 앱의 네비게이션 흐름 관리하기

09 Nov 2023

Turbolinks

자바스크립트로 개발된 웹 애플리케이션에서는 사용자가 여러 페이지를 이동할 때 네비게이션 흐름을 관리하는 것이 중요합니다. 일반적으로 링크를 클릭하거나, 뒤로 가기/앞으로 가기 버튼을 누르면 새로운 페이지가 로드됩니다. 이러한 흐름을 관리하려면 페이지 로드 시에 필요한 자원을 다시 내려받아야 하고, 현재 페이지의 상태를 유지해야 합니다.

이러한 문제를 해결하기 위해 터보링크(Turbo Links)라고 불리는 기술을 사용할 수 있습니다. 터보링크는 서버 측 웹 프레임워크와 클라이언트 측 자바스크립트를 함께 사용하여 네비게이션 흐름을 관리합니다.

터보링크를 사용하면 각 페이지 전환 시에 페이지 전체를 다시 렌더링할 필요가 없습니다. 대신 서버에서 변경된 내용과 함께 필요한 자원만을 가져옵니다. 이렇게 함으로써 네비게이션의 응답 속도를 크게 향상시킬 수 있습니다.

터보링크를 사용하는 방법은 매우 간단합니다. 우선 자바스크립트 파일을 로드한 후, 페이지가 로드될 때 터보링크를 활성화하면 됩니다.

<script src="turbo-links.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    TurboLinks.start();
  });
</script>

이제 애플리케이션에서 페이지를 전환할 때 터보링크가 동작합니다. 링크를 클릭하거나 뒤로 가기/앞으로 가기 버튼을 누를 때는 서버에서 변경된 내용과 함께 필요한 자원만을 가져옵니다. 그리고 변경된 내용만을 표시하여 페이지 전환이 매우 빠르게 이루어집니다.

터보링크를 사용함으로써 웹 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 이를 통해 페이지 전환 시간이 단축되고, 순간적인 화면 깜박임이 없어지므로 사용자들이 웹 애플리케이션을 더욱 자연스럽게 사용할 수 있습니다.

참고 자료