오늘은 자바스크립트를 사용하여 날씨 정보를 보여주는 애플리케이션을 개발해보려고 합니다. 이번에는 Turbolinks를 활용하여 페이지 전환을 더욱 빠르고 부드럽게 만들어 보겠습니다.

Turbolinks란?

Turbolinks는 웹 애플리케이션의 페이지 전환 속도를 향상시켜주는 자바스크립트 라이브러리입니다. 일반적으로 웹 애플리케이션은 링크를 클릭할 때마다 페이지를 다시 로드하는데, Turbolinks를 사용하면 페이지 로드 없이 원하는 부분만 업데이트할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

날씨 애플리케이션 개발하기

먼저, HTML 파일을 만들고 날씨 정보를 보여줄 컨테이너를 추가합니다.

<div id="weather-container">
  <h2>오늘의 날씨</h2>
  <p id="temperature"></p>
  <p id="description"></p>
</div>

다음으로, Turbolinks를 설치하고 초기화하는 작업을 진행합니다. Turbolinks는 npm을 통해 설치할 수 있습니다.

npm install turbolinks

Turbolinks를 불러온 후 초기화합니다.

import Turbolinks from "turbolinks"
Turbolinks.start()

이제 날씨 정보를 가져올 API를 호출하는 JavaScript 코드를 작성해보겠습니다. 이 예제에서는 OpenWeatherMap API를 사용하도록 하겠습니다.

const apiKey = "YOUR_API_KEY"
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=Seoul,kr&appid=${apiKey}`

document.addEventListener("turbolinks:load", (event) => {
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      const temperature = (data.main.temp - 273.15).toFixed(1)
      const description = data.weather[0].description

      document.getElementById("temperature").textContent = `${temperature}℃`
      document.getElementById("description").textContent = description
    })
})

위의 코드에서 YOUR_API_KEY 부분을 본인의 OpenWeatherMap API 키로 바꿔주세요. 이 코드는 Turbolinks가 페이지를 로드할 때마다 API를 호출하여 날씨 정보를 가져와 화면에 표시합니다.

마지막으로, CSS를 추가하여 화면을 꾸며줍니다.

#weather-container {
  text-align: center;
  margin-top: 50px;
}

#temperature {
  font-size: 24px;
  font-weight: bold;
}

#description {
  font-size: 18px;
}

이제 개발이 완료되었습니다. Turbolinks를 활용하여 빠르고 부드러운 페이지 전환을 경험할 수 있는 날씨 애플리케이션이 완성되었습니다.

마무리

이번 포스트에서는 자바스크립트 Turbolinks를 활용하여 날씨 애플리케이션을 개발하는 방법을 알아보았습니다. Turbolinks를 사용하면 페이지 전환이 빠르고 부드러워지므로 사용자에게 더 좋은 경험을 제공할 수 있습니다. 새로운 프로젝트에서 Turbolinks를 활용해보세요!

#JavaScript #Turbolinks