20231227

Today?

웹개발 종합반 4주차

Firebase :
DB의 일종. 비관계형 데이터베이스.
SQL과는 다르다...(noSQL)
별도의 서버 개발 없이 웹에서 데이터 전송 받을 수 있는 플랫폼.

Firebase에 추억앨범 데이터를 전송하고, 전송한 데이터를 다시 내 페이지로 불러들이는 작업

Q. async와 await?

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수의 앞에 async 라는 예약어 붙이기-> 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙이기

비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작함

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점(Callback hell)을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줌.

//기존 콜백 사용 함수
function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았습니다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

// async & await 적용 후
async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 한다. 하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 되는 것.