트렐로 기능 구현 현황
추가 수정
Fetch 동기식으로 사용 async, await
- 컬럼 이동을 한 후 순서대로 저장을 해야하는데
- fetch를 동기식으로 사용을해서 해결을 하였습니다.
let sort_index = 1;
const columnList = document.querySelector(".board.muuri").childNodes;
// async 익명 함수로 실행
(async () => {
// forEach는 안돼고 for .. of, for을 사용 해야함
for (let column of columnList) {
if (column.nodeName != "#text") {
console.log(column, sort_index);
// fetch 실행 후 sort_index가 실행
// columnList의 순서를 DB에 저장함
await orderFetch(column, sort_index);
sort_index++;
}
}
})();
// 순서를 저장하기 위한 Fetch
function orderFetch(el, sort_index) {
if(el.nodeName != "#text") {
const columnId = el.getAttribute('id');
fetch('fetchURL", {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
"columnsOrder":sort_index
}),
})
.catch(error => {
console.error('Error:', error);
});
}
}