render와 ajax 관련 질문입니다

[xaxa]

[현재 상황]
- server.js에 카운트다운 타이머 코드 있음
- server.js에서 실행된 타이머의 min과 sec을 /timerPrint로 render
- timerPrint.ejs에서 <span><%= 분 %>:<%= 초 %></span>로 받아서 사용

[문제점]
- /timerPrint로 get 요청시에만 min과 sec을 가져오기 때문에, 가져온 초기 타이머 값에서 변화하지 않음
  (수동으로 새로고침하면 잘 반영됨)
- server에서 실행되는 타이머는 콘솔에도 잘 출력됨(문제 없음)

[질문]
Q1. /timerPrint에서 아래와 같이 ajax를 사용하려고 했으나, 분과 초를 server에서 받아온 것이기 때문에
     ajax의 data에서 어떤 식으로 넣어야 하는지 감이 안 잡힙니다... 이럴 땐 어떤 식으로 넣어주나요?
$.ajax({  
     method : 'GET',
     url : '/timerPrint',
     //data : {분, 초} => 어떻게 넣어야 할지 감이 안 잡힘
});

Q2. 만약 ajax를 사용할 수 없는 상황이라면 웹소켓을 사용해 server에서 io.emit으로 min과 sec을 보내고,
     timerPrint에서 socket.on으로 받아서 본 강의처럼 <div id=content~..>로 출력하면 되나요?
    +) server에서 io.emit('이벤트명', 데이터)할 때 데이터 부분에 min, sec 이런 식으로는 못 넣나요?

Q3. 더 좋은 방법이 있다면 힌트 주세요!
--------------------------------------------------------------------------------------------------------------------
<<server.js>>
//카운트다운 타이머
let time = 60000;    let min = 1;    let sec = 60;
function StartTimer() {...생략...}

//timerPrint.ejs get요청
app.get('/a', function (req, res) {
  StartTimer();  
  if (!req.session.nickname) {    //로그인X
    res.render('timerPrint.ejs', { session: "true", 분: min, 초: sec });
  }
  else {    //로그인O
    res.render('timerPrint.ejs', { session: "false", 분: min, 초: sec });
  }
})

<<timerPrint.ejs>>
<form action="/timerPrint" method="POST">
   <span><%= 분 %>:<%= 초 %></span>
   <button type="button" class="btn btn-primary gowait">AAA</button>
</form>
--------------------------------------------------------------------------------------------------------------------

[xaxa]

+) 아래와 같이 웹소켓 사용해보았는데 본 글처럼 render만 했을 때의 결과, 문제점과 동일합니다..
    해결할 방법이 있을까요??

<<server.js>>
io.on('connection', function(socket) {    
  StartTimer();

  console.log("웹소켓 연결로 유저접속됨")

  //서버 -> 유저 전송
  io.emit('MinData', min);
  io.emit('SecData', sec);
})

<<socket.ejs>>
<span id="content"></span>

<script>
  var socket = io();  //유저가 웹소켓에 접속

  socket.on('MinData', function(data1){
     console.log("data from server : " + data1);
     socket.on('SecData', function(data2){
     console.log("data from server : " + data2);
     $('#content').append('<span>' + data1 + " : " + data2 + '</span>')
     })
  })
</script>

[codingapple]

ajax쓰거나 socket 쓰거나 무슨 데이터 전달할지는 개발자마음입니다 
브라우저에서도 setTimeout setInterval 이런거 쓰면 매초 코드실행이 가능해서 
처음 시간만 보내주고 setTimeout setInterval 쓰는게 자원이 절약될듯요

[xaxa]

처음 시간만 보내주고 브라우저에서도 setTimeout setInterval을 사용하는 거라면, 아래와 같이 이해했는데 맞나요?
- server에서 타이머 실행
- server에서 브라우저로 처음 시간만 render
- render되면 브라우저에서도 server처럼 타이머 실행

코멘트 달아주신 것도 생각하지 못했던 부분이었지만, 제가 원래 구현하려던 것과 다르게 구현될 것 같습니다ㅠㅠ 
원래 구현하고자 했던 것이 "모든 유저가 다른 시간에 접속해도 같은 타이머 값을 받아온다" 라서
아래와 같이 서버에서 타이머 값을 실시간으로 받아오고자 하였는데, 코멘트 참고하면 유저마다 다른 타이머가 보일 것 같아요
본 글의 Q1처럼 server에서 render 한 데이터를 Ajax의 data로 다시 넘기는 방안이나
이런 경우에 해결 할 다른 좋은 방안이 있다면 알려주세요!! 위의 방안은 며칠째 서치해봤는데 못 찾았습니다 ㅠㅠ

[구현하고자 했던 것]
(본 글의 코드에서는 /btnTimer이 생략되었고, /timerPrint에 get요청 시 타이머 실행되도록 되어있습니다)

* 역할
- /timerBtn : 버튼 클릭 시 server의 타이머 실행
  (버튼 클릭 > /btnCheck로 post요청 > /btnCheck에서 StartTimer() 호출)
- server.js : StartTimer() 함수에서 타이머 실행
- /timerPrint : 타이머 출력
  => 모든 유저에게 같은 타이머 출력

* 순서
1) /btnTimer에서 버튼 클릭 시 server의 타이머 실행
2) server에서 /timerPrint로 get요청 시 타이머값 render 후 ajax로 새로고침(?)
=> 브라우저에 유저 여러 명이 접속했을 때 모두 동일한 타이머가 보임
ex) 유저1이 /btnTimer에서 버튼을 클릭하여 타이머를 실행한 후, /timerPrint로 접속하면 실행된 타이머 출력
     유저1이 타이머를 실행한 후, 유저2가 /timerPrint로 접속했을 때 유저1과 동일한 타이머 출력

[codingapple]

app.get('/a', function (req, res) {
여기로 get요청하면 언제 요청하든 서버시간은 잘 받아올거같은데요 
브라우저에선 /a get 요청해서 서버시간받아온 결과를 1초에 1씩 증가시키라고 타이머 만들어놓으면 될듯요

[xaxa]

코멘트 해주신 부분을 계속 글로 적으며 생각하다보니 이제 정확히 이해한 것 같습니다!
참고해서 주말 동안 해보고 안되면 질문들고 다시 찾아오겠습니다 감사해요~

[글쓴이]

글