'Javascript'에 해당되는 글 2건

개발하다보면 해당 페이지의 table의 데이터들을 새로고침 없이 데이터를 붙여쓰는 경우들이 있다. 이는 대부분 리스트로 구성된 페이지에서 확인이 가능한데, 가령 오픈마켓의 주문배송리스트라거나, 뭐 카드사용 내역과 같은 페이지에서 주를 이룬다.

div태그를 쓰던 table태그를 쓰던 아마 과정은 비슷할 것이고, javascript에서 데이터와 html태그들을 어떻게 만들어서 jsp에 붙여주는지에 대한 예제를 작성해보고자 한다.


먼저 JSP에서는 다음과 같이 구성한다. 기본적으로 페이지가 로딩될 때, controller 단에서 modelAndView에서 데이터를 호출, List로 이루어진 객체들을 foreach 로 계속 붙여주는 구조로 되어있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--결과 리스트-->
<div class="result-area">
  <h2 class="result-tit">거래결과 리스트</h2>
  <ul class="result-list" id="resultList">
      <c:forEach var="resultHistory" items="${resultHistory}" >
      <li class="result-item">
          <p class="result-day">${resultHistory.REG_DATE} <span>${resultHistory.ORDER_TYPE}</span></p>
          <dl class="result-detail">
              <dt>품명</dt>
              <dd>${resultHistory.PRODUCT_TYPE}</dd>
              <dt>금액</dt>
              <dd>${resultHistory.AMOUNT}</dd>
          </dl>
      </li>
      </c:forEach>
  </ul>
</div>
<div class="more-btn-wrap">
  <button type="button" id="btnResultMore">더보기</button>
</div>
cs


modelAndView 에서는 resultHistory라는 네이밍의 List 객체에 데이터들을 담아준다. 그리고 해당 jsp페이지가 호출되면, foreach로 객체들을 돌리면서(?) 각 항목들을 구성하게 된다. 이 때, btnResultMore를 클릭한다고 하자. 그럴 때 해당 페이지를 새로고침 없이, 리스트의 하단에 추가적으로 데이터가 붙는 방식이면 훨씬 보기가 좋을 것이다. 새로고침을 하게 되면 현재 입력되어있는 값들도 저장하지 않는 이상 사라질 것이고, 무엇보다 좀 더 자연스러운 화면을 뿌려줄 수 있을 것이다.


btnResultMore 버튼에 매핑되어있는 javaScript의 펑션을 보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var pageNo = 0;
 
//결과 더보기
$("#btnResultMore").on("click"function () {
  $.ajax({
    type:'GET',
    url : '/resultMore.json',
    global : false,
    async : true,
    data : {
      pageNo: pageNo
    },
    success : function(json) {
      $('#resultList').empty();
 
      var html = '';
      pageNo = pageNo+1;
      json.resultList.forEach(function(item, index){
        html = $('<li class="result-item">' +
          '<p class="result-day">'+item.REG_DATE+' <span>'+item.ORDER_TYPE+'</span></p>' +
          '<dl class="result-detail">' +
          '<dt>품명</dt>' +
          '<dd>'+item.PRODUCT_TYPE+'</dd>' +
          '<dt>금액</dt>' +
          '<dd>'+item.AMOUNT+'</dd>');
        $('#resultList').append(html);
      });
    },error:function(json){
 
    }
  });
});
cs


자바스크립트에서는 ajax 호출을 통해, 데이터를 더 가져오기 위한 controller 와 매핑을 시켰다.

정상적으로 쿼리가 이루어지는 경우에는 success flag를 탈 것이고, 이 때부터 로직이 시작된다.


기본적으로 들어있는 row를 날리기 위해, 14번 라인에서는 resultList의 자식들을 모두 비워준다.

그리고 18번 라인에서 가져온 데이터를 기반으로 forEach를 돌리면서, HTML tag를 새로 만들어주는 방식으로 이루어져있다.

위의 jsp와 마찬가지로 같은 구성으로 html과 데이터를 매핑해준 후에, 26번 라인에서 append를 시켜주면 끝.


추가적으로 btnResultMore를 누르게 되면 5개씩 항목을 더 붙여주는 기능을 포함한 것인데, pageNo 변수를 추가하여 이를 쿼리에 응용했다.

기본값은 0으로 처리가 되어서 쿼리에서는 기본 5개, 1일 경우에는 10개를 가져오는 방향으로.


javascript 에서 append와 appendTo의 쓰임새가 확연히 다르다.

$('#a').append(b); 의 경우에는 a에 b를 넣는 것이고, $('#a').appendTo(b);는 b를 a에 넣는것이다.

블로그 이미지

김생선

세상의 모든것을 어장관리

개발하다보면 DB의 날짜타입을 timestamp로 저장하는 경우가 있다. 개인적으로 이거 날짜 컨버팅 하고 뭐하고 하는것이 아주 귀찮아서 제일 끔찍하게 싫어하는 데이터 타입인데, 심지어 데이터가 저장되는것도 unix타임이야. 이거 한눈에 들어오겠냐고 제일 싫다.

여튼, 이걸 또 그냥 보면 15뭐시기로 시작하니까 사람이 제대로 읽을 수나 있겠냐, 이거지. 결국에는 사람이 읽고 쓸 수 있는 날짜타입(YYYY-MM-DD HH-MM-SS)으로 변환시켜줘야 하는데 일일히 찾아다가 만드는것도 귀찮고 펑션으로 하나 만들어놨으니까 앞으로 두고두고 좀 써먹어야겠다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//TimeStamp -> Date formatter
function unixToDateFormatter(date) {
  // yyyy-mm-dd hh:mm:ss.s
  var dateFormatt = new Date ( date );
  var year = dateFormatt.getFullYear();
  var month = 0;
  if ( dateFormatt.getUTCMonth() < 9 ){
    month = '0'+ ( dateFormatt.getUTCMonth() + 1 ).toString();
  } else {
    month = dateFormatt.getUTCMonth()+ 1;
  }
  var day = dateFormatt.getUTCDate();
 
  var hour = 0;
  if ( dateFormatt.getHours() < 10 ){
    hour = '0' + (dateFormatt.getHours()).toString();
  } else {
    hour = dateFormatt.getHours();
  }
 
  var minute = 0;
  if ( dateFormatt.getMinutes() < 10 ){
    minute = '0' + ( dateFormatt.getMinutes()).toString();
  } else {
    minute = dateFormatt.getMinutes();
  }
 
  var seconds = 0;
  if ( dateFormatt.getSeconds() < 10 ){
    seconds = '0' + (dateFormatt.getSeconds()).toString();
  } else {
    seconds = dateFormatt.getSeconds();
  }
 
  var milliseconds = dateFormatt.getMilliseconds();
  var fullDateFormatt;
  fullDateFormatt = year +'-'+month+'-'+day+' '+hour+':'+minute+':'+seconds+'.'+milliseconds;
  console.log ("DateFormatt : " + fullDateFormatt);
  return fullDateFormatt;
}
cs


일단 대강 만들긴 했는데, 몇가지 짚고 넘어갈 점이 있다.

getUTCMonth의 경우에는 0~11의 값으로 리턴해준다. 숫자는 뭐다? 0부터 센다. 0은 곧 1월이고, 이말은 리턴되는 값에 + 1을 해줘야 한다는 의미이다. 두번째로는 모든 자릿수를 맞춰줘야 한다는 것이다. 0~11로 리턴해주기 때문에 0은 +1을 해서 1월인데, 우리가 쓰는 데이트 포맷은 YYYY-MM-DD의 값으로 "월"의 자릿수가 맞지 않게 된다. 그런 고로 10월, 즉 리턴되는 값이 9보다 작은 경우에는 앞에 자릿수 '0'을 붙여주게 된다.

자릿수가 안맞는 부분은 month 뿐만 아니라 getUTCDate , getHours, getMinutes , getSeconds의 경우도 마찬가지가 된다. 그래서 각각의 경우에도 10보다 작은 경우에는 앞자리에 0을 붙이는 식으로 구성했다.


이거 하나 만들어놓으면 자바스크립트에서 두고두고 써먹을거고, 자바의 경우에는 simpledateformatter가 있으니까 그냥 이거 갖다 쓰면 된다.

블로그 이미지

김생선

세상의 모든것을 어장관리