Svelte는 최근 프론트엔드 개발에서 주목받고 있는 프레임워크 중 하나로, React나 Vue.js와 같은 다른 프레임워크에 비해 더 간결하고 빠른 성능을 자랑합니다. 이번 포스트에서는 Svelte를 사용하여 실시간 날씨 앱을 만드는 간단한 미니 프로젝트를 통해 Svelte의 기본적인 사용법과 API 통신 방법에 대해 알아보겠습니다.

프로젝트 준비하기

먼저 Svelte 프로젝트를 설정하기 위해 Node.js가 설치되어 있어야 합니다. 설치가 완료되었다면, 아래의 명령어를 통해 새로운 Svelte 프로젝트를 생성할 수 있습니다.

npx degit sveltejs/template svelte-weather-app
cd svelte-weather-app
npm install

이제 기본적인 Svelte 프로젝트 구조가 생성되었습니다. src 폴더 내의 App.svelte 파일을 수정하여 앱의 기초를 작성해 보겠습니다.

OpenWeatherMap API 사용하기

날씨 정보를 가져오기 위해 OpenWeatherMap API를 사용할 것입니다. 무료 사용을 위해 API 키를 발급받아야 합니다. OpenWeatherMap 사이트에 가입한 후 API 키를 생성하고 이를 아래의 코드에 추가합니다.

앱 구성하기

App.svelte 파일을 열고 다음과 같이 수정해보겠습니다. 
<script>
  let city = 'Seoul';
  let weatherData = null;
  let error = null;
  const apiKey = 'YOUR_API_KEY'; // 여기서 YOUR_API_KEY를 발급받은 키로 바꿉니다.

  async function fetchWeather() {
    try {
      const response = await fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric);
      if (!response.ok) throw new Error('날씨 정보를 불러오는 데 실패했습니다.');

      weatherData = await response.json();
      error = null;
    } catch (err) {
      error = err.message;
      weatherData = null;
    }
  }

  // 앱이 로드될 때 기본 도시 날씨를 가져옵니다.
  fetchWeather();
</script>

<main>
  <h1>실시간 날씨 앱</h1>
  <input type="text" bind:value={city} placeholder="도시 이름 입력" />
  <button on:click={fetchWeather}>날씨 조회</button>

  {#if error}
    <p style="color: red;">{error}</p>
  {:else if weatherData}
    <h2>{weatherData.name}의 날씨</h2>
    <p>온도: {weatherData.main.temp} °C</p>
    <p>상태: {weatherData.weather[0].description}</p>
    <p>습도: {weatherData.main.humidity} %</p>
  {/if}
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
  }
  input {
    padding: 0.5rem;
    font-size: 1rem;
  }
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    margin-left: 0.5rem;
  }
</style>

위 코드는 실시간 날씨 앱의 기본 구조를 설정합니다. 사용자가 입력한 도시 이름에 대한 날씨 정보를 API를 통해 가져오고, 그 결과를 화면에 표시합니다.

코드 설명

  • HTML: 기본적인 HTML 구조를 만들고 사용자로부터 도시 이름을 입력받기 위한 입력 필드와 버튼을 추가했습니다.
  • JavaScript: OpenWeatherMap API에 요청을 보내는 fetchWeather 함수를 정의하였고, 에러 핸들링을 통해 사용자에게 보다 친절한 피드백을 제공합니다.
  • Svelte의 리액티브 패턴: Svelte의 리액티브 문법을 사용하여 weatherData와 error 변수를 감시하고, 값 변경 시 자동으로 UI를 업데이트합니다.

앱 실행하기

앱을 실행하려면 다음 명령어를 입력합니다.

npm run dev

브라우저에서 http://localhost:5000을 열면 실시간 날씨 앱이 표시됩니다. 도시 이름을 입력하고 "날씨 조회" 버튼을 클릭하여 날씨 정보를 확인해 보세요.

마무리

이번 포스트에서는 Svelte를 활용하여 간단한 실시간 날씨 앱을 만드는 과정을 살펴보았습니다. Svelte의 직관적인 문법과 효율적인 데이터 관리 방식을 통해 프론트엔드 개발이 얼마나 간편해질 수 있는지를 경험하셨을 것입니다. 더 나아가 Svelte의 다른 기능들, 예를 들어 컴포넌트 간 데이터 공유, 애니메이션, 스토어 기능 등을 활용하여 더욱 발전된 앱을 만들어 볼 수 있습니다. Svelte를 활용하여 다양한 프로젝트에 도전해 보세요!