Colin's Blog
자바스크립트와 React.js를 활용한 실시간 날씨 애플리케이션 만들기

날씨 정보를 실시간으로 알려주는 웹 애플리케이션은 많은 사람들에게 유용하게 활용되어지고 있습니다. 이번에는 자바스크립트와 React.js를 활용하여 실시간 날씨 정보를 보여주는 애플리케이션을 만들어보고자 합니다. 이 프로젝트를 통해 자바스크립트와 React.js의 기본적인 사용법을 익히고, 외부 API와의 연동 방법도 배워볼 수 있습니다.

프로젝트 구성

프로젝트를 시작하기 전에 몇 가지 라이브러리와 도구를 설치해야 합니다. 이 프로젝트에서는 다음과 같은 도구를 사용합니다:

프로젝트를 생성하기 위해 다음 명령어를 실행해주세요:

$ npx create-react-app weather-app
$ cd weather-app

이제 프로젝트 폴더로 이동한 후에 필요한 라이브러리들을 설치합니다:

$ npm install axios

API 연동

OpenWeatherMap API를 사용하여 날씨 정보를 가져올 것입니다. 먼저 API 키를 발급받아야 합니다. OpenWeatherMap 웹사이트에 가입하고 키를 발급받으세요.

API 키를 사용하여 날씨 정보를 가져오는 함수를 작성합니다. 이 예제에서는 axios 라이브러리를 사용하여 HTTP 요청을 보냅니다. src 폴더 내부에 api.js 파일을 생성하고 다음과 같이 작성하세요:

import axios from 'axios';

const API_KEY = 'YOUR_API_KEY';

export const getWeatherData = async (city) => {
  try {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`
    );
    return response.data;
  } catch (error) {
    console.error('Error fetching weather data:', error);
    throw error;
  }
};

위 코드에서 YOUR_API_KEY를 발급받은 API 키로 대체해주세요.

날씨 정보 표시

이제 실시간 날씨 정보를 표시하는 React 컴포넌트를 작성해보겠습니다. src 폴더 내부에 Weather.js 파일을 생성하고 다음과 같이 작성하세요:

import React, { useEffect, useState } from 'react';
import { getWeatherData } from './api';

const Weather = () => {
  const [weatherData, setWeatherData] = useState(null);
  const [city, setCity] = useState('');

  useEffect(() => {
    // 초기 데이터 로딩
    fetchWeatherData('Seoul');
  }, []);

  const fetchWeatherData = async (city) => {
    try {
      const data = await getWeatherData(city);
      setWeatherData(data);
    } catch (error) {
      console.error('Error fetching weather data:', error);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    fetchWeatherData(city);
    setCity('');
  };

  return (
    <div>
      <h1>날씨 애플리케이션</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={city}
          onChange={(e) => setCity(e.target.value)}
          placeholder="도시를 입력하세요"
        />
        <button type="submit">검색</button>
      </form>

      {weatherData ? (
        <div>
          <h2>{weatherData.name}</h2>
          <p>{weatherData.weather[0].description}</p>
          <p>온도: {weatherData.main.temp}</p>
          <p>습도: {weatherData.main.humidity}</p>
        </div>
      ) : (
        <p>날씨 정보가 없습니다.</p>
      )}
    </div>
  );
};

export default Weather;

위 코드에서 사용자는 도시를 입력하여 해당 도시의 날씨 정보를 로드할 수 있습니다.

실행하기

이제 애플리케이션을 실행해보겠습니다. 프로젝트 폴더에서 다음 명령어를 실행하세요:

$ npm start

브라우저에서 http://localhost:3000로 이동하면 실시간 날씨 애플리케이션을 확인할 수 있습니다.

이번 포스트에서는 자바스크립트와 React.js를 활용하여 실시간 날씨 애플리케이션을 만드는 과정을 알아보았습니다. 프로젝트를 시작하기 위해 필요한 도구들을 설치하고, OpenWeatherMap API와의 연동 방법을 배웠습니다. 또한 날씨 정보를 표시하는 React 컴포넌트를 작성하고 실행하는 방법도 알아보았습니다. 이 프로젝트를 기반으로 실제 사용자들에게 유용한 기능들을 추가해볼 수도 있습니다. 한걸음 더 나아가서, 애플리케이션에서 다른 기상 정보들도 가져와보는 것도 좋은 아이디어일 것입니다.

Happy coding! #reactjs #javascript

© 2018 Colin. All rights reserved.