"마이페이지 > 메시지함(mypage-message.vue)"은 부모 컴포넌트로 "정렬, 필터, 삭제 기능"을 가지고 있다. 자식 컴포넌트로는 메시지를 모아서 보여주는 컴포넌트와 페이징을 담당하는 컴포넌트로 분리되어 있다. [그림 1]과 같이 부모 컴포넌트에서 삭제 기능을 구현하려고 하다 보니-메시지를 모아서 보여주는-자식 컴포넌트의-check box에서-checked 된 정보를 부모 컴포넌트에서 받아서 처리해야 했다. 이 기능을 구현함에 있어 가장 먼저 떠올랐던 방법은 커스텀 이벤트와 emit을 이용한 방법이었다. 문제는 Vue.js의 문법에 맞게 정확하게 코딩하였음에도 불구하고 부모 컴포넌트에서는 어떠한 checked 정보도 받지를 못했다. 해당 자식 컴포넌트가 부모 컴포넌트의 직속 자식이 아니라서 ..

Javascript의 select에서 checked인 모든 요소를 삭제하려고 했는데 하나씩 선택 삭제는 잘 작동하는데 둘 이상인 경우 삭제가 아니라 2배로 늘어나는 기적(?)이 일어났다. 처음에는 문자열인 고객사 명만 배열로 관리했는데 인덱스를 찾아 삭제하는 것보다 객체의 키값을 찾아 삭제하는 것이 효과적일 거라는 판단이 들어 배열 내에 객체 형식으로 고객사를 등록했다. 객체의 고유한 키의 값을 사업자 번호로 삼았고 그걸 가지고 checked 된 경우 찾아 삭제하고자 했다. 삭제 방식은 checked 되지 않은 요소(고객사 객체)만 새로운 임시 배열에 push 한 후 기존 고객사 배열에 덮어 버리는 방식을 이용했다. 그랬더니 삭제하려고 했던 요소가 2배로 늘어나버렸다. 정확히는 "checked 된 수 *..