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

09 Nov 2023

reactjs

지금은 날씨 정보를 실시간으로 확인할 수 있는 애플리케이션이 많이 개발되고 있는데, 이번에는 자바스크립트와 React.js를 사용하여 실시간 날씨 애플리케이션을 만들어보려고 합니다. 이 애플리케이션은 사용자의 위치 정보를 받아서 그에 해당하는 날씨 정보를 보여주는 기능을 가지고 있습니다.

프로젝트 설정

먼저, 프로젝트를 설정하기 위해 Create React App을 사용합니다. 다음 명령어를 사용하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app weather-app

프로젝트가 생성되면, 다음과 같은 폴더 구조를 가지게 됩니다:

weather-app
├── public
│   ├── index.html
│   └── ...
└── src
    ├── App.js
    └── ...

OpenWeatherMap API 사용하기

이 프로젝트에서는 OpenWeatherMap API를 사용하여 날씨 정보를 가져옵니다. 먼저, OpenWeatherMap 사이트에 가입하고 API 키를 발급받아야 합니다. 발급받은 API 키를 .env 파일에 저장합니다.

다음으로, axios 라이브러리를 사용하여 API 요청을 보내고 응답을 받아옵니다. 먼저, 다음 명령어를 사용하여 axios 라이브러리를 설치합니다.

npm install axios

이제 API 요청을 보내기 위해 App.js 파일에서 다음 코드를 추가합니다:

import axios from 'axios';

// API 요청 함수 정의
async function fetchWeatherData() {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const url = `https://api.openweathermap.org/data/2.5/weather?lat={latitude}&lon={longitude}&appid=${apiKey}`;
  
  const response = await axios.get(url);
  return response.data;
}

// API 요청 호출
fetchWeatherData().then(data => {
  console.log(data);
});

위 코드에서 {latitude}와 {longitude} 부분을 사용자의 위치 정보로 대체해야 합니다. 위치 정보를 얻기 위해 Geolocation API를 활용할 수 있습니다.

사용자 위치 정보 가져오기

사용자의 위치 정보를 가져오기 위해서는 먼저 사용자의 브라우저에서 위치 권한을 허용해야 합니다. 다음과 같이 navigator.geolocation.getCurrentPosition 함수를 사용하여 위치 정보를 얻어올 수 있습니다:

// 위치 정보 가져오기
function getGeolocation() {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    } else {
      reject(new Error('Geolocation is not supported by this browser.'));
    }
  });
}

위 코드에서 resolve 함수는 위치 정보를 성공적으로 가져올 경우 호출되고, reject 함수는 실패한 경우 호출됩니다. 이 함수를 사용하여 사용자의 위치 정보를 가져오고, 그에 해당하는 날씨 정보를 API로부터 가져올 수 있습니다.

날씨 정보 표시하기

날씨 정보를 가져오는 API 요청이 성공적으로 완료되면, 이제 날씨 정보를 화면에 표시할 수 있습니다. 이를 위해 App.js 파일에 다음과 같은 코드를 추가합니다:

import React, { useState, useEffect } from 'react';

function App() {
  const [weatherData, setWeatherData] = useState(null);
  
  useEffect(() => {
    fetchWeatherData().then(data => {
      setWeatherData(data);
    });
  }, []);
  
  return (
    <div className="App">
      {weatherData ? (
        <div>
          <h2>{weatherData.name}</h2>
          <p>Temperature: {weatherData.main.temp}</p>
          <p>Description: {weatherData.weather[0].description}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

위 코드에서 weatherData 상태를 사용하여 API로부터 가져온 날씨 정보를 저장합니다. useEffect 훅을 사용하여 컴포넌트가 렌더링될 때 한 번만 API 요청을 보냅니다.

프로젝트 실행

이제 프로젝트를 실행하여 실시간 날씨 애플리케이션을 확인할 수 있습니다. 다음 명령어를 사용하여 프로젝트를 실행합니다:

npm start

브라우저에서 http://localhost:3000에 접속하면 날씨 정보를 확인할 수 있습니다.

마무리

이번에는 자바스크립트와 React.js를 사용하여 실시간 날씨 애플리케이션을 만들어보았습니다. 개발자들은 이 애플리케이션을 기반으로 더 많은 기능을 추가하고, 사용자 경험을 개선할 수 있을 것입니다. 날씨 정보를 실시간으로 확인할 수 있는 애플리케이션은 더 많은 사람들에게 유용할 것이므로, 이러한 프로젝트를 통해 자바스크립트와 React.js에 대한 이해를 높이기를 바랍니다.

#날씨 #실시간