기술 스택 및 기능

날씨 앱 프로젝트는 다음을 사용하는 방법을 보여줍니다.

- Create React App 하나의 명령을 실행하여 최신 웹 앱을 설정합니다.

- Open Weather Map API , 모든 위치 또는 도시에서 사용할 수 있는 5일 예보. 3시간 단위의 일기예보 데이터가 포함되어 있습니다. 예측은 JSON 또는 XML 형식으로 제공됩니다.

- OpenWeatherFont (owfont) Icons , Open Weather Map API의 기상 조건 코드와 일치하도록 설계되었습니다.

- Moment.js JavaScript에서 날짜 및 시간을 구문 분석, 유효성 검사, 조작 및 표시합니다.

- Bootstrap 응답성이 뛰어난 모바일 우선 사이트를 구축하기 위한 세계에서 가장 인기 있는 프레임워크입니다.

다음은 날씨 앱 기능입니다.

특정 도시의 5일 예보를 표시합니다

.

날씨 아이콘 온도 판독값과 기상 조건 설명 포함 ☀️🌤⛈❄️

시작하기

1 단계

시작하려면 터미널에서 다음 코드를 실행하세요.
create-react-app weather-app
실행 후 바로 구걸npm start 종속성 트리를 수정하라는 지침과 함께 이 오류가 발생합니다. 정확한 순서로 아래 단계를 따르십시오.



따라가서 문제해결을 해보았지만 모두 실패하여 루트 디렉토리에 .env 파일을 생성하고 SKIP_PREFLIGHT_CHECK=true 를 추가한 후 npm start 로 다시 실행했습니다.

이것은 저에게 효과적이었고 localhost 서버에서 실시간으로 React 앱 업데이트를 볼 수 있었습니다.

2 단계

WeekContainer.js - 클래스 구성 요소가 src folder에서 새 파일로 생성되어 App.js로 가져왔습니다.

import React, { Component } from 'react';
import './App.css';
import WeekContainer from './WeekContainer';

class App extends Component {
  render() {
    return (
      <div className="App">
        <WeekContainer />
      </div>
    );
  }
}

export default App;

로컬 호스트의 라이브 업데이트는 다음과 같으며 모든 것이 화면에 올바르게 렌더링됩니다.

3단계

WeekContainer에 대한 날씨 데이터를 얻는 방법

WeekContainer 의 "작업"은 각각 요일을 나타내는 5개의 "날씨 카드"를 보유하는 것입니다.

이렇게 하려면 먼저 API에서 데이터를 가져와야 합니다fetch. OpenWeatherMap은 날씨 정보를 제공하는 제가 가장 좋아하는 API 중 하나입니다. 아래에서 설명할 API 키를 얻는 몇 가지 단계가 있습니다.

4단계

API 키 받기

- OpenWeatherMap 웹사이트here에서 계정을 만드세요.

- 이메일 수신 후 몇 시간 이내에 활성화되는 API 키가 포함된 이메일을 받게 됩니다(제 경험으로는 10분밖에 걸리지 않습니다).

다음은 API 호출의 예입니다.


- src 폴더 내에 파일(keys.js라고 함)을 생성하고 여기에 API 키를 추가하고 새로 생성된 파일을 .gitignore에 추가하여 git에 푸시하면 "무시"됩니다.

-GitHub에서 API 키를 제공하지 않고 가져오기 요청에서 API 키를 사용하기 위해 문자열 보간을 사용할 수 있도록 WeekContainer.js 내에서 숨겨진 파일을 가져옵니다. 이것이 잘 작동하기를 바랍니다!

여기에서는 우편번호 11001에 대한 응답을 지정합니다.

import React from 'react';
import apiConfig from './keys';

class WeekContainer extends React.Component {
  render() {


    const weatherURL =
      `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
//You can search weather forecast with data by city name

    return (
      <div>
        <h1>We will have a Weather app soon!</h1>
      </div>
    )
  }
}

export default WeekContainer;

Open Weather Map API의 사용 가능한 매개변수에 대한 추가 정보를 찾을 수 있습니다here.

5단계

Open Weather Map API에서 가져오기

이제 가져올 시간입니다! 다음 코드를 사용하여 componentDidMount 메서드를 생성해 보겠습니다.

componentDidMount = () => {
      const weatherURL =
        `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
      fetch(weatherURL)
        .then(res => res.json())
        .then(data => console.log("Data List Loaded", data.list))

이것은 시작에 불과하며 매일 카드를 필터링하고 렌더링하고 부트스트랩을 추가하는 방법에 대해 자세히 쓸 것입니다.

나와 연결하려면 내 Github 또는 를 확인하십시오.

읽어 주셔서 감사합니다!