본 내용은 내일배움캠프에서 활동한 내용을 기록한 글입니다.
💻 TIL(Today I Learned)
📌 Today I Done
✏️ 팀 과제 팀원들 도와주기
-
카테고리 검색 기능을 구현하던 팀원을 도와줌
-
팀원분이 코딩이 처음이라서 처음부터 어떻게 해야할지 답답해 하셨음
-
그래서 처음부터 1대1 멘토 느낌으로 붙어서 코드를 같이 작성함
-
메인 슬라이드 기능을 구현하던 팀원르 도와줌
-
fetch를 forEach에 넣어서 반복해서 이미지를 가져옴 (TMDB)
-
그러다보니 반복되는 fetch를 기다리지 못하고 빈 배열을 반환됨
-
심지어 fetch는 async/await를 통해서 동기적으로 동작하게 구현되어 있음
-
결국 Promise.all을 통해서 문제를 해결함
📌 Tomorrow's Goal
✏️ 개인 일정으로 휴식
📌 Today's Goal I Done
✔️ 팀 과제 팀원들 도와주기
-
이제 과제 데드라인까지 며칠 안남았기 때문에 하루종일 팀원분들을 도움
-
원래는 시간이 남으면 팀원들의 코드를 합치려고 했음
-
하지만 팀원분들의 코드를 봐주고 에러를 고치는 데 생각보다 오래 걸렸음
⚠️ 구현 시 발생한 문제
✔️ fetch를 반복문에서 사용할 때 빈 배열을 반환함
-
결과적으로 말하면 fetch를 반복문으로 돌릴 때 실행 순서가 맞지 않았음
-
그로 인해 forEach문 다음에 실행하는 return문에서 그냥 빈 배열을 반환함
-
그래서 처음에는 그냥 async/await 구문 하나를 일부로 더 동작시켜서 return를 지연시켜서 올바른 데이터를 반환시킴
-
하지만 이 방법은 유효한 방법이 아니기에 다른 방법을 고안함
-
인터넷에서 계속 찾아본 결과 여러 개의 fetch를 동시에 실행시킬 때는 await 구문으로 하나하나 기다리게 하는 방법이 아니라고 함
-
해결 방법으로 Promise.all 을 사용해서 fetch를 동시에 실행시킨다고 함
-
Promise.all를 통해서 여러개의 fetch를 동시에 실행시키고 Promise.all 자체에 await를 걸어주는 것임
const getImgdata = async function () {
let imgdata = [];
const totaldata = await getdata();
return await Promise.all(totaldata.map(item => matchImageById(item.movie_id)))
.then(data => {
imgdata = data;
return [totaldata,imgdata];
})
.catch(error => {
// 오류 처리
console.error("데이터를 가져오는 중 오류가 발생했습니다.", error);
});
}
const matchImageById = async function (id) {
const response = await fetch('https://api.themoviedb.org/3/movie/' + id + '/images', options);
const data = await response.json();
return data.backdrops[0].file_path;
}