[리액트 따라하며 배우기] 날씨 프로젝트 React+typescript, styled-components

React+Typescript를 이용한 날씨 프로젝트입니다.

 

 

 

지역이름을 적고 '날씨보기' 버튼을 클릭하면 해당지역의 날씨에 맞는 배경화면으로 바뀌는 프로젝트입니다.

 

 

프로젝트 시작하기 앞서 데이터를 받아올 수 있는 api가 필요했는데요.

https://openweathermap.org/api

위사이트에서 데이터를 받아서 사용했습니다.

 

저번 프로젝트와 다르게 이번엔 스타일값을 주기 위해 styled-components를 사용했습니다.

api를 호출하기 위해 axios를 사용했습니다.

 

npx create-react-app wetherproject --template typescript

로 프로젝트를 진행했으며 assets와 type파일을 집어 넣었습니다.

assets는 6가지 배경화면이 들어있으며 pixabay에서 다운로드 받았습니다.

type파일은 openweather에서 제공해주는 데이터 타입을 저장했습니다.

.env파일은 api호출할때 사용할 url과 api_key 값이 들어있습니다.

 

시작할 때 파일구조는 이렇습니다.

 

assets와 type폴더는 깃허브 저장소에서 다운로드 받아주세요.

깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/weatherproject

GitHub - jdy0120/frontendproject

 

.env파일은 파일안에 다음과 같이 적어주세요.

REACT_APP_API_URL = https://api.openweathermap.org/data/2.5/weather
REACT_APP_WEATHER_API_KEY= weatherapi에서 제공하는 apikey를 적습니다.

 

아래 key값을 REACT_APP_WEATHER_API_KEY의 값으로 입력해주시면 됩니다.

 

기본 셋팅 후 영상을 따라하며 날씨 프로젝트를 완성해보세요.