브라우저 확장 프로그램 - 외부 요청 새 탭

지금까지 우리의 브라우저 확장 기능은 꽤 일반적인 관점을 가지고 있었습니다.
일반 텍스트와 일부 대화식 카운터가 표시되었습니다.

종종 이러한 것들에 일부 외부 데이터를 추가하고 싶을 것입니다.

표시할 수 있는 일부 날씨 정보를 로드하도록 새 탭 확장을 변경해 보겠습니다.

Note: if you would like to follow along, use the following GitHub branch.

외부 호출 추가

이 기사에서는 OpenWeather API를 사용하여 현재 위치의 날씨 정보를 가져옵니다.
브라우저를 통해 요청할 위도와 경도를 기반으로 합니다.

먼저 OpenWeather and signup으로 이동합니다. 방대한 무료 계층을 얻을 수 있습니다.

로그인한 후 잠시 후에 필요하므로 API 키를 찾으십시오.



프로젝트의 루트에 .env 파일을 추가하고 방금 검색한 API 키를 추가하십시오.

VITE_APP_API_URL='https://api.openweathermap.org/data/2.5'
VITE_APP_API_KEY='YOUR_KEY'

Note: Since we are using Vite, we have to prefix the variables with VITE_

이제 프로젝트를 열고 Weather.jsx 라는 새 구성 요소를 추가해 보겠습니다.

와이어프레임부터 시작하겠습니다.

export default function Weather() {
  return (
    <div>
      <h2>The weather today ☁️</h2>
    </div>
  );
}

기본App.jsx 파일에 구성 요소를 추가할 수 있습니다.

import Counter from './Counter';
import Weather from './Weather';

export function App() {
  return (
    <div className='flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white'>
      <p>Welcome 👋</p>
      <br />
      <Weather />
      <br />
      <Counter />
    </div>
  );
}

그러나 이것은 정적 텍스트를 표시하는 것 이상을 수행하지 않습니다.

먼저 사용자와 실제 날씨 데이터에 대한 위도/경도에 대한 상태를 만들어야 합니다.Weahter.jsx 파일에 다음 상태를 추가합니다.

import {useEffect, useState} from "react";

export default function Weather() {
    const [latLng, setLatLng] = useState({});
    const [data, setData] = useState(null);

우리는 이 상태를 사용하여 모든 것을 추적할 것입니다.
위도/경도를 얻으려면 navigator 개체를 사용할 수 있습니다.
useEffect 내에서 이 호출을 수행합니다.

useEffect(() => {
  if (!latLng.lat && !latLng.long) {
    navigator.geolocation.getCurrentPosition(function (position) {
      setLatLng({
        lat: position.coords.latitude,
        long: position.coords.longitude,
      });
    });
    return;
  }
}, [latLng]);

보시다시피 기존 위도 및 경도가 없는지 확인합니다. 그렇다면 navigator.geolocation에 쿼리합니다.

Note: The first time, the browser will ask you to access this.

반환되면 계속해서 날씨 API를 쿼리해야 합니다.
동일한 useEffect에서 이 작업을 수행하여 항목을 깔끔하게 정리할 수 있습니다.

useEffect(() => {
  if (!latLng.lat && !latLng.long) {
    navigator.geolocation.getCurrentPosition(function (position) {
      setLatLng({
        lat: position.coords.latitude,
        long: position.coords.longitude,
      });
    });
    return;
  }
  if (!data) {
    fetch(
      `${import.meta.env.VITE_APP_API_URL}/weather/?lat=${latLng.lat}&lon=${
        latLng.long
      }&units=metric&APPID=${import.meta.env.VITE_APP_API_KEY}`
    )
      .then((res) => res.json())
      .then((result) => setData(result));
  }
}, [latLng]);

보시다시피 아직 아무것도 로드하지 않았는지 확인합니다. 그렇지 않은 경우 이 사용자의 현재 위도 및 경도로 날씨 API를 쿼리합니다.
그런 다음 데이터 개체에 결과를 설정합니다.

이제 실제 응답 출력을 수정할 수 있습니다.

<div>
  <h2>The weather today ☁️</h2>
  <br />
  {!data ? (
    <p>Loading...</p>
  ) : (
    <>
      <p>Weather for: {data.name}</p>
      <p>
        Temp: {data.main.temp}° ({data.weather[0].main})
      </p>
    </>
  )}
</div>

이것은 데이터를 로드하는 동안 로드 상태를 표시한 다음 위치의 이름, 온도 및 기상 조건을 표시합니다.



그리고 그게 다야. 이제 브라우저 확장 새 탭에서 외부 데이터를 로드하는 방법이 있습니다.

이 코드도 GitHub에 업로드 했으므로 결과를 볼 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나