[React] 날씨어때(How’s the weather?) Web Page

🔷 Screenshot

• Screenshot - PC (Chrome)
  

• Screenshot - Mobile (Safari)
  

🔷 URL

• Web Site URL: https://jiyaho.github.io/react-how_is_the_weather
• Git-hub URL: https://jiyaho.github.io/react-how_is_the_weather

🔷 제공하는 기능

• 사용자의 Geolocation 데이터를 통해, 유저가 접속한 위치의 실시간 날씨 현황 제공.
• 오늘 날짜, 현재 시각, 현재 위치, 실시간 기온, 체감 온도, 바람 속도, 최저 및 최고 기온, 습도 등.
• Background Video의 경우 접속 시간대 및 기후 변화에 따라 변경.
• 최저 및 최고 기온의 경우, 현재 위치(도시)의 평균 최저/최대 기온을 선택적으로 나타낸 매개 변수이므로 데이터는 참고적으로 보시기 바랍니다.

🔷 사용한 API

• OpenWeather Current weather data
• URL: https://openweathermap.org/current

🔷 발생한 에러

• video 태그가 PC 웹에서는 정상작동 하나, 모바일 웹에서는 백그라운드로 자동 재생이 안 되는 문제 발생 ❓ 에러: 테스트한 모바일 웹 환경은 사파리이며, 백그라운드 동영상으로 자동 및 무한 재생되어야 할 기능이 모바일 웹에서는 멈춰있거나 동영상이 백그라운드가 아닌 단독적인 화면이 팝업으로 재생되다가 다시 어플 화면에서는 멈춰있는 화면으로 나타 남. ✅ 해결: video 태그에 autoPlay 외에도 playsInline 속성을 넣어주었다. 안드로이드의 경우에는 autoPlay만으로도 정상 작동한다고 하나, IOS에서는 이 playsInline을 추가 해 줘야 한다고 한다.

  <video
    muted
    autoPlay
    playsInline
    loop
    ref={videoRef}
    onCanPlay={() => setPlayBackRate()}
  >
    <source src={bgChangeByClimate()} type="video/mp4" />
  </video>

• 업데이트할 내용
  • 날씨 Icon 추가
  • 앱 섹션 나누기
    • Weather Desc.와 Weather Icon 같은 줄에 배치
    • 실시간 날짜 및 시간도 섹션 나누고 아이콘 추가
  • Background Video 추가 및 변경