나의 React 여정: 13일차-JS 튜토리얼-php.cn

나의 React 여정: 13일차

Mary-Kate Olsen

풀어 주다： 2024-12-14 07:33:11

원래의

668명이 탐색했습니다.

My React Journey: Day 13

Project O'Clock: 날씨 앱

오늘 저는 OpenWeather API에서 실시간 날씨 데이터를 가져오는 간단한 날씨 앱을 만들었습니다. 이 앱을 통해 사용자는 도시를 검색하고 온도, 습도, 풍속, 기상 조건 등 주요 날씨 정보를 표시할 수 있습니다.

키 코드 하이라이트

API 세부정보 이 앱은 온도 측정 단위와 함께 OpenWeather API를 사용합니다.

const apiKey = "789b1d530**********"; 
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=metric&q=";

로그인 후 복사

2.쿼리 선택기
이러한 요소는 HTML 구조를 JavaScript와 연결합니다.

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");

로그인 후 복사

3.날씨 데이터 가져오기
checkWeather() 함수는 API 요청을 보내고 응답을 처리합니다.

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();

        // Updating Weather Information
        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/hr";

        // Dynamic Weather Icon Update
        if (data.weather[0].main == "Clouds") {
            weatherIcon.src = "images/clouds.png";
        } else if (data.weather[0].main == "Rain") {
            weatherIcon.src = "images/rain.png";
        } else if (data.weather[0].main == "Clear") {
            weatherIcon.src = "images/clear.png";
        } else if (data.weather[0].main == "Drizzle") {
            weatherIcon.src = "images/drizzle.png";
        } else if (data.weather[0].main == "Mist") {
            weatherIcon.src = "images/mist.png";
        }

        document.querySelector(".weather").style.display = "block";
        document.querySelector(".error").style.display = "none";
    }
}

로그인 후 복사

4.검색용 이벤트 리스너
이렇게 하면 검색 버튼에 상호작용이 추가됩니다.

searchBtn.addEventListener("click", () => {
    checkWeather(searchBox.value);
});

로그인 후 복사

배운 것

API 통합:

fetch()를 사용하여 데이터를 가져오고 async/await로 응답을 처리합니다.
API 키를 안전하게 관리하는 것이 중요합니다(이 키는 테스트 목적으로만 사용됩니다).

2.오류 처리:

잘못된 도시를 입력하거나 API 요청이 실패할 경우 오류 메시지를 표시합니다.

3.동적 UI 업데이트:
API 데이터를 기반으로 페이지의 콘텐츠를 동적으로 업데이트합니다.
다양한 날씨 아이콘에 대한 조건부 렌더링.

4.CSS 및 응답성:

앱은 간단한 카드 기반 UI를 사용합니다. 레이아웃과 디자인 관리를 위해 별도의 styles.css 파일을 사용했습니다.

5.JavaScript DOM 조작:
querySelector 및 innerHTML을 사용하여 HTML 요소와 상호 작용합니다.

마지막 생각
이 날씨 앱을 구축하는 것은 흥미로웠으며 JavaScript, API 호출 및 DOM 조작에 대한 지식을 강화했습니다. 계속 진행하면서 이러한 프로젝트를 보다 구성 요소 기반 접근 방식을 위해 React로 전환할 수 있기를 기대합니다. ?

위 내용은 나의 React 여정: 13일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!