- 터보링크를 사용하여 자바스크립트 앱에서의 페이지 전환 효과 구현하기

09 Nov 2023

웹 애플리케이션에서 페이지 전환 효과는 사용자 경험을 향상시키는 데 큰 영향을 미칩니다. 이러한 효과를 구현하기 위해 터보링크(Turbo Links)를 사용할 수 있습니다. 터보링크는 일반적인 페이지 전환을 변경하여 페이지의 부분만 업데이트하는 기술입니다.

터보링크란?

터보링크는 웹 애플리케이션에서 사용되는 클라이언트 측 렌더링 기술입니다. 이를 사용하면 페이지가 전환될 때 전체 페이지를 다시로드하지 않고 일부만 업데이트할 수 있습니다. 이를 통해 페이지 전환 속도가 빨라지고 사용자는 끊김 없이 애플리케이션을 사용할 수 있습니다.

터보링크 설치하기: 자바스크립트 앱에 터보링크를 설치해야 합니다. 터보링크는 turbo 패키지를 이용하여 설치할 수 있습니다. 다음 명령을 사용하여 패키지를 설치합니다:
```
 npm install @hotwired/turbo
```
터보링크 구성하기: 앱의 메인 자바스크립트 파일에서 터보링크를 구성해야 합니다. 다음과 같이 turbo 모듈을 가져와서 터보링크를 활성화시킬 수 있습니다:
```
 import { Turbo } from "@hotwired/turbo"

 Turbo.start()
```
링크에 터보 액션 추가하기: 페이지 전환에 터보링크를 사용하려면 링크에 터보 액션을 추가해야 합니다. 예를 들어, <a> 태그에 data-turbo-action="replace" 속성을 추가하면 해당 링크를 클릭할 때 터보링크가 페이지를 전환할 것입니다:
```
 <a href="/page2" data-turbo-action="replace">Page 2로 이동</a>
```
페이지 갱신하기: 터보링크는 페이지를 부분적으로 업데이트하므로, 페이지 갱신과 관련된 자바스크립트 코드도 수정해야 할 수 있습니다. 터보링크는 turbo:load 이벤트를 통해 업데이트된 내용을 처리할 수 있습니다:
```
 document.addEventListener("turbo:load", function() {
   // 업데이트된 페이지 내용 처리
 })
```

이렇게 터보링크를 사용하여 자바스크립트 앱에서 페이지 전환 효과를 구현할 수 있습니다. 빠른 페이지 로딩과 끊김 없는 사용자 경험을 제공하기 위해 터보링크를 고려해 보세요!

참고자료:

https://turbo.hotwired.dev/