1. 미니프로젝트: 비동기 처리
모듈 스크립트
🏳️ $(document).ready() → ❌
자동 실행 함수 $(document).ready() 는 문서가 로드된 후에 javascript 코드를 실행할 때 사용했으나, 모듈 스크립트를 사용할 경우 문서가 전부 로드되지 않은 상태에서도 스크립트가 실행될 준비가 되었을 때 실행되므로 모듈 스크립트에서는 $(document).ready() 를 사용하지 않는다.
✨ 비동기 로딩
<script type=”module”> 로 설정하면 HTML 파싱과 script문 처리를 동시에 진행 (병렬적)
모듈 스크립트를 사용하는 경우, javascript의 모듈 시스템은 스크립트가 자체적인 모듈 스코프를 갖기 때문에 문서의 로딩 순서에 따라 코드 실행이 보장된다. = 모든 의존성이 해결되고 모듈이 파싱되어 스크립트가 실행될 준비가 되었을 때 실행된다.
🤔 스크립트가 실행될 준비?
async 속성이 붙은 스크립트 태그 로딩이 끝나면 다른 스크립트나 HTML 문서가 처리되길 기다리지 않고 바로 실행된다.
/* addDoc */
$("#id").click(async function () {
...
}); // 클릭 이벤트를 선언할 때, async function (){}
/* getDocs */
let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
let row = doc.data();
console.log(row);
}); // firebase 에서 데이터를 받아올 때, await🔥 firebase 를 적용하고 function 에 async , await 를 사용하는 이유?
작업 시작 시점을 firebase에서 정보를 불러온 시점으로 변경하고 작업이 끝나고 결과(성공, 실패)에 이어질 작업을 미리 부여하기 위해서이다.
동기 vs 비동기
동기
- 동시에 여러 작업을 수행할 수 없다.
- 흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다.
비동기
- 동시에 여러 작업을 수행할 수 있다.
- 흐름을 예측하기 어렵다. 즉 무엇이 먼저 완료될 지 보장할 수 없다.
비동기 (Promise, async, await)
Promise: 비동기 작업의 단위 →new Promise(…)하는 순간 할당된 비동기 작업은 바로 실행됨- executor : 익명 함수 (실행 함수)
- resolve : 비동기 함수가 성공하면 호출 → then
- reject : 비동기 함수가 실패하면 호출 → catch
const promise1 = new Promise((resolve, reject) => {
resolve();
});
promise1
.then(() => {
console.log("then!");
})
.catch(() => {
console.log("catch!");
});async: 비동기 작업을 만드는 손쉬운 방법- new Promise(…) 는 async 함수로 적절하게 변환할 수 있다.
- 리턴값이 무조건 Promise ⇒ 함수를 실행시킨 뒤 then 과 catch를 활용하여 흐름을 제어해야 한다.
// 기존
// function startAsync(age) {
// return new Promise((resolve, reject) => {
// if (age > 20) resolve(`${age} success`);
// else reject(new Error(`${age} is not over 20`));
// });
// }
async function startAsync(age) {
if (age > 20) return `${age} success`;
else throw new Error(`${age} is not over 20`);
}
const promise1 = startAsync(25);
promise1
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
});
const promise2 = startAsync(15);
promise2
.then((value) => {
console.log(value);
})
.catch((error) => {
console.error(error);
});await: Promise 가 끝날 때까지 기다리거라- 해당 Promise에서 reject가 발생한다면 예외가 발생하고 이 예외 처리를 하기 위해서 try-catch문을 사용한다. async 함수 내부에서만 사용할 수 있다.
function setTimeoutPromise(delay) {
return new Promise((resolve) => setTimeout(resolve, delay));
}
async function startAsync(age) {
if (age > 20) return `${age} success`;
else throw new Error(`${age} is not over 20`);
}
async function startAsyncJobs() {
await setTimeoutPromise(1000);
const promise1 = startAsync(25);
try {
const value = await promise1;
console.log(value);
} catch (e) {
console.error(e);
}
const promise2 = startAsync(15);
try {
const value = await promise2;
console.log(value);
} catch (e) {
console.error(e);
}
}
startAsyncJobs();적용
상세페이지에서 카테고리 목록을 불러온 다음(A), 그룹 데이터를 조회(B)하도록 A().then => { await B } 작성
표시된 모임 정보에 대한 수정, 삭제 처리는 async 함수 밖에서 이벤트 생성 → 작업 결과에 대한 처리가 아님
- 카테고리 조회 후 그룹 데이터를 조회 → 카테고리 중 그룹 데이터와 일치하는 옵션을 선택(selected)
결론
비동기 작업을 통해 이벤트의 호출 시점을 선 작업이 끝난 이후의 시점으로 지정할 수 있다! 추가로 선 작업의 결과에 따라 성공 시 작업, 실패 시 작업을 구분하여 지정할 수 있다.
✨ 참고자료
🔗[Javascript] 비동기, Promise, async, await 확실하게 이해하기
📝 TO-DO
- 미니프로젝트 코드분석
- 발표 준비 및 시연 영상 녹화
💭 Diary
23일부터 시작한 미니프로젝트가 거의 마무리되었다. 온보딩 프로젝트인 만큼 개발 실력이 성장하는 것보다 사실 협업하는 과정에서 얻는게 더 많았다. 이번 프로젝트에서 PL역할을 살짝 맛보았는데 팀원들에게 양질의 피드백을 주기엔 부족한 실력임을 다시 깨달았다...부트캠프 기간동안 소프트 스킬도 더 쌓을 수 있도록 노력하자!
