왜 나는 내 Firefox Extension에서 OpenWeatherMap 대신 wttr.in을 사용했는가

Source: Dev.to

위의 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. 코드를 포함한 코드 블록이나 URL은 그대로 유지하고, 마크다운 형식과 기술 용어는 그대로 보존하겠습니다. 텍스트를 복사해서 여기 채팅창에 붙여 주세요.

API 옵션 비교

마찰 차이

OpenWeatherMap은 사용자에게 다음을 요구합니다:

1. 계정 만들기
2. API 키 생성
3. 확장 설정에 키 붙여넣기
4. 키가 활성화될 때까지 대기 (몇 시간이 걸릴 수 있음)

wttr.in은 도시 이름만 필요합니다. 이러한 단계를 제거하면 설치‑에서‑활성‑사용자 전환율이 크게 향상됩니다.

코드 예시

wttr.in 요청 (JavaScript)

// wttr.in request
const url = `https://wttr.in/${encodeURIComponent(city)}?format=j1`;

OpenWeatherMap 요청 (JavaScript)

// OpenWeatherMap request
const url = `https://api.openweathermap.org/data/2.5/forecast?q=${encodeURIComponent(city)}&appid=${userApiKey}&units=metric`;

간단한 코드는 버그를 줄입니다.

wttr.in의 샘플 응답

{
  "current_condition": [
    {
      "temp_C": "18",
      "weatherDesc": [{ "value": "Partly cloudy" }],
      "humidity": "65",
      "windspeedKmph": "20"
    }
  ],
  "weather": [
    {
      "date": "2024-01-15",
      "hourly": [{ "tempC": "15", "...": "..." }],
      "maxtempC": "22",
      "mintempC": "12"
    }
  ]
}

하나의 요청으로 현재 상태와 3일 예보를 모두 제공합니다.

Reliability Considerations

• Single developer project – could go down or impose rate limits without SLA.
• Rate limiting – per‑IP limits may block high‑traffic scenarios (e.g., corporate NAT).
• Data sources – wttr.in aggregates from multiple providers; quality varies by region.
• No paid tier – you cannot increase limits or obtain guarantees.

각 서비스 선택 시점

wttr.in의 적극적인 캐싱

wttr.in은 유료 플랜이 없기 때문에, 요청 빈도를 줄이기 위해 클라이언트 측 캐싱을 구현했습니다:

const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes

async function fetchWeather(city) {
  const cacheKey = `weather_${city}`;
  const cached = await browser.storage.local.get(cacheKey);

  if (cached[cacheKey]) {
    const { data, timestamp } = cached[cacheKey];
    if (Date.now() - timestamp < CACHE_DURATION) {
      return data; // Return cached data
    }
  }

  // Fetch fresh data
  const resp = await fetch(`https://wttr.in/${encodeURIComponent(city)}?format=j1`);
  const data = await resp.json();

  // Cache it
  await browser.storage.local.set({
    [cacheKey]: { data, timestamp: Date.now() }
  });

  return data;
}

이렇게 하면 사용자당 30분에 한 번 API 호출이 제한되며, 매번 새 탭을 열 때마다 호출되지 않습니다.

결론

Weather & Clock Dashboard는 현재 wttr.in을 사용하며 대상 사용자에게 잘 작동합니다. 규모가 커져 신뢰성이 문제가 된다면, OpenWeatherMap을 백업 또는 기본 옵션으로 추가할 계획입니다.

Firefox에 확장 프로그램을 설치하세요 – 소스 코드는 GitHub에 있습니다.