script 코드 작성을 하고 console에서 발견한 오류
문제가 된 코드는 이 부분인데
export const getpostList = async (event) => {
let cmtObjList = [];
const q = query(collection(dbService, "posts"), orderBy("createdAt", "desc"));
.
.
.
commnetList.innerHTML = ""; ← 바로 여기async (event) → async () 로 고쳐주니 의외로 간단하게 해결되었다.
async
📌 사용법
: function 키워드 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에는 await만 붙여주면 된다.
async가 붙은 함수는 promise를 반환하고, promise가 아닌 것은 promise로 감싸 반환한다.
📌 동작원리
: await 키워드를 만나면 promise가 처리(settled)될 때까지 기다린다. 그리고 promise가 처리가 완료되어 resolve(값) 되면 값만 따로 추출해서 리턴한다.
await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다. promise.then보다 가독성 좋고 쓰기도 쉽다.
⚠ Promise는 작업단위를 함수로 관리한다.
promise
: Promise는 JavaScript에서 비동기 처리를 위해 ES6부터 도입된 ECMAScript 표준 빌트인 객체이다.
Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달받는다.
async/await와 promise.then
async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다.
promise.catch 대신 일반 try..catch를 사용할 수 있다.
대개 promise.then을 사용하는 것보다 async/await를 사용하는 것이 더 편리하다.
⚠ 그런데 문법 제약 때문에 **async함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없다.** 그렇기 때문에 관행처럼 .then/catch를 추가해 최종 결과나 처리되지 못한 에러를 다룬다.
출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await
비동기처리란?
: 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것. 동시에 여러가지 작업을 처리하는 것이 가능하며 기다리는 과정에서 다른 함수를 호출할 수도 있다.
ex) setTimeout, callback, Promise, async & await
📖 비동기처리예시
📌 제이쿼리의 ajax
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData()); // undefined$.get() = ajax 통신을 하는 부분.
https://domain.com 에 HTTP GET 요청을 날려 1번 상품(product) 정보를 요청하는 코드이다. 쉽게 말하면 지정된 URL에 ‘데이터를 하나 보내주세요’ 라는 요청을 날리는 것.
이렇게 서버에서 받아온 데이터는 response 인자에 담긴다. 그리고 tableData = response; 코드로 받아온 데이터를 tableData라는 변수에 저장. 이제 이 getData()를 호출하면? 받아온 데이터가 뭐든 일단 뭔가 찍혀야 하는데 결과는 맨 아래에서처럼 undefined이다.
그 이유는 $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문이다. 따라서, getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력한다.
이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.
출처 : https://kkhcode.tistory.com/6
