다른 주소의 로드된 HTML DOM을 변화시키는 방법이 있을까요?

우선, 데이터가 있는 코드는 router.js, 변화시킬 페이지는 index.html입니다. express module을 사용하고 있습니다.

router의 '/'로 접속하면 html 파일을 렌더링합니다. 이 때는 테이블 내부에 아무런 값도 없는 상태입니다.

관리자가 '/manage/payment/update/'로 post 접속하면 이 부분의 처리루틴이 MySQL query 결과문을 index.html에 집어넣어야 합니다. 동적으로요. <<< 이 부분을 모르겠습니다.

데이터만 들어오면 처리는 어떻게든 되겠는데, 데이터를 원격으로 집어넣을 방법을 전혀 모르니 참 힘드네요. 이걸 어떻게 해결하면 좋을 지 조언 부탁드립니다.

ajax 로는 안되는건가요?

ajax로 다른 주소의 http DOM을 변화시켜서 실시간으로 로딩이 가능한가요?

위에서 AJAX로 하라고 하신 거는 아마 update를 관리자가 아닌 유저가 접속하는 걸로 이해하신 것 같고, 관리자가 업데이트할 때 클라이언트를 그때그때 업데이트하고 싶으신 거면 socket.io로 메시지를 보내서 리로딩을 시키던 DOM에 변형을 시키던 하는 클라이언트쪽 JS코드를 짜면 될 것 같습니다.

/manage/pament/update/로 접속할 시, MySQL Query를 보내고 받아온 이후, JSON 형식으로 /dataapi(예시 경로) 같은 곳에 뿌려준 뒤, index.html에 그 JSON 내용을 파싱해와 갱신해주는 JS를 짜는 식으로 해도 될 것 같습니다.
이런 식으로 짠다면 index.html에 일반 JS로 파싱 후 document.createElement 등으로 위에 뿌려줄 수 있겠습니다.

관리자가 업데이트 할 때 클라이언트를 업데이트 하는거라면 현재 경로(/manage/payment/update/)에 접속한 사람이 Admin 권한을 가지고 있는지 확인하는 코드를 짜면 될 것 같습니다.

데이터를 뿌려주는 Node.JS 코드는

const pool = mariadb.createPool({
  host: "localhost",
  port: 3306,
  user: "root",
  password: "passwd",
  database: "melonchart"
});

let sendData = [];

function parseFromDB() {
  // https://mariadb.com/kb/en/library/getting-started-with-the-nodejs-connector/
  pool
    .getConnection()
    .then(conn => {
      conn
        .query("select * from chartmelon")
        .then(rows => {
          sendData = rows;
        })
        .then(res => {
          conn.end();
        })
        .catch(err => {
          console.log(err);
          conn.end();
        });
    })
    .catch(err => {
      console.log(err);
    });
}

...
function svCallBack(req, res) {
  res.send(sendData);
}

function init() {
  app.use(express.static(path.join(__dirname, '/')));
  app.use(cors());

  app.get("/thisisparserapi", svCallBack);
  app.get('/', (req, res) => {
    fs.readFile("index.html", (error, data) => {
      res.writeHead(200, {
        "Content-Type": "text/html"
      });
      res.end(data);
    })
  });
}
init();

과 같이 짤 수 있을 듯 하며, 받아오실 때는

  <body>
    <div class="frm ui container segment"> <!-- Class는 querySelector로 잡아내기 위해 임의로 지정해주세요.-->
      <div class="ui big relaxed list"></div>
    </div>
    <script type="text/javascript" src="listing.js"></script>
  </body>

...

// listing.js
const frm = document.querySelector(".frm").querySelector(".ui.big.relaxed.list");
const tableMax = 100;

function getChart() {
    fetch("http://localhost:8000/thisisparserapi")
        .then(response => {
            return response.json();
        })
        .then(json => {
            paintChart(json);
        });
}

function paintChart(obj) {
    for (let i = 0; i < tableMax; i++) {
        const largediv = document.createElement("div"),
            itemdiv = document.createElement("div"),
            contentdiv = document.createElement("div"),
            headerdiv = document.createElement("div");

        const img = document.createElement("img");

        largediv.setAttribute('class', 'ui big relaxed list');
        itemdiv.setAttribute('class', 'item');
        contentdiv.setAttribute('class', 'content');
        headerdiv.setAttribute('class', 'header');
        img.setAttribute('class', 'ui avatar image');

        img.setAttribute('src', obj[i].img);
        const nameText = document.createTextNode(`${obj[i].artist} [${obj[i].album}]`);
        headerdiv.innerText = `${obj[i]._id}. ${obj[i].name}`;

        contentdiv.appendChild(headerdiv);
        contentdiv.appendChild(nameText);
        itemdiv.appendChild(img);
        itemdiv.appendChild(contentdiv);
        frm.append(itemdiv);
    }
}

getChart();

과 같은 식으로 화면에 뿌려줄 수 있을 것 같습니다.

저도 코딩 초짜긴 해서 도움이 안 될 수도 있겠지만 조금이나마 참고라도 해보시면 어떨까 해서 올려봤읍니다…

답변 감사합니다. socket.io를 이용해서 어떻게든 짜긴 짰습니다.