[TIL] 내일배움캠프 69일차 - li 동적 수정

오늘의 학습 키워드📚

JQuery에서 li 동적 수정

SSE를 이용해 채팅방의 수정 사항을 즉각 반영하는 부분이다.

이벤트를 통해 수정 API가 호출되면 수정된 정보를 받는 것까진 완료했는데 이걸 프론트에서 보여줘야 했다.

// 방 목록 가져오기 함수
function getRoomList() {
    $.ajax({
        url: "/api/chat-rooms",
        type: "GET",
        dataType: "json",
        success: function (rooms) {
            let roomListUl = $("#find-rooms-list");
            roomListUl.empty();
            rooms.forEach(function (room) {
                let li = $("<li></li>").data("chat-room-id", room.chatRoomId);
                let roomInfo = $("<div></div>").html(`
                    방 번호: ${room.chatRoomId}<br>
                    방 이름: ${room.chatRoomName}<br>
                    방장: ${room.userName}<br>
                    설명: ${room.description}
                `);
                let enterButton = $("<button></button>").text("입장").addClass(
                    "btn btn-primary btn-sm");
                enterButton.click(function () {
                    enterRoom(room.chatRoomId);
                });
                li.append(roomInfo);
                li.append(enterButton);
                roomListUl.append(li);
            });
        },
        error: function (xhr, status, error) {
            console.error(
                "Failed to retrieve room messages. Status: " + status);
        }
    });
}

방 목록을 가져오는 함수인데 API를 통해 넘어온 값들을 바탕으로 li를 동적으로 추가하는 코드이다.
나중에 어떤 방인지 식별하기 위해 data를 채팅방의 ID 값으로 넣어줬다.

JQuery 문법 중에 find() 라는 함수가 있는데 특정 요소의 하위에 어떤 형태(div, li 등)나 id값 등으로 하위 요소들을 찾는 함수다.
이것을 이용해 채팅방 ul에서 하위 li를 찾아 data 값을 비교해 해당 요소를 수정하는 로직이다.

// 채팅방 수정 이벤트
eventSource.addEventListener('modifyChatRoom', event => {
    let data = JSON.parse(event.data);

    // 현재 조회 중인 채팅방 목록에서 일치하는 요소 찾기
    let roomListUl = $("#my-rooms-list, #find-rooms-list");
    roomListUl.find("li").each(function () {
        let chatRoomId = $(this).data('chat-room-id');
        if (chatRoomId === data.chatRoomId) {
            // 채팅방 정보 업데이트
            let roomInfo = $(this).find("div");
            roomInfo.html(`
                방 번호: ${data.chatRoomId}<br>
                방 이름: ${data.chatRoomName}<br>
                방장: ${data.userName}<br>
                설명: ${data.description}
            `);

            return false;
        }
    });
});

---

오늘의 회고💬

프론트 부분이 익숙치 않아서 너무 쓸데 없이 헤메는 것 같다. 아직 구현할 기능들이 많은데... 하나가 해결이 안 되면 적당히 넘어갈 줄도 알아야 하는데 괜히 시간을 허비한 것 같다.

 

내일의 계획📜

아직 프론트에 완전히 연동된 것은 아니어서 최대한 노력해보고 알림 기능도 좀 더 고도화하면 좋겠다.