브라우저 확장 - 팝업 날씨 확장

이전 기사에서 우리는 현재 위치의 날씨를 로드할 수 있는 new tab experience을 만들었습니다.
이 기사에서는 팝업 확장에서 작동하도록 배운 내용을 변환합니다.

따라하고 싶다면 following branch을 출발점으로 삼으세요. (또는 the article에서 읽기)

위젯 만들기

가장 먼저 할 일은 날씨 위젯을 만드는 것입니다. 이것은 현재 날씨를 보여주는 주요 구성 요소입니다.
Weather.jsx 디렉토리 안에 src라는 새 파일을 만듭니다.

이와 같이 React 구성 요소를 부트스트래핑하여 시작합니다.

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

App.jsx 파일을 열고 이 구성 요소를 로드해 보겠습니다.

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'>
      <Weather />
    </div>
  );
}

날씨 데이터를 로드하려면 먼저 일부 외부 API에 대한 액세스를 보장해야 합니다.
관대 한 프리 티어가 있기 때문에 OpenWeather API를 사용하고 있습니다.

거기에서 API 키를 얻는 방법을 보여 드리겠습니다.

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

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



키가 있으면 프로젝트로 돌아가서 프로젝트 루트에 .env 파일을 만듭니다.
내부에 API 키와 API에 대한 URL을 배치합니다.

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

Note: You can see they are prefixed with VITE_ as we use Vite as our build tool.

이제 날씨 구성 요소로 돌아가 API를 호출하여 데이터를 가져올 수 있습니다.

가장 먼저 필요한 것은 사용자의 위도/경도를 저장할 상태와 API에서 반환된 실제 데이터를 저장할 상태입니다.

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

그런 다음 사용자로부터 지리적 위치를 검색하고 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]);

마지막으로 변경하고 싶은 것은 뷰에서 데이터를 렌더링하는 것입니다.
우리 앱이 여전히 데이터를 로드하는 경우를 대비하여 로딩 텍스트를 추가했습니다.

return (
  <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>
);

그리고 그게 다야. 이제 구성 요소를 사용할 준비가 되었습니다.

새 빌드를 만들고 install the extension in developer mode .

이제 확장 프로그램을 열려고 하면 로드되지 않는 것을 알 수 있습니다!



팝업 확장 프로그램을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하면 개발자 도구 팝업이 표시됩니다.

콘솔에 지리적 위치에 대한 적절한 권한을 요청하지 않았다는 메시지가 표시됩니다.


manifest.json를 열고 다음 권한 줄을 추가해 보겠습니다.

"permissions": ["geolocation"]

이제 애플리케이션을 빌드하고 다시 실행하십시오. 이제 현재 위치의 날씨를 확인할 수 있습니다!



여기에서 전체 코드를 볼 수도 있습니다GitHub repo.

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

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