프로젝트에 Open API 적용하기

실제 디자인 및 프로젝트 내 weather Component

 

서론

최근 프로젝트에서 외부 데이터를 활용해 동적인 사용자 경험을 제공하는 경우가 많아지고 있습니다. 특히, 날씨 API와 같은 Open API를 적용하면 실시간으로 유용한 정보를 제공할 수 있어 사용자 만족도를 높일 수 있습니다. 이번 포스팅에서는 React 프로젝트에 OpenWeather API를 적용하여 실시간 날씨 정보를 가져오는 컴포넌트를 구현하는 과정을 상세히 설명합니다.

 

서버와의 통신은 axios를 통해서 합니다. fetch보다 편리하며, 라이브러리 설치가 간편하여 axios를 활용합니다.

대략적인 준비과정입니다.

1. 프로젝트 준비

프로젝트 환경 설정은 아래와 같습니다.

#1. React 프로젝트 생성

 

#2. 필요 패키지 설치

 

#3. 프로젝트 폴더 구조

npx create-react-app my-app
cd my-app

npm install axios


/src
├── components
│   └── WeatherComponent.jsx
├── context
├── style
├── App.js
├── index.js
└── .env

 

2. OpenWeather API 키 발급받기

 

1. OpenWeather 공식 홈페이지에 접속해 계정을 생성합니다.

2. 대시보드에서 API 키를 확인합니다.

3. 해당 API 키를 .env 파일에 저장합니다.

 

3. .env 파일 생성 및 설정

 

프로젝트 루트 디렉토리에 .env 파일을 생성한 후 다음과 같이 작성합니다:

REACT_APP_WEATHER_API_KEY=YOUR_OWN_KEY

 

참고로 .env 파일은 보안상 중요한 파일이므로, .gitignore에 추가해 깃에 올라가지 않도록 하는게 권장됩니다.

 

4. WeatherComponent.jsx 구현

 

src/components/WeatherComponent.jsx 파일을 생성하고 다음과 같이 작성합니다.

이 파일에는 이제 해당하는 날씨 api를 연동하여 보여주는 UI/UX 부분입니다.

 

WeatherComponent.jsx 코드

 

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const weatherContainerStyle = css`
  background-color: white;
  color: #001f5c;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Noto Sans KR', sans-serif;

  .weather-header {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
  }

  .weather-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;

    .weather-icon {
      width: 50px;
      height: 50px;
    }

    .temperature {
      font-size: 2rem;
      font-weight: bold;
    }
  }

  .weather-details {
    margin-top: 10px;
    font-size: 0.9rem;
    opacity: 0.8;
  }
`;

const WeatherComponent = () => {
  const [weatherData, setWeatherData] = useState(null);
  const apiKey = process.env.REACT_APP_WEATHER_API_KEY;

  useEffect(() => {
    const fetchWeather = async () => {
      try {
        console.log('API 키:', apiKey);
        const response = await axios.get(
          `https://api.openweathermap.org/data/2.5/weather?q=Seoul&units=metric&appid=${apiKey}`
        );
        setWeatherData(response.data);
      } catch (error) {
        console.error('날씨 정보를 가져오는 데 실패했습니다:', error);
      }
    };
    fetchWeather();
  }, [apiKey]);

  if (!weatherData) {
    return <p>날씨 정보를 불러오는 중...</p>;
  }

  return (
    <div css={weatherContainerStyle}>
      <div className="weather-header">현재 날씨</div>
      <div className="weather-info">
        <img
          className="weather-icon"
          src={`http://openweathermap.org/img/wn/${weatherData.weather[0].icon}.png`}
          alt="날씨 아이콘"
        />
        <div className="temperature">{weatherData.main.temp}°C</div>
      </div>
      <div className="weather-details">
        <p>{weatherData.weather[0].description}</p>
        <p>습도: {weatherData.main.humidity}%</p>
        <p>풍속: {weatherData.wind.speed} m/s</p>
      </div>
    </div>
  );
};

export default WeatherComponent;

 

5. 주요 코드 설명

• useState 및 useEffect 훅을 사용해 상태 관리 및 API 호출 처리.

• axios 라이브러리로 API 호출을 비동기 처리.

• .env에 저장된 API 키를 process.env.REACT_APP_WEATHER_API_KEY로 가져옵니다.

• 날씨 데이터를 불러오기 전에 로딩 메시지를 표시하며, 데이터가 로드되면 해당 데이터를 표시합니다.

 

 

참고로, 로딩되는데 약간의 시간격차가 발생할수 있는데, 이때 정보 불러오는 중.. 이라는 UI/UX를 추가하면 사용자 입장에서의 어느정도 불편감을 줄일 수 있겠습니다.

 

6. WeatherComponent 사용하기

 

src/App.js에서 WeatherComponent를 import하여 사용합니다.

 

적극적인 컴포넌트 분리로 하나의 Page 파일안에 넣어도 좋은 방법일 것 같습니다.

import React from 'react';
import WeatherComponent from './components/WeatherComponent';

function App() {
  return (
    <div className="App">
      <WeatherComponent />
    </div>
  );
}

export default App;

 

7. 테스트 및 디버깅

1. .env 파일을 생성하고 API 키가 잘 적용되었는지 확인합니다.

2. 브라우저에서 localhost:3000으로 접속하여 날씨 정보가 잘 표시되는지 확인합니다.

3. API 호출 실패 시: 콘솔에 출력되는 에러 메시지를 확인합니다.

-> 대개 처음에는 호출이 실패하거나 무한로딩이 걸릴 수 있습니다. 신규 발급 받았다면 1시간 가량 기다려야할 수도 있으니 이 점 참고바랍니다! (필자도 그랬답니다...)

 

결론

 

Open API를 활용하면 외부 데이터를 쉽게 가져와 프로젝트에 적용할 수 있습니다. 이번 포스팅에서는 OpenWeather API를 사용해 실시간 날씨 정보를 제공하는 컴포넌트를 구현했습니다. Open API는 날씨 정보뿐만 아니라 다양한 공공 데이터와 서비스를 활용할 수 있으므로, 프로젝트에 알맞게 활용해 보세요. 또한, API 키는 보안에 민감하므로 반드시 환경 변수로 관리해야 합니다.