동기 비동기

동기

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

비동기

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

용어

Callback

Callback 함수 = 인자로 들어오는 함수
Callback은 비동기 통신을 할 수 있는 한 패턴이다.

• 문제점 : Callback 헬로 인한 에러 처리 불가, 가독성 hell

Promise

ES6에서 나온 비동기 패턴
비동기 통신 결과와 상태를 저장하는 객체.
후속처리 메서드로 then(성공), catch(에러), finally(무조건)가 있다.

async/await

promise의 복잡성으로 인해 ES8에서 나온 비동기 패턴
promise를 기반으로 하며, 완전히 같지는 않으나 사용하기 편하다.

• await를 쓰기위해 async를 쓴다 매우 중요한 문법

react-spinner

spinner을 구현하기에 아주 간편한 component모음
Spinner이란? 뷰(View)의 한 종류
사용자가 여러 선택지 중 하나를 고르게 하고 싶을 때 사용하는 위젯
ComboBox와 비슷하지만 드롭다운이 없이 현재 데이터 값을 나타내며 증가, 감소 버튼으로 값을 변경할 수 있는 컨트롤

React spinners 설치

https://www.npmjs.com/package/react-spinners
npm install --save react-spinners로 깔수있음

react 데이터에 대한 관점

부모 -> 자식 : props를 이용해서 데이터 줄 수 있음
자식 -> 부모 : 데이터 줄 수 없음 = 자식과 자식간에 연관이 없으면 자식간 데이터를 줄 수 없다.

리액트는 단방향 통신이다 즉 부모에서 자식으로만 데이터를 전달 할 수 있다. = 데이터 흐름 추적하기 쉽다 = 동시에 react의 가장 큰 문제
=> 자식이 이벤트 발생하면 데이터를 주자는 개념이 stateful, stateless

App.js가 부모
Component등이 자식

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

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

장점

1. state가 없는 stateless컴포넌트는 재사용이 쉽고 데이터를 걱정하지 않아도 된다.
2. 모든 중요한 데이터들은 stateful컴포넌트에 있기 때문에 유지보수가 쉽다 (stateful컴포넌트 하나만 주시하고 관리해주면 되니까)

=> 최대한 모든 컴포넌트를 stateless로 만들고
몇개의 stateful컴포넌트에서 데이터를 관리하는 구조가 가장 이상적

실습

• App.js 파일(부모)
• WeatherBox(자식 component) : App.js에서 데이터를 내려받음
• WeatherButton(자식 component) : box에 button내용이 입력되야함
  하지만 자식끼리는 데이터 주고받을 수 없다. 그래서 이벤트 발생시 App.js에 의해 데이터를 Box에 주게 만듬

App.js 파일
<script>
// 원하는 도시 보기
const getWeatherByCity = async () => {
//비동기 처리
  try {	//units=metric 이란? 캘빈법 계산식을 미터단위로 사용하겠다.
  // BUT 계산이 틀어짐 = 기본설정인 캘빈단위로 적용 = 그래서 뺏음
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`;
    //$()로 동적데이터를 넣어줌
      
      const res = await fetch(url);
      const data = await res.json();   

      setWeather(data);      
      setLoading(false); //에러 발생시 로딩 X
    } catch (err) {
    console.log(err);
    setAPIError(err.message);
    setLoading(false);
  }
};
</script>

위치정보

<script>
useEffect(() => {
    if(city == null){
      setLoading(true);
      getCurrentLocation();
    }else{
      setLoading(true);
      getWeatherByCity();

    }
  }, [city]);
</script>

Tip

1. rafce 함수형태로 만들어줌 ( 확장패키지 필요함)

   	import React from 'react'
   
   	const PublicNavbar = () => {
   		 return (
   		 <div>PublicNavbar</div>
   			)
   		}
   
   	export default PublicNavbar

2. css 설정 중 오류는 없지만 표시나 구현이 되지 않으면, 표시 안되는 부분에 !important 를 적어서 우선 적용 시키는 방법을 고려

3. url등을 외부에서 가져오기 때문에 외부 정보의 documnet(사용법, 규칙 등)를 잘 봐야함

4. 배열의 값을 가져올 때 map함수 사용함

5. 코드를 외우는 것이 아니라 잘 가져오는 것이 중요하다.

학습 소감

오늘은 외부에서 API을 가져와서 이미지처럼 넣고 이를 활용하는 것을 실습해봤다.
진도가 빨리 나간건지, 내가 이해를 못한건지 모르겠지만, 코드도 복사 붙이기만 했고, 이해하는데 어려움이 느낀것 같다. 앞으로의 프로젝트가 걱정일 뿐이다.