사용자단의 작업은 대부분 마무리되서어 백오피스쪽 작업을 도와주기로 했다. 그중에서 이용약관분류를 작업하기로 했는데 드래그앤드롭은 라이브러리로 구현이 끝난 상황이였고 분류 추가, 수정(배열 순서), 삭제된 내용을 axios를 사용해서 백엔드에 넘겨주는 작업만 남았다.
😓 어려웠던 점
- 분류추가, 삭제, 수정에 대한 패치가 저장 버튼을 눌렀을 때, 한번에 이루어지는 것
- 추가, 삭제, 수정에 대한 key값이 status 한개로 추가 0, 삭제 1, 수정 2로 구분해야 하는 것
- get으로 분류 내용을 받아올 때와 post로 수정된 내용을 보낼 때의 key값(status란 key값)이 다른 것
- 하지만 post로 보낼 때, 수정, 삭제, 추가된 내용만 보내야 한다는 것
1번은 내용에 변화가 생길때마다 그 내용을 기억하고있다가 버튼을 눌렀을 때, for문을 돌려서 백에 보내면 해결가능한 부분이였다. 하지만 2, 3, 4번 같은 경우는 하나하나의 조건을 봤을 때, 어렵게 느껴지지 않지만 세개 조건을 전부 충족시키기는 코드는 구현하려고하니 굉장히 복잡했다.
수정, 삭제, 추가된 내용에 status값을 추가하고 따로 모아서 백에 보내야했기 때문에 처음 데이터를 담는 contents라는 배열과 수정된 배열을 담는 modify라는 배열로 2개의 상태값을 만들었다.
추가와 삭제의 경우에는 어떤 이벤트가 발생했을 때, 해당하는 배열에 접근해서 status 값을 0번 또는 1번으로 추가하고 modify에 담으면 됐다. 하지만 삭제의 경우에 처음에 삭제를 했다가 다시 복구하고 싶을 때, modify에서 해당 부분을 찾아서 제거해야했기 때문에 이 부분을 구현하는 코드가 너무 길어졌다.
// 저장버튼
async goToSave(val) {
for (let i = 0; i < this.modify.length; i++) {
var formData = new FormData();
formData.set("categoryNo", this.modify[i].categoryNo);
formData.set("status", this.modify[i].status);
const res = await classifyUpdate.list(formData);
console.log(res);
}
window.location.reload();
alert("삭제 완료");
this.visible_save = val;
},
// 이미지 토글버튼 & 약관 카테고리 삭제
handle_delete(el, i) {
const { list2, modify } = this;
if (list2[i].deleteBoo == true) {
list2[i].deleteBoo = false;
} else {
list2[i].deleteBoo = true;
}
if (list2[i].deleteBoo) {
modify.push({
categoryNo: el.categoryNo,
status: 2,
sortNo: el.sortNo
});
} else {
for (let idx = 0; idx < modify.length; idx++) {
if (modify[idx].sortNo == i + 1) {
return modify.splice(idx, 1);
}
}
}
},그래도 삭제까지는 구구절절한 코드로 구현하긴 했는데 수정의 경우에는 이벤트가 발생하지 않았기 때문에 몇번째 인덱스부터 몇번째 인덱스까지 인덱스값이 바꼈는지 파악하기가 어려웠다. 결국 사수분께 말씀드린 결과 필요한 key값을 백에 전달하고 수정된 내용이 아닌 전체 내용을 보내는 걸로 어려웠던 문제들이 한 번에 해결됐다.
💡 느낀점
사실 처음 api를 받았을 때, 비효율적이라 느꼈었다. 지금 같이 작업하는 백엔드분도 인턴으로 들어와서 처음 백쪽을 맡아서 하는 거였기 때문에 충분히 느낄 수 있는 생각이라고 생각한다. 아무튼 처음부터 비효율적이라 생각했지만 우리가 요청할 수 있는 부분이라고 생각하지 못해서 최대한 api에 맞춰서 구현했다.
근데 작업을 하면 할수록 key값이 추가되면 더 좋을 거 같은데.. 이렇게 백에 보내주면 더 편할꺼같은데.. 라는 생각을 많이 했고 도저히 안되겠어서 사수분께 말씀드리고 백엔드에 수정요청을 했다. 그 결과 삼일동안 붙잡고있던 내용이 수정되면서 진짜 몇시간만에 해결됐다 🥵
그래서 이번 작업을 통해 느낀점은 백엔드에 무조건 맞춰가는 게 아니라 필요한 부분은 사전에 요청하고 서로 소통하는 것이 정말정말 x 10000 중요하다고 느꼈다.
