[웹] 서버에서 받은 소스 설명 > 메시지 브릿지

updateDisplay() 내 postData의 역할 & 활용 설명

updateDisplay() 안에서 만들어지는 postData는
서버(WebSocket)에서 받은 메시지를 프론트에서 활용하기 좋은 ‘가공용 데이터 꾸러미’로 만들어둔 것입니다.

const postData = {
    type: lastMessage.type,
    auth : lastMessage.auth,
    mb_id: MB_ID,
    write_id : lastMessage.write_id,
    ip: USER_IP,
    noti_type: lastMessage.noti_type,
    mb_name: lastMessage.mb_name,
    bo_table: lastMessage.bo_table,
    bo_subject: lastMessage.bo_subject,
    wr_subject: lastMessage.wr_subject,
    wr_id: lastMessage.wr_id,
    skin_url: lastMessage.skin_url
};

여기까지는 ‘준비’ 단계입니다.
이후에는 원하는 대로 가공해서 무엇이든 할 수 있어요.

postData로 할 수 있는 일

이 postData는 말 그대로 만능 재료입니다.
필요한 요리를 자유롭게 선택하면 됩니다.

1) alert()으로 바로 출력

alert(postData.wr_subject);
alert(JSON.stringify(postData, null, 2));

바로 경고창에 띄워 확인하거나 디버깅용으로 사용할 수 있습니다.

2) AJAX로 서버에 다시 전송

jQuery 예시

$.ajax({
    url: "/notification/save.php",
    type: "POST",
    data: postData,
    success: function(res){
        console.log("저장 완료:", res);
    }
});

fetch 예시

fetch('/notification/save.php', {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(postData)
});

데이터베이스에 저장하거나 로그 파일로 기록할 때 사용합니다.

3) 폼 POST 전송

만약 서버가 form 방식만 받는다면:

const form = document.createElement("form");
form.method = "POST";
form.action = "/noti";

for (const key in postData) {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = key;
    input.value = postData[key];
    form.appendChild(input);
}

document.body.appendChild(form);
form.submit();

전통적인 POST 방식도 문제없이 지원합니다.

4) HTML UI에 표시

document.querySelector("#notiTitle").textContent = postData.wr_subject;
document.querySelector("#notiWriter").textContent = postData.mb_name;
document.querySelector("#notiBoard").textContent = postData.bo_subject;

알림 팝업 / 모달 / UI 카드 등 원하는 곳에 값을 끼워 넣기만 하면 됩니다.

5) 다른 JS 함수에 전달해서 처리

sendToPopup(postData);
logNotification(postData);
updateCounter(postData);

정리된 JSON 데이터를 다른 기능으로 넘겨 확장할 수도 있습니다.