(Youtube: https://www.youtube.com/watch?v=GuA0_Z1llYU)
유투브를 통해 클론 코딩했던 나라별 날씨 체크를 하는 웹 튜토리얼이다.
이 프로젝트는 React와 React Hooks (useState)와 외부 API를 이용해서 만드는
작업이다.
제일 처음 터미널에서 리액트를 위한 CRA을 실행시켜준다.
npx install create-react-app
그리고 날씨 정보를 얻기 위해
openweathermap 홈페이지를 가입하고 current weather data API를 받아오자.
const api = {
key: "~~",
base: "https://api.openweathermap.org/data/2.5/"
} api 변수를 지정해서 개인 고유의 key값과 url의 값을 지정해주고
functional 컴포넌트로 시작한다.
uesState hook을 통해서 검색을 위한 query값과 지역 날씨의 데이터를 받을 객체의
디폴트 값을 공백과 빈 배열 주고 첫 번째 인자로 query, weather
변경하고자 하는값을 setQuery, setWeather 두 번째 인자로 준다.
그리고 search-bar에 원하는 장소를 적고(value) keyPress로 Enter를 쳤을 때,
fetch에서 backtick(``) 템플릿 리터럴을 통해
외부에서 가져온 api의 url 의 값에 우리가 원하는 지역명과 키값을 넣는다.
res.json()으로 JSON.stringify()메소드를 호출하여 파라미터를
JSON string 형태로 변환 한 뒤, res.send()를 호출하여 응답을 내보낸다.
이 search 변수를 통해서 도출한 날씨값과 지역값을 특정할 수 있다.
현재 Date값을 표시하기위해서 변수에 저장해두고 사용한다.
유투브 튜토리얼에서 유투버가 제공하는 이미지값을 이용하면 일정온도를 기준으로
배경을 따뜻하게 할지 차갑게 할지를 지정해줄 수 있다.
weather.main값은
이렇게 openweathermap에서 제공하는 형식으로 나오는데
typeof weather.main != 'undefined --weather.main값이 존재할 때,
삼항 연산자를 이용해서 weather.main의 기온이 16 이상일 때,
따뜻한 색의 배경, 그렇지 않으면(16도 이하일 때) 차가운 색상의 배경이 클래스값으로 나타난다.
input 필드에서 onChange값으로 변화가 있을 시 e.target.value로
인풋 필드에 입력한 값을 value로 하는 코드를 작성해서 엔터를 누르면 서치할 수 있도록 한다.
그리고 한번 더 삼항연산자를 이용해서 지역명과 해당 지역의 나라값을 입력해주고,
아까 빌드해 둔 dateBuilder를 통해서 new Date()값을 받아와 요일 날짜 월 년도를 입력해주고
Math.round(weather.main.temp)값으로 소숫점을 반올림해준다.
마지막으로 현재 지역의 날씨의 청명한 정도를 나타내는 지표를
weather.weather[0].main값으로 받아올 수 있다.
*현재 시각의 서울
*현재 시각의 런던
굉장히 심플하고 최소한의 기능을 구현한 이번 프로젝트를 통해서
리액트와 외부 api를 받아와서 실시간으로 웹을 구현해 볼 수 있었다.
리액트의 색채가 강하진 않았지만 useState를 이용해서 setState보다 짧고 간결하게
코드를 작성할 수 있었고 api를 통해 날씨를 가져오는 기본적인 api사용법을 알 수 있었다.
