항해99 주특기 프로젝트 (10일차)

트렐로 기능 구현 현황

• 날짜 지정
  • 카드에 마감일을 설정하고 관리할 수 있어야 합니다
• 카드 파일 첨부 / 다운로드
  • 카드 작성 시 필요한 파일을 첨부할 수 있어야 합니다.
  • 첨부된 파일을 다운로드 받을 수 있어야 합니다.
• 카드 생성
  • 컬럼 내부에 카드를 생성할 수 있어야 합니다.
• 카드 수정
  • 카드 이름
  • 카드 설명
  • 카드 색상
  • 작업자 할당
  • 작업자 변경
• 카드 삭제
• 카드 이동
  • 같은 컬럼 내에서 카드의 위치를 변경할 수 있어야 합니다.
  • 카드를 다른 컬럼으로 이동할 수 있어야 합니다.
• 카드 상세 페이지 팝업 표시

추가 수정

• 컬럼 추가
• 컬럼 이동
• 댓글 수정 오류

---

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);  
        });
    }  
}