프론트 forEach 내부의 각 요소에 api 연결하기

컬럼데이터를 forEach로 돌면서 컬럼을 붙이고, 그 내부에서 카드데이터를 forEach로 돌면서 붙이고 난 후, 카드의 수정 삭제를 요청하니 컬럼 개수만큼 동작하는 문제 발생

1. 함수 분리
   카드 수정로직, 삭제로직을 관리하는 함수를 분리하여 루프에서 함수를 호출

function CardActions(card_id) {}

///

cardItemBox.innerHTML += columnhtml;

CardActions(card.card_id)

2. 각 카드의 고유한 아이디 값을 찾아서 카드로 찾아오기

    const card = document.getElementById(${card_id});

3. 각 카드의 수정 및 삭제 버튼 찾아서 가져오기
4. 찾아온 버튼에 addEventListener로 클릭이벤트 걸어서 수정, 삭제 로직으로 api 요청하기

card는 잘 불러와지는데 각 컬럼의 마지막 카드만 작동하는 문제 발생

각 데이터에 대해서 동작 설정을 하기 위해 forEach로 돌려서 동작함수 실행

data.result.forEach((card) => {
        setupCardActions(card_id);
    });

---

temphtml 붙일때 onclick 이벤트로 함수 같이 넣어서 붙여주는 방법도 있음