학습한 내용

구현하기

앱이 실행되자마자 현재 위치 기반의 날씨가 보인다
날씨 정보에는 도시, 섭씨, 화씨, 날씨 상태가 있다
5개의 버튼이 있다( 1개는 현재 위치, 4개는 다른 도시 )
도시 버튼을 클릭할 때 마다 도시별 날씨가 나온다
현재 위치 버튼을 누르면 다시 현재 위치 기반의 날씨가 나온다
데이터를 들고오는 동안 로딩 스피너가 돈다

동기와 비동기

동기

작업(task)들이 순차적으로 이루어지는 것
다른 작업들을 blocking

비동기

작업(task)들이 순차적으로 이루어지지 않음
다른 작업들은 non-blocking
Javascript를 사용한 비동기 통신 방식을 Ajax (Asynchronous Javascriptand XML)
Http요청(GET, POST), 이벤트 핸들러(click, over ...), setTimeout, setInterval

stateful, stateless

컴포넌트를 나누는 또 다른 방식이다

stateful 컴포넌트: 모든 state를 들고있는 컴포넌트
stateless 컴포넌트: state를 안 들고 있고props와 같이 받은 데이터만 보여주는 컴포넌트

실습

1
ES7 라이브러리를 설치한다
새 프로젝트를 만들고
App.js와 App.css의 내용을 지워준다
WeatherBox와 WeatherButton 컴포넌트를 만든다
컴포넌트를 import 한다

2
WeatherBox.js에서 rafce를 입력하고 엔터를 누르면 WeatherBox 컴포넌트가 함수로 지정된다
그리고 컴포넌트에 클래스 이름을 지정하고 로딩화면을 구현한다

3
App.css에서 배경사진을 가져와 삽입한다
main-container에도 css를 적용한다

중간완성단계

4
이제 WeatherButton.js를 작성한다

이제 위도, 경도를 불러온다
Weather API 홈페이지에서 Current Weather Data의 API doc를 클릭한다
클릭해서 들어가보면 위도, 경도, 본인의 API 키를 입력하면 날씨 정보를 알려주는 코드를 볼 수 있다
알려준 코드를 이용해 자신의 위치의 날씨를 알려주는 코드를 작성한다

5
구글에서 get current logaction javascript를 검색하면 현재 위치를 가져오는 코드를 알려준다
알려준 코드를 이용해 함수 형식으로 작성한다
이 코드의 경도, 위도 값( latitude, longitude )을 4의 lat, lon으로 호출하게 되는 방식이다
url의 정보를 주고 받고 저장하는 과정을 구현한다
본인의 API 키를 가져와서 변수로 지정하고, url을 위와 같이 수정한다

6
그리고 도시별 날씨 정보를 가져오는 함수를 만든다
4~5에서 썼던 경도, 위도 기반 url이 아닌 요청한 도시 기반 url 정보를 사용한다

7



현재 위치를 계속 업데이트 해주는 handle을 작성한다

8
WeatherBox 컴포넌트에서는 weather 정보를, WeatherButton 컴포넌트에서는 city 정보를 받아오는데, city에는 여러 도시가 있다
그래서 cities를 배열로 만들고
cities의 배열을 넘겨주고,
7의 handle 이벤트도 넘겨주고,
cities에서 선택한 city가 city이다 라는 배열 객체를 넘겨준다

9

10
이제 react spinner을 이용해 작업을 해 볼 것이다
react spinner 홈페이지로 들어가보면 설치 코드가 있다
먼저 설치를 해준다
ClipLoader을 import해주고
로딩화면을 불러올 시점을 생각해서 배치해준다

완성한 모습

어려운 내용

날씨 표시부분이 투명하게 적용되어야 하는데 투명도가 적용되지 않았다

해결방법

학습소감

이번 시간으로 React에 대한 내용이 끝이 났다
결국 마지막까지 완벽하게 이해하지는 못했지만 JS의 라이브러리 중 하나인 React로 웹 페이지를 구현해봤다는 경험으로 만족해야할 것 같다
미처 이해하지 못한 부분은 지난 강의를 다시 돌려보면서 복습하고 다시 실습해보면서 익혀야겠다