React

학습내용

(1) 날씨 앱 만들기

1. 구현하기

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

2. 준비사항

• 현재위치를 가져오기 위해 아래 사이트 가입
  (https://openweathermap.org/api)
• 소스 가져오기

  • Geolocation API
    (https://www.w3schools.com/html/html5_geolocation.asp)
  • get current location javascript
    HTML Geolocation API (w3schools.com)

• react-spinner 설치
  npm react-spinners (npmjs.com)
• react-bootstrap 설치
  npm react-bootstrap

3. 동기와 비동기

동기

• 작업(task)들이 순차적으로 이루어짐
• 다른 작업들을 blocking

비동기

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