[리액트] 날씨앱 만들기 1~6

create-react-app이 이제 앞으로 지원을 멈추어 

npx create-reat-app my-app  사용 지양하도록 하기 위해

빌드툴을 이용하여 프로젝트를 생성

npm create vite@latest [프로젝트파일이름] --template react

 

=> 기존 CRA 방식과 다르게 노드모듈 따로 설치

npm install

=> npm start 가 아닌 npm run dev로 시작

npm run dev

친절히 안내해줌

API!를 사용하여 날씨 정보를 불러오고

 

1. 유저는 현재위치의 날씨를 볼 수 있다.(지역,온도,날씨 상태)
2. 유저는 다른 도시의(5) 버튼들을 볼 수 있다
3. 유저는 다른 도시 버튼을 클릭하면 해당 도시의 날씨 정보를 볼 수 있다.
4. 유저는 데이터가 로딩될 때 로딩 스피너를 볼 수 있다.

TODAY' QUEST	fail 기준 🚫	API
현재 위치의 날씨가 UI와 함께 나와야 한다.	날씨 정보가 맞게 안나온다 UI디자인 없이 날씨 정보만 나온다	날씨 API 현재 위치 가져오기 Geolocation API

  const getCurrentLocation=()=>{
    navigator.geolocation.getCurrentPosition((position)=>{
      let lat = position.coords.latitude
      let lon = position.coords.longitude
      getWeaderByCurrentLocation(lat,lon);
      console.log("현재 위치 : ",lat,lon)
    });
  };
  
  const getWeaderByCurrentLocation = async(lat,lon) => {
  let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=7e23dd278af75d56e9aaf95a3e9018d7`;
  let response = await fetch(url)
  let data  = await response.json();
  console.log("data",data);
  };​

 

사이트

https://weather-app-mauve-five-18.vercel.app/

github

https://github.com/roseraph502on/WeatherApp