망할 azure PaaS 환경의 클라우드 이관 작업을 진행하려다 보니 관련 부서에서 날짜 관련해서 제약사항이 생긴다란 이야기를 듣고 생각해보니 기존 소스들이 이관되면 엉망이 되겠다 싶어 미리 준비해보았다.
당장 javascript로 만들어진 new Date()만 보더라도 한국 시간과 미국 시간의 차이로 임계영역에 다다르면 날짜가 서로 꼬이게 될 것이란건 너무나 자명했다.
현재 서버호스팅 환경에선 new Date()시 2022-08-08 19:00:00이던게 미국과 한국은 13시간의 차가 있으므로 azure PaaS 클라우드 환경에선 2022-08-09 20:00:00으로 보여지게 될테니 말이다.
그리하여 기존의 new Date()대신 new AzureDate()를 호출하면 해당 함수내에서 알아서 시간계산을 해서 값을 돌려준다면 모든게 해결될 듯 보였다. 어차피 getFullYear(), getMonth(), getDate() 등의 함수는 new Date()로 받아온 시간객체를 통해 얻는 행위이므로 AzureDate()만 만들다면 이 모든건 소스 수정 없이 우아하게 처리 될 것이다.
아래가 그 결과물이다. function AzureDate() { var dt;
if (arguments.length == 0) { dt = new Date(); } else if (arguments.length == 1) { dt = new Date(arguments[0]); }
dt.setHours(dt.getHours() + 13);
return dt; }
특이한 부분은 arguments.length라는 부분이다. new Date(), new Date("2022-08-08") 이렇게 인자를 넘겨서 객체를 생성하기 때문에 내가 만든 javascript 함수도 이에 대응할 필요가 있었다.
하지만 우리의 자바스크립트는 오버로딩을 지원하지 않는다. https://www.geeksforgeeks.org/function-overloading-in-javascript/ Unlike the other programming languages, JavaScriptDoes not support Function Overloading. Here is a small code which shows that JavaScript does not support Function Overloading.
인터넷에 보면 javascript로 프린트를 하는데 동적인 TD의 높이 때문에 자칫 페이지가 넘어갈 때 화면이 짤리는 상황을 경험하게 된다. 이를 완벽하게 해결한 쉬운 소스를 공개한다. 보통 폼은 첫번째 장에는 헤더가 있고 다음장부터는 헤더가 없는 경우가 많다. 본 포스팅은 이러한 경우까지 대응하고 있다. 말은 거창하지만 사실 그냥 그만큼 자리 차지하고 있고 그 아랫부분부터는 동적으로 알아서 잘라주고 이어주고 알아서 잘 되니 신경 안써도 된다.
4. 첫 페이지의 헤더를 위치시킨다. 내용은 각자 알아서 마음대로 교체하면 됨 id는 SECTIONPAGE1으로 하였다. 실질적인 출력 영역은 DIVTOPAREA class로 지정하였고 내용을 담당하는 DIV의 class는 DIVDATAAREA 끝으로 다음 tr의 높이가 페이지를 넘어서서 짤리게 될 경우 페이지 하단에 공백을 계산하여 넣어줘야 하므로 공백 DIV인 DIVBUFFERAREA가 추가되었다. 제목헤더인 DIVTOPAREA는 1페이지만 출력시키므로 SECTIONPAGE1에만 추가되어 있다. 참고로 여기서 거론한 class를 제외한 tdPrintWhite 클래스 등은 그냥 내 소스의 공통 css에서 사용되는 클래스이므로 무시하면 됨 <sectionclass="sheet padding-10mm"id="SECTIONPAGE1"> <divclass="DIVTOPAREA"> <tableclass=""width="100%"border="0"cellspacing="0"cellpadding="10"> <tr> <tdclass="tdPrintWhite"width="100%;"align="center"><h1>제목헤더영역</h1> <ahref="#"class="btnblue"id="BTNPRINT">인쇄</a> </td> </tr> </table> </div> <br/> <divclass="DIVDATAAREA"></div> <divclass="DIVBUFFERAREA"></div> </section>
5.데이터를 출력시킬 SECTIONPAGE영역을 여유있게 미리 만들어 둔다. 동적으로 그때그때 생성해도 되지만 이게 편하다. 난 총 4페이지까지면 충분하므로 2부터 4까지 for문을 돌려 생성하였다. <% for iSEL = 2to4 %>
여기까지 진행했으면 일단 1차 준비는 끝났다. 이제 실질적으로 큰 영역에 모든 데이터들을 뿌려주고 페이지가 모두 로딩이 된 후 이 영역의 데이터들을 계산하여 앞서 만들어둔 SECTIONPAGE section의 DIVDATAAREA에 붙여넣기를 진행할 것이다.
6.보면 div에 id가 부여되었고 class도 편의상 id와 동일하게 부여하였다. 특이한 점은 rowspan이 2이다. 즉 아래와 같은 표형태이다. 굳이 왜 rowspan을 예로 들었냐면 그 이유는 잠시 후 아래에서 설명할 것이다. 이것 때문에 약간 고생을 한 경험이 있기 때문이다.
</tr> ......for문을 통해 모든 데이터들을 각자 알아서 출력...... </table> </div>
7.여기까지 HTML소스 끝이다. 이제 jQuery, javascript로 DIVITEMBODY의 데이터들을 계산해서 복사 붙여넣기를 하면 된다. 소스는 그냥 복사해서 붙여넣기 해보면 잘 동작할 것이다. 응용하려면 로직이 비교적 간단하니 바보 아니면 이해 가능한 수준이기도 하고 ;p 위에서 설명하기로 했던 내용으로 중요한 부분인 rowspan이 없는 헤더인 경우 "//헤더TR이 2줄 이므로 if (index == 0) 대신 if (index<= 1)로 사용"하라고 주석까지 달아 두었다. SECTION을 4개가 아닌 10개를 만들었다면 for (nSectionPage = 2; nSectionPage <= 4; nSectionPage++)의 4를 10로 바꾸면 된다. 이 정도면 정말 이유식을 떠먹여줬다 본다. 나머진 복사 붙여넣기 하면 끝
<script> $(document).ready(function() { var bAppendEnd = false; var nLastTrIndex = 0; var nSectionPage = 1;
var objSECTIONPAGE; var objTopArea; var objDataArea; var objBufferArea;
