[TOY] 리액트를 이용한 모멘텀 만들기 #2

bosco·2019년 2월 18일
3

모멘텀만들기

목록 보기
2/2
post-thumbnail

⏰ Clock Component

구조

Clock/index.js

Clock/ClockContainer.js

시간과 인사 문구를 얻는 getTime함수를 만들어 componentDidMount될 때 시간값을 얻도록 하였습니다.
setInterval을 통하여 현재 시간이 실시간으로 업데이트 되도록 설정하였습니다.
(1000ms 설정을 하여 1초마다 시간이 업데이트 되도록 하려구 하였으나 그러면 1초 뒤에 getTime함수를 실행이되어 초기 렌더링 시 시간값이 없기 떄문에 1ms로 설정하였습니다.)

Clock/ClockPresenter.js

Components/App.js

name 의 값이 null 아닐 경우 Clock Component가 렌더링이 되고 현재 name의 값을 전달해 주도록 하였습니다.

결과화면
스크린샷 2019-02-14 오후 6.31.37(2).png

🔍 Search Component

구조 Search/index.js 생략...

Search/SearchContainer.js

bing검색시 url부분은 search?q={검색어} 검색어 부분만 변경되기 때문에 해당 쿼리에 현재 value의 값을 넣은 다음
window.location.href를 통하여 검색어가 담긴 주소가 리다이렉트 되도록 구현하였습니다.

searchButton함수를 통하여 검색을 할 수 있는 검색창이 토글형식이 되도록 구현하였습니다.

Search/SearchPresenter.js

SearchIcon 클릭시 searchButtong함수가 실행되어 isOpen값이 변경되기 때문에
검색창 화면이 보였다 안보였다 토글이 될 수 있도록 구현하였습니다.

Components/App.js

Clock Component와 마찬가지로 name 값의 유무에 따라 rendering이 되도록 하였습니다.

결과화면

search.mov.gif

☀️ Weather Component

날씨 정보를 가져오기 위해서 https://openweathermap.org에 회원가입을 신청한 후 API KEY를 받았습니다. (API KEY 받는법)

API 문서에서 By geographic coordinates라는 부분을 보면

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}

lat : latitude
lon : longitude

위도와 경도 정보만 주어지면 해당지역의 날씨 정보를 주는 API가 있는걸 확인 할 수 있습니다. 그래서 위도와 경도의 정보를 얻을 수 있는 geolocation 객체를 활용하여 API에서 날씨정보을 얻을 수 있도록 하였습니다.

스크린샷 2019-02-14 오후 8.07.33.png

구조 Weather/index.js 생략...

Weather/WeatherContainer.js

api 정보를 쉽게 가져오기 위해서 axios를 설치한 다음 axios를 통하여 api라는 변수에 기본적인 파라미터를 설정해 주었습니다.

componentDidMount 할 때 geolocation객체의 getCurrentPosition() 메서드를 통하여 api 변수에 추가적으로 위도와 경도의 값을 파라미터로 넣어준 다음 날씨 정보를 호출하여 getWeather 변수에 담아 주었습니다.

getWeather 변수에 담겨 있는 result값 중에서 필요한 데이터인 온도, 날씨, 지역의 정보를 가져왔다.

Weather/WeatherPresenter.js

Components/App.js

Weather 컴포넌트 추가
api를 호출하는 시간이 있기 때문에 화면 날씨정보가 바로 나타나지 않을 수 있습니다.

결과화면

스크린샷 2019-02-18 오전 10.39.50.png

profile
개발 관련하여 함께 많을 것을 공유하면 좋겠습니다.

2개의 댓글

comment-user-thumbnail
2019년 2월 19일

잘 보고 갑니다~!

1개의 답글