터보링크(Turbo Links)는 Ruby on Rails와 같은 웹 프레임워크에서 사용되는 기술로, 페이지 전환을 더 빠르게 만들어주는 동적 로딩 기능입니다. 이를 통해 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

자바스크립트 가계부 앱 만들기

이번 포스트에서는 터보링크를 사용하여 자바스크립트 기반의 가계부 앱에 추가 기능을 구현하는 방법을 알아보겠습니다.

1. 터보링크 설치하기

터보링크는 다양한 방법으로 설치할 수 있지만, 가장 일반적인 방법은 yarn이나 npm을 사용하여 설치하는 것입니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 터보링크를 설치합니다.

yarn add turbolinks
# 또는
npm install turbolinks

2. 터보링크 설정하기

터보링크를 프로젝트에 사용하기 위해선 초기 설정 작업이 필요합니다. 프로젝트의 자바스크립트 파일 중에서 터보링크를 적용하고자 하는 파일에 다음 코드를 추가합니다.

import Turbolinks from "turbolinks"
Turbolinks.start()

3. 가계부 앱에 터보링크 적용하기

이제 터보링크를 사용하여 가계부 앱에 추가 기능을 구현해 보겠습니다. 예를 들어, 사용자가 새로운 거래 내역을 추가하고 싶다고 가정해봅시다. 이를 위해 다음과 같은 코드를 작성합니다.

document.addEventListener("turbo:submit-end", (event) => {
  if (event.target.id === "new-transaction-form") {
    // 새로운 거래 내역을 서버에 저장한 후, 페이지를 갱신합니다.
    Turbolinks.visit("/")
  }
})

위 코드에서는 turbo:submit-end 이벤트를 감지하여 사용자가 거래 내역을 추가하고 폼을 제출한 후에 실행됩니다. 이벤트 핸들러에서는 서버에 새로운 거래 내역을 저장한 후에 Turbolinks.visit("/")를 호출하여 페이지를 새로고침합니다. 이로써 사용자는 페이지가 새로고침되지 않고도 실시간으로 거래 내역을 확인할 수 있습니다.

마치며

이번 포스트에서는 터보링크를 사용하여 자바스크립트 기반의 가계부 앱에 추가 기능을 구현하는 방법을 알아보았습니다. 터보링크를 활용하면 페이지 전환을 빠르게 만들면서도 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 잘 활용해 보세요.

참고 자료:

• Turbolinks 공식 문서