- 자바스크립트 Turbolinks를 이용한 책 추천 애플리케이션 개발하기

09 Nov 2023

javascript

이번 포스트에서는 자바스크립트의 라이브러리인 Turbolinks를 이용하여 책 추천 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

Turbolinks란?

Turbolinks는 웹 애플리케이션의 성능을 향상시키기 위해 개발된 라이브러리입니다. 이 라이브러리를 사용하면 전체 페이지를 새로고침하지 않고도 내비게이션을 처리할 수 있으며, 페이지 간 전환 속도를 크게 향상시킬 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

프로젝트 설정하기

우선, 해당 프로젝트를 위해 새로운 디렉토리를 만들고 초기 설정을 해야 합니다. 아래의 명령어를 실행하여 프로젝트를 설정합니다.

mkdir book-recommendation-app
cd book-recommendation-app
npm init -y

이제 프로젝트 디렉토리로 이동한 후 아래의 명령어를 실행하여 Turbolinks를 설치합니다.

npm install turbolinks

애플리케이션 개발하기

이제 Turbolinks를 이용한 책 추천 애플리케이션을 개발해보겠습니다. 먼저, index.html 파일을 생성하고 아래의 코드를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Recommendation</title>
  <script src="node_modules/turbolinks/dist/turbolinks.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <h1>Welcome to Book Recommendation App</h1>
  <!-- 책 추천 내용을 보여줄 곳 -->
  <div id="recommendation"></div>
  <a href="/recommendation">추천 목록 보기</a>
</body>
</html>

위의 코드에서는 Turbolinks를 불러오는 <script> 태그와 우리가 작성할 JavaScript 파일인 app.js를 불러오는 <script> 태그를 추가하였습니다.

이제 app.js 파일을 생성하고 아래의 코드를 작성합니다.

document.addEventListener("turbolinks:load", function() {
  // 페이지가 로드될 때마다 실행되는 함수
  var recommendation = document.getElementById("recommendation");
  recommendation.innerText = "여기에 책 추천 내용이 표시됩니다.";
});

위의 코드는 페이지가 로드될 때마다 recommendation이라는 id를 가진 요소에 텍스트를 넣어주는 기능을 구현한 것입니다.

애플리케이션 실행 및 테스트

모든 개발이 완료되었으니 이제 애플리케이션을 실행하고 테스트해봅시다. 아래의 명령어를 실행하여 애플리케이션을 실행합니다.

npx http-server

웹 브라우저에서 localhost:8080으로 접속하면 책 추천 애플리케이션을 확인할 수 있습니다.

페이지를 여러 번 이동하며 Turbolinks가 어떻게 작동하는지 확인해보세요.

마무리

이번 포스트에서는 자바스크립트 Turbolinks를 이용하여 책 추천 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Turbolinks를 사용하면 페이지 간 전환 속도를 향상시킬 수 있으며, 사용자 경험을 개선할 수 있습니다.

더 자세한 내용은 Turbolinks 공식 문서를 참고해주세요.

#javascript #webdevelopment