[TIL] 210209_첫번째 TIL

오늘 한 일

1. 채팅방 생성시 연락처리스트에서 체크한 목록을 백엔드로 넘겨주기 위한 프론트 작업을 진행하였다.
   • 체크박스로 체크했을 경우 참가인원을 상단에 목록으로 띄워줌
   • ajax로 검색 후 새로 목록을 불러오는 경우에도 기존에 체크된 목록은 유지됨
   • 체크된 사람이 한명도 없을 경우는 button을 disable=true
   • 상단 / 하단 고정
     • 기존 틀을 수정하려고 하니까 잘 안되었다.
     • chat.jsp의 틀을 보고 다시 수정할 예정
2. 기존 채팅방에서 사람을 초대할 경우
   • 기존 채팅방 멤버들의 code, empname의 리스트를 가져와서 상단에 목록으로 띄워주기
     • 아직 덜 구현되었음
     • 기존멤버들의 목록은 삭제되지 않고, 체크박스도 체크된 채로 해제가 되지 않기(채팅방에서 강제로 추방할 수 없기 때문에)
     • window.open으로 구현하다가 controller에서 return값을 어떻게 넘겨야할지 모르는 문제가 발생..
       • modal로 바꾸면 해결될 것도 같다.
3. 1:1과 1:N채팅방에서 충돌나는 로직
   • 채팅방목록에서 1:N 채팅방의 목록만 여러번 출력되는 오류를 발견하였다.
     • mapper에서 query 수정이 필요하다.

오늘 느꼈던 점

• javascript 코드를 어떻게하면 재활용을 할 수 있는지 고민하게 되었다. 상황에 맞게 다시 실행시켜야하는 함수들이 생겼기 때문에 전처럼 코드를 막 쓸 수가 없게 되었다.

• 체크박스가 해지할 때 수행하는 로직을 x아이콘을 눌렀을 때 동작하게 해야했다.

  • 로직을 deleteParty()라는 function으로 빼고 같이 쓰게 되었다.
  • 배열에 추가, 상단에 사람목록 추가 등도 따로 function으로 빼야하는 건지 고민이 되었다.

// 체크박스가 체크되었을 때 addParty
// 체크박스가 해제되었을 때 deleteParty
function updateChecklist(code, name) {
    // 1. 체크했을 때
    if ($("#checkbox" + code).prop('checked')) {
        addParty(code, name);
        // 2. 체크를 해지했을 때
    } else {
        deleteParty(code);
    }
}

// 1. 사람 목록에서 추가하기
function addParty(code, name) {
    // 1.1. 배열에 추가
    checkArr.push(code);
    console.log("checkArr : " + checkArr);
    // 1.2. 상단에 사람목록 추가
    let html = "";
    html += "<div class='col-2 pr-0 ml-2 mb-2 addedParty' id='addedParty" + code + "'>";
    html += "<span>" + name + "</span>";
    html += "<i class='fas fa-times ml-auto' onclick='deleteToplist(" + code + ")'></i>";
    html += "</div>";
    $("#addedPartyBox").append(html);
    // 1.3. 선택한 사람의 숫자 보여주기
    updatePartyCount();
}

// 2. 사람 목록에서 삭제하기
function deleteParty(code) {
    // 2.1. 배열에서 삭제
    let idx = checkArr.indexOf(code);
    checkArr.splice(idx, 1);
    // 2.2. 상단에 사람목록 삭제
    $("#addedParty" + code).remove();
    // 2.3. 선택한 사람의 숫자 보여주기
    updatePartyCount();
}

// x아이콘을 눌렀을 때 deleteParty & 체크박스해지
function deleteToplist(code) {
    deleteParty(code);
    document.getElementById("checkbox" + code).checked = false;
}

내일 할 일

: 내일 아침까지 합쳐야하기 때문에 1:N채팅방까지 최대한 마무리하려고 한다.

밀린 하고 싶은 일

: 점점 백엔드보다는 프론트쪽 로직이 많아지는데, javascript를 이렇게 많이 써본적이 처음이라 제대로 공부해야할 필요성을 느꼈다. 조만간 즉시실행함수, 클로저의 개념에 대해서도 자세히 글을 써볼예정…:)