코드 분석

전역 변수

의도치 않은 전역 변수 선언이 있는지 확인하십시오.

var 선언 없이 변수를 생성할 경우, 전역 변수가 생성됩니다. 함수 내에서만 필요한 변수가 전역으로 선언될 경우, 함수 종료 후에도 참조가 가능하여 메모리 누수가 발생할 수 있습니다.

$r_title(수정 전)
scwin.getDay = function(pYmd, format) {
    try {
        if (pYmd.length > 8) {
            pYmd = pYmd.substring(0, 8);
        }
        if (typeof format !== "undefined" && format !== "" && WebSquare.util.getBoolean(format)) {
            date = WebSquare.date.getDay(pYmd); 
			//date가 var 선언이 생략되어 있어 전역변수로 사용됨
        } else {
            …
        }
        return date;
    } catch (e) {
    }
}

$r_title(수정 후)
scwin.getDay = function(pYmd, format) {
    try {
        var date = -1;  
		//var를 생략하지 않고 date가 가질 수 없는 값을 초기값으로 설정한뒤,
		// case에 따른 수식결과를 저장한뒤 리턴한다.
        if (pYmd.length > 8) {
            pYmd = pYmd.substring(0, 8);
        }
        if (typeof format !== "undefined" && format !== "" && WebSquare.util.getBoolean(format)) {
            date = WebSquare.date.getDay(pYmd);
        } else {
            …
        }
        return date;
    } catch (e) {
    }
}

객체

객체에 적접한 API 사용 여부 및 수식 형태를 확인하십시오. API나 수식을 올바른 형태로 사용하지 않을 경우 에러가 발생하거나 잘못된 값이 반환될 수 있습니다.

API

$r_title(수정 전 (1))
scwin.isDate = function(sDate) {
    try {
        if (sDate.length == 8) {
            sDate = sDate+”000000”;
        }
        var flag = true;
        ……
        return flag;
    } catch (e) {
    }
}

$r_title(수정 후 (1))
scwin.isDate = function(sDate) {
    var flag = true;
    try {
        if (sDate.length == 8) {
            sDate = sDate+”000000”;
        }
        var flag = true;
        ……
        return flag;
    } catch (e) {
        flag = false;   //sDate가 undefined인 경우 false 반환
    }
    return flag;
}

$r_title(수정 전 (2))
scwin.addDateSimpleisDate = function(sDate) {
    try {
        var date = “”;
        var isDate = scwin.isDate(pYmd);    //8자리 이상의 string여부 체크
        if (!isDate) return;
        cYmd = pYmd.substring(0, 8);
        var dTime = (pYmd+””).substring(8);
        var isSet = Number(offset); //isDate에서 숫자인지 체크하지는 않음           
        if (isDate && typeof isSet == “number”) 
			date = WebSquare.date.dateAdd(cYmd, isSet);
        if (typeof format != “undefined” && format == “yyyyMMdd”) {
            date = date;
        } else {
            date = date + “” + dTime;
        }
        return date;
    } catch (e) {
    }
}

$r_title(수정 후 (2))
scwin.addDateSimpleisDate = function(sDate) {
    try {
        var date = “”;
        var isDate = scwin.isDate(pYmd);
        if (!isDate) return;
        var cYmd = pYmd.substring(0, 8);
        var dTime = pYmd.substring(8);
         
        var isSet = Number(offset);
        if (!isNaN(isSet)) date = WebSquare.date.dateAdd(cYmd, isSet);  
		// Number 변환시 NaN가 아닌 경우 dateAdd 수행
        if (typeof format == “undefined” || format != “yyyyMMdd”)  
			date = date + dTime;
        return date
    } catch (e) {
    }
}

수식

객체 형태에 적합한 수식을 사용했는지 확인하십시오.

$r_title(수정 전)
scwin.addYmd = function (pYmd, year, month, day) {
    try{
        var dY = (pYmd+"").substring(0, 4);
        var dM = (pYmd+"").substring(4, 6);
        var dD = (pYmd+"").substring(6, 8);
        var dTime = (pYmd+"").substring(8);
        if (year == "" || typeof year == "undefined")
            year = 0;
        if (month == "" || typeof month == "undefined")
            month = 0;
        if (day == "" || typeof day == "undefined")
            day = 0;
        var date = new Date();
        date.setFullYear((dY*1) + year);
        date.setMonth((dM*1) + month-1);
        date.setDate((dD*1) + day);

$r_title(수정 후)
scwin.addYmd = function (pYmd, year, month, day) {
    try{
        var dY = (pYmd+"").substring(0, 4);
        var dM = (pYmd+"").substring(4, 6);
        var dD = (pYmd+"").substring(6, 8);
        var dTime = (pYmd+"").substring(8);
        year = Number(year);
        month = Number(month);
        day = Number(day);
        if (isNaN(year)) year = 0;  // 리턴값이 숫자가 아닌 경우 0으로 변경
        if (isNaN(month)) month = 0;
        if (isNaN(day)) day = 0;
        var cDate = $p.parseDate(dY+dM+dD);
        cDate.setFullYear(cDate.getFullYear() + year);  //일자 더하기 계산
        cDate.setMonth(cDate.getMonth() + month);
        cDate.setDate(cDate.getDate() + day);

객체 생성

공통 소스의 경우, 사용하는 객체의 Lifecycle을 확인하여 재사용하거나 혹은 사용하지 않을 경우 삭제하십시오.

스크립트 수행 시간 최소화

공통에서 자주 호출되는 함수는 최소한의 자원 사용으로 결과를 반환할 수 있도록 작성하십시오.

$r_title(수정 전)
//일자를 계산된 월의 말일자로 변
if (Number(dD) >= 30) {  //일자가 29일 경우 2월인 경우 윤년 체크필요
    var chkMonth1 = [2];
    var chkMonth2 = [4,6,9,11];
    if (chkMonth1.indexOf(dM) > -1) {
        if (scwin.isLeafYear(dY+”01”+”01”)) {   
						//윤년체크를 위해 8자리 일자로 다시 생성
            dD = “29”;
        } else {
            dD = “28”;
        }
    } else if (chkMonth2.indexOf(dM) > -1) { //31인 경우 30일로 변경
        if (Number(dD) > 30) {
            dD = “30”;
        }
    }
}

$r_title(수정 후)
if (Number(dD) >= 29) {
    if (dM == 2) {
        var dY = cDate.getFullYear();
        var isLeafYear = ((dY % 400 == 0) || ((dY % 4 == 0) && (dY % 100 != 0))) ? true : false;
        if (isLeafYear) {
            dD = "29";
        } else {
            dD = "28";
        }
    } else if (Number(dD) > 30 && (dM == 4 || dm == 6 || dm == 9 || dM == 11)) {
        dD = "30”;
    }
}

가독성

코드 분량과 코드 실행에 필요한 자원을 고려하여 최대한 가독성이 높은 형태로 코드를 작성하십시오.

$r_title(수정 전)
//년월일 또는 년,월,일 또는 년,월,일,시,분,초에 해당하는 파라미터를 조합하여 일자 스트링을 반환한다.
scwin.dateTime = function() {
  try{
    var len = arguments.length;
    var isDate = true;
    if (len > 1) {
        var year = "";
        var month = "";
        var day = "";
        var hour = "";
        var minute = "";
        var second = "";
        if ( len > 3) {
              year = arguments[0] + "";
              month =  arguments[1] + "";
              day = arguments[2] + "";
              hour = arguments[3]+"";
              minute = arguments[4] + "";
              second =arguments[5] + "";
        } else {
              year = arguments[0] + "";
              month =  arguments[1] + "";
              day = arguments[2] + "";
              hour = "0";
              minute = "0";
              second = "0";
        }
      if (month.length < 2) month = "0" + month;
      if (day.length < 2) day = "0" + day;
        if (hour.length < 2) hour = "0" + hour;
      if (minute.length < 2) minute = "0" + minute;
      if (second.length < 2) second = "0" + second;
      date = year + month + day + hour + minute + second;
      isDate = scwin.isDate(date);
    } else {
        if (typeof arguments[0] == "string") {
          date = arguments[0];
          var yy = date.substring(0, 4);
          var MM = date.substring(4, 6);
          var dd = date.substring(6, 8);
          var hh = date.substring(8, 10);
          var mm = date.substring(10, 12);
          var ss = date.substring(12);
          if (MM.length < 2) MM = "01";
          if (dd.length < 2) dd = "01";
          if (hh.length < 2) hh = "00";
          if (mm.length < 2) mm = "00";
          if (ss.length < 2) ss = "00";
          date = yy + MM + dd + hh + mm + ss;
          isDate = scwin.isDate(date);
        } else {
        }
    }
    if(!isDate) {
      date = "00000101";
    }
    return date;
  } catch (e) {
    scwin.trace("[scwin.dateTime] Exception :: ", e);
  }
};

$r_title(수정 후)
scwin.dateTime = function() {
    try{
        var len = arguments.length;
        var yy, MM, dd, hh, mm, ss;
        if (len == 1) {
            var pYmd = arguments[0]+"";
            yy = scwin.lpad(pYmd.substring(0, 4), "0", 4);
            MM = scwin.lpad(pYmd.substring(4, 6), "0", 2);
            dd = scwin.lpad(pYmd.substring(6, 8), "0", 2);
            hh = scwin.lpad(pYmd.substring(8, 10), "0", 2);
            mm = scwin.lpad(pYmd.substring(10, 12), "0", 2);
            ss = scwin.lpad(pYmd.substring(12), "0", 2);
        } else {
            yy = (typeof arguments[0] == "undefined") ? "0000" : scwin.lpad(arguments[0]+"", "0", 4);
            MM = (typeof arguments[1] == "undefined") ? "01" : scwin.lpad(arguments[1]+"", "0", 2);
            dd = (typeof arguments[2] == "undefined") ? "01" : scwin.lpad(arguments[2]+"", "0", 2);
            hh = (typeof arguments[3] == "undefined") ? "00" : scwin.lpad(arguments[3]+"", "0", 2);
            mm = (typeof arguments[4] == "undefined") ? "00" : scwin.lpad(arguments[4]+"", "0", 2);
            ss = (typeof arguments[5] == "undefined") ? "00" : scwin.lpad(arguments[5]+"", "0", 2);
        }
        if (MM == "00") MM = "01";
        if (dd == "00") dd = "01";
        var date = yy + MM + dd + hh + mm + ss;
        var isDate = scwin.isDate(date);
        if(!isDate) {
            date = "00000101";
        }
        return date;
    } catch (e) {
        scwin.trace("[scwin.dateTime] Exception :: ", e);
    }
};

데이터 형태에 적합한 수식 사용

데이터 형태에 적합한 수식을 사용해야 합니다.

$r_title(수정 전)
scwin.getMonthTerm = function (fromDate, toDate) {
    try{
        var iMonth = 0;
        var iYear = 0;
        var rMonth = "";
        if (!scwin.isDate(fromDate) || !scwin.isDate(toDate)) {
            return ;
        }
        if (parseInt(fromDate) <= parseInt(toDate)) {   //date를 숫자로 바꾸어 계산 - 정확하지 않음
            iYear = parseInt(toDate.substr(0, 4)) - parseInt(fromDate.substr(0,4));
            iMonth = parseInt(toDate.substr(4, 2), 10) - parseInt(fromDate.substr(4,2), 10);
            rMonth = (12 * iYear) + iMonth;
        }

$r_title(수정 후)
scwin.getMonthTerm = function (fromDate, toDate) {
    try{
        var iMonth = 0;
        var iYear = 0;
        var rMonth = 0;
        if (!scwin.isDate(fromDate) || !scwin.isDate(toDate))  return;
        if ($p.dateDiff(fromDate.substring(0,8), toDate.substring(0,8)) >= 0) 
			{
            iYear = parseInt(toDate.substr(0, 4)) - parseInt(fromDate.substr(0,4));
            iMonth = parseInt(toDate.substr(4, 2), 10) - parseInt(fromDate.substr(4,2), 10);
            rMonth = (12 * iYear) + iMonth;
        } else {
            return “”;
        }

변수 선언 및 참조 방식

선언되는 변수의 사용성에 따라 선언 위치와 사용 방법을 결정하십시오.

수정 내용은 아래와 같습니다.

1. CodeTable은 입력값 검증을 위해 참조되는 입력가능한 문자의 집합 스트링이므로 top에서만 선언. (메모리 절약)

2. IFrame이 참조하는 API는 top의 String을 반환하는 API로 생성. (반환값은 slice(0)을 통해 복사된 string.)

3. 컬럼 값에 허용 가능한 문자들을 IFrame 내의 API를 이용하여 하나의 String으로 생성.

4. 컬럼 값에서 하나의 char 씩 가져와서 가능한 문자 String에 존재하는지 확인.

팝업 파라미터 전달

String이 아닌 Object 형식의 리턴 값은 사용하지 마십시오. 브라우저에 따라 메모리 누수가 발생할 수 있습니다.

실행 시간 최소화

공통 소스는 최대한 빠른 시간에 결과 값을 반환할 수 있어야 합니다.

$r_title(수정 전)
var windodwObj = {
    pageUrl : "/" + Fprefix + "/xml/" + Formid +".xml",
    menuCd : Formid,
    screenNm : Formid,
    menuNm : FormName || Formid,
    pageSize : pageSize
};
if (window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid).length > 0) {
  windodwObj.pageUrl = window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid)[0].pageUrl || "" ;
  windodwObj.menuCd =  window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid)[0].menuCd || "" ;
  windodwObj.menuNm = window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid)[0].menuNm || "" ;
  windodwObj.screenNm = window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid)[0].screenNm || "" ;
  windodwObj.parentMenu = window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid)[0].parentMenu || "";
} else if (window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName).length > 0) {
  windodwObj.pageUrl = window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName)[0].pageUrl || "";
  windodwObj.menuCd =  window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName)[0].menuCd || "";
  windodwObj.menuNm = window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName)[0].menuNm || "";
  windodwObj.screenNm = window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName)[0].screenNm || "";
  windodwObj.parentMenu = window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName)[0].parentMenu || "";
}
if( GLV.G_DEVFG == "L" && (windodwObj.screenNm == "ZCOMSMKF00010" || windodwObj.screenNm == "ZCLMSVOC21410" || windodwObj.screenNm == "ZCLMSVOC11410") ) {
  strFunction = "scwin.frmload_only_arg_call_" + Formid;
}
var openAction = "selectWindow";
var selectedTab = ( window.top.mainTab.getSelectedTabIndex() +1).zf(2);  
var windowMDI = window.top.scwin.object("mdi"+selectedTab);
//이미 오픈되어 있으면 창호출 안함.
if (windowMDI && windowMDI.getWindow(windodwObj.screenNm)) {     
  return scwin._reloadNew(windodwObj.screenNm, strArg, strFunction);
}

$r_title(수정 후)
ar reloadCheck = false;  //이미 오픈되어 있으면 창호출 안함.
if (windowMDI) {
  if (typeof FormName != "undefined" && FormName != "") {
    if (windowMDI.getWindow(FormName)) {
        reloadCheck = true;
        Formid = windowMDI.getWindow(FormName).windowId; //window에 해당하는 id를 반환하는 api 사용
    }
  } else if (typeof Formid != "undefined" && Formid != "") {
    if (windowMDI.getWindowByWindowId(Formid)) reloadCheck = true;
  }
  if(reloadCheck)  return scwin._reloadNew(Formid, strArg, strFunction);
}
var windodwObj = {
    pageUrl : "/" + Fprefix + "/xml/" + Formid +".xml",
    menuCd : Formid,
    screenNm : Formid,
    menuNm : FormName || Formid,
    pageSize : pageSize
};
var menuDataList = window.top.dlt_MenuList.getMatchedJSON("menuCd", Formid);
if (menuDataList.length <= 0) menuDataList = window.top.dlt_MenuList.getMatchedJSON("screenNm", FormName);
if (menuDataList.length > 0) {
  windodwObj.pageUrl = menuDataList[0].pageUrl || "" ;
  windodwObj.menuCd =  menuDataList[0].menuCd || "" ;
  windodwObj.menuNm = menuDataList[0].menuNm || "" ;
  windodwObj.screenNm = menuDataList[0].screenNm || "" ;
  windodwObj.parentMenu = menuDataList[0].parentMenu || "";
}

DataCollection 관련 API의 반복 수행

DataList나 DatdaMap의 경우, 데이터 변경이 발생할 때마다 이벤트도 함께 발생합니다. 다른 컴포넌트에 영향을 주는 이벤트일 경우, 한번에 데이터를 변경할 것을 권장합니다.

$r_title(수정 전)
scwin.addBodyLink = function(ds_obj){
  var lv_ARow = ds_obj.insertRow();
  ds_obj.setCellData(lv_ARow, "link_nm", "주민등록증 진위확인/잠김해제");
  ds_obj.setCellData(lv_ARow, "link_url", "http://www.egov.go.kr/main?a=AA090UserJuminIsCertApp");
  ds_obj.setCellData(lv_ARow, "add_gubun", 1);   
   
  lv_ARow = ds_obj.insertRow();
  ds_obj.setCellData(lv_ARow, "link_nm", "운전면허증 진위여부 조회");
  ds_obj.setCellData(lv_ARow, "link_url", "http://dls.koroad.or.kr/jsp/ool/olq/OL_LcnsTruthYnRtvV.jsp");
  ds_obj.setCellData(lv_ARow, "add_gubun", 1);       
   
  lv_ARow = ds_obj.insertRow();
  ds_obj.setCellData(lv_ARow, "link_nm", "외국인등록증 진위 확인");
  ds_obj.setCellData(lv_ARow, "link_url", "http://www.hikorea.go.kr/pt/FrnRegIdChkPopupR_kr.pt");
  ds_obj.setCellData(lv_ARow, "add_gubun", 1); 
  ……

$r_title(수정 후)

scwin.addBodyLink = function(ds_obj){
	var linkData = {{"link_nm”:"주민등록증 진위확인/잠김해제”, 
				"link_url”:"http://www.egov.go.kr/main?a=AArtApp”, 	
				”add_gubun”:”1”},
				{"link_nm”:"운전면허증 진위여부 조회”, 
				"link_url”:"http://dls.koroad.or.kr/jsp/oolRtvV.jsp”, 
				”add_gubun”:”1”},		
				  ……
	};
	ds_obj.setJSON(linkData, true);

주요 확인 사항

기본

속도

메모리

백화 현상

메모리 관리

메모리와 성능을 고려한 개발은 프로젝트의 성공 여부를 결정하는 요소 중 하나입니다. 특히, 특히 공통 소스는 모든 업무 화면에 영향을 줄 수 있기 때문에 메모리 및 성능에 영향이 없도록 최대한 간결하게 작성하심시오.

메모리 사용량이 증가는 메모리 부족을 의미하며 이는 곧 스크립트 수행 속도 저하로 이어집니다. 브라우저에 HTML 태그가 느리게 렌더링되어 브라우저의 백화 현상이 발생하거나 심할 경우 브라우저가 정상 동작하지 않습니다.

메모리 관리는 브라우저 사용성 및 개발 프로그램의 성능의 핵심입니다.

메모리 누수 방지

WebSquare 공개 API 사용

• WebSquare5는 각 컴포넌트 별로 API를 제공하며 개발자는 각 컴포넌트에 대해 이벤트를 등록할 수 잇습니다. 제공된 API를 사용하여 개발할 것을 권장합니다.

• 공개 API와 이벤트는 WebSquare 기술문서에서 확인할 수 있습니다.

• API 문서에 공개되지 않았지만 브라우저 개발자 도구에서만 확인된 API는 향후 변경 가능성이 있습니다. 해당 API 사용시 스크립트 에러가 발생할 수 있으며 사이트에서 문제 확인 및 디버깅이 어렵고 프로그램 수정이 필요한 경우도 발생할 수 있습니다.

jQuery의 제한적 사용

• jQuery에서 제공하는 API를 이용하여 컴포넌트를 검색하는 것은 간편하지만 검색 대상이 많은 경우 속도 저하가 발생할 수 있습니다. 또한 검색 후 수행되는 스크립트에 따라 검색을 위해 사용한 Object가 릴리즈 되지 않을 수도 있습니다.

• jQuery를 이용하여 이벤트를 등록할 경우 일부 브라우저에서는 컴포넌트(HTML Tag)에 등록된 이벤트를 먼저 삭제해야 컴포넌트 삭제시 컴포넌트에 연계된 Object들이 릴리즈 되는 경우가 있습니다.

최상위 scope에 함수 및 변수 선언 제한

• WebSquare에서는 업무 화면에서 함수 또는 상수 값 선언 시 객체의 속성으로 설정하여 사용할 것을 권장합니다. 화면 unload 시점에 선언된 객체의 속성으로 등록된 함수 및 상수를 제거하여 메모리 누수를 방지하십시오.

• 업무화면 내에서 사용하는 전역 변수 또한 지정된 객체의 속성으로 등록해서 사용하십시오.

$r_title(비권장 사용 예제)
var GlobalValue = 1;

function doInit() {
	//Something
}

$r_title(권장 사용 예제)

scvar.GlobalValue = 1;

scwin.doInit = function() {
	//Something
}

Submission

업무화면에서 Submission 생성

업무화면에서 통신 객체(Submission)를 생성하여 필요한 통신 객체를 수행하는 것을 권장합니다.

업무 화면에서 필요한 통신 객체를 미리 생성해 놓는 것은 소스 가독성이나 Workflow 연계를 위해서도 필요한 중요한 작업입니다.

동적으로 Submission을 생성하는 경우 동일한 id의 Submission이 존재하는지 확인하십시오. 동일한 ID를 사용할 경우 기존 Submission의 ID를 수정하거나 삭제하십시오.

$r_title(비권장 사용 예제)
common.executeSubmission = function(options) {
	
	// ...

	var submissionObj = {
  		“id” : options.id,
 		 …
	}

	$p.createSubmission(submissionObj);
}

$r_title(권장 사용 예제)
common.executeSubmission = function(options) {
	
	// ...

	var submissionObj = {
		“id” : options.id,
		…
		}

	if ($p.getSubmission(submissionObj.id) != null) {
		$p.deleteSubmission(submissionObj.id);
	}

	$p.createSubmission(submissionObj);
}

Async 통신 권장 (Sync 모드 경고)

Submission 실행시 비동기(Asynchronous) 모드의 통신을 권장합니다.

config.xml 파일에 <warningSyn> 항목이 "true"로 설정된 경우, 동기(synchronous) 모드의 Submission에 대해 경고 메시지가 표시됩니다.

$r_title(사용 예)
<WebSquare>
	<notRecommended>
        <warningSync value="true"/>
    </notRecommended>
</WebSquare>

$p.ajax

응답 객체의 직접 할당 금지

WebSquare는 Submission을 이용한 통신을 권장합니다. 그러나 사용자가 직접 통신 관련 설정을 해야하는 경우를 위해 $p.ajax API를 제공합니다.

아래 에제의 경우, 사용자가 직접 제어할 수 있도록 응답 결과 객체를 반환하고 있습니다. 그러나 업무 화면의 콜백 함수로 그대로 넘기기 때문에 업무 화면에서 변수 등에 직접 할당할 경우 통신 완료 후 응답 객체가 메모리에서 릴리즈되지 않을 수 있습니다.

$r_title(비권장 사용 예)
$p.ajax({
   action : action,
   mode : mode,
   mediatype : mediatype,
   method : method,
   processMsg : processMsg,
   requestData : reqData,
   requestHeader : requestHeader,
   beforeAjax : function(e) {
   },
   success : function(e) {
       var resBody = e.responseBody;
       if (callbackFnc != '') {
           eval(callbackFnc + '(resBody)');
       }
   },
   error : function(e) {
       return _requestErrCallback(e);
   }
});

$r_title(권장 사용 예)
$p.ajax({
   action : action,
   mode : mode,
   mediatype : mediatype,
   method : method,
   processMsg : processMsg,
   requestData : reqData,
   requestHeader : requestHeader,
   beforeAjax : function(e) {
   },
   success : function(e) {
      if (callbackFnc != '') {
        window[callbackFnc](JSON.parse(e.responseText));
      }
   },
   error : function(e) {
       return _requestErrCallback(e);
   }
});

Closure 내부에서 객체 참조

Closure는 전역이 아닌 지역 변수 선언이 가능하여 공통 모듈에서 많이 사용합니다. 단, Closure 안에서 Object 형태의 외부 객체를 직접 참조하지 않도록 주의하십시오. 메모리에서 릴리즈 되지 않을 수 있습니다.

특히 Closure 함수를 비동기 형태로 호출할 경우, 객체를 직접 다른 변수에 할당하면 참조 관계가 발생합니다. 이 경우, 함수 실행이 완료되더라도 메모리에서 제거되지 않을 수 있습니다.

아래 에제에서 test2는 test와 직접 참조 관계가 이루어져 test 값 변경에 따라 test2 값이 변경됩니다. 즉 test2와 참조 관계가 발생하여 test 사용이 끝난 뒤에도 메모리에서 제거되지 않습니다.

$r_title(직접 참조 관계 예)
//CASE1

var test = {a: "abc", b: "bbc"};
scwin.functionTest = function(value) {
  scwin.test2 = value;
  console.log(value);
	// 결과 : {a: "abc", b: "bbc"}
  console.log(scwin.test2);
	// 결과 : {a: "abc", b: "bbc"}

  for (var item in value) { value[item] = null; }
  console.log(value);
	// 결과 : {a: null, b: null}
  console.log(scwin.test2);
	// 결과 : {a: null, b: null}
};

scwin.functionTest(test);
console.log(test);
	// 결과 : {a: null, b: null}

//CASE2

var test = {a: "abc", b: "bbc"};
scwin.functionTest = function(value) {
	scwin.test2 = value;
	console.log(value);
		// 결과 : {a: "abc", b: "bbc"}
	console.log(scwin.test2);
		// 결과 : {a: "abc", b: "bbc"}
};
scwin.functionTest(test);
for (var item in test) { test[item] = null; }
console.log(test);
	// 결과 : {a: null, b: null}
console.log(scwin.test2);
	// 결과 : {a: null, b: null}

따라서 일반적으로 String 타입으로 파라미터를 전달하나, 직접 Object형식으로 파라미터를 전달해야만 하는 경우 반드시 초기화를 수행하여 호출된 함수에서 전역변수로 재사용되는 것을 방지하십시오.

$r_title(비권장 사용 예)
$p.ajax({
  
	// ...
  
	success :	function(e) {
					resBody = e.responseBody;
					if (callbackFnc != '') {
						eval(callbackFnc + '(resBody, reqAjaxOptions)');
              		}
            	}
  });
}

scwin.callback1 = function(resBody, reqAjaxOptions) {
	if (reqAjaxOptions.mode) {

	// ...

	}
  scwin.orgResData = resBody;
}

$r_title(권장 사용 예)
$p.ajax({

	//...

	 success :	function(e) {
					resBody = e.responseBody;
					if (callbackFnc != '') {
						eval(callbackFnc + '(resBody, reqAjaxOptions)');
						for(var item in resBody){
						resBody[item] = null;
						}
						for(var item in reqAjaxOptions){
							reqAjaxOptions[item] = null;
						}
					}
            }
  });
}

scwin.callback1 = function(resBody, reqAjaxOptions) {
	if (reqAjaxOptions.mode) {

	// ...

	}
	
	scwin.orgResData = JSON.parse(JSON.stringify(resBody));
}

DataCollection

생성

DataCollection은 개발도구에서 생성하거나 API를 통해서 생성할 수 있습니다. 단, 업무화면에서는 유지보수를 위해 개발도구에서 DataCollection 선언 한 뒤 스크립트에서 사용하는 것을 권장합니다.

$r_title(비권장 사용 예)
common.searchCondition = function(targetCollectionId) {
	var option = {};
	option.id = targetCollectionId;
	option.type = "dataList";
	option.option = {"baseNode": "list", "repeatNode": "map"}; 
	option.columnInfo = [{"id":"title", "name": "title", "dataType":"text"},
		{"id":"value", "name": "value", "dataType":"text"}];
	$p.data.create(option);
	
	//...

}

$r_title(권장 사용 예)
common.searchCondition = function(targetCollectionId) {
	$p.data.remove(targetCollectionId)
	var option = {};
	option.id = targetCollectionId;
	option.type = "dataList";
	option.option = {"baseNode": "list", "repeatNode": "map"}; 
	option.columnInfo = [{"id":"title", "name": "title", "dataType":"text"},
		{"id":"value", "name": "value", "dataType":"text"}];
	$p.data.create(option);

	// ...

}

초기화

DataList는 removeAll, DataMap은 reset API를 이용하여 등록된 데이터를 삭제하십시오.

$r_title(권장 사용 예)
common.clearData = function(collectionObj) {
	switch (collectionObj.initializeType) {
	case "dataList":
		collectionObj.removeAll();
	case "dataMap":
		collectionObj.reset();
	}
}

변수명

일반적인 네이밍 규칙에 어긋난 변수명 역시 메모리 누스를 유발합니다. 일부 브라우저(Internet Explorer)에서 변수명이 숫자로 이루어진 경우 메모리 누수 현상이 발생하는 경우가 있습니다. 일반적인 변수명 사용 규칙에 따라 영문으로 시작하는 변수명을 사용하십시오.

WebSquare에서 제공하는 컴포넌트는 id를 지정해야 합니다. 단, 이벤트 등록이나 스크립트에서 호출할 필요가 없는 경우 id를 생략할 수 있습니다.

$r_title(비권장 사용 예)
<w2:anchor class="todolist_refresh" id="1" outerDiv="true">

$r_title(권장 사용 예)
<w2:anchor class="todolist_refresh" id="anchor01" outerDiv="true">

// 혹은 id 삭제 가능

<w2:anchor class="todolist_refresh" outerDiv="true">

팝업

팝업의 Lifecycle

• 팝업에서 opener의 함수를 호출하는 경우, 호출된 함수가 정상적으로 완료되어 참조 관계가 끝난 뒤에 팝업을 종료해야 합니다.

• 팝업의 호출 순서에 따라 역으로 팝업을 종료하십시오 즉 A → B → C 순서로 호출했다면 C → B → A 순서로 종료해야 합니다.

• Popup 결과는 기본 자료형(일반적으로 String)으로 반환하십시오. Object (JSON 등) 형식으로 직접 전달할 경우 메모리 누수가 발생할 수 있다. (타 Frame으로 객체 전달 참조.)

• 최신 ECMAScript 표준은 아래의 6개의 자료형을 정의합니다.

  • 기본 자료형(Primitive)인 여섯가지 데이터 타입: Boolean, Null, Undefined, Number, String, Symbol

타 Frame으로 객체 전달

• 다른 Frame의 함수 호출 시 String 타입의 객체 형태로 파라미터를 전달하십시오. String 타입이 아닌 JSON 객체 등을 직접 전달하여 다른 Frame의 객체에 할당할 경우 일부 브라우저에서 메모리 누수 현상이 발생합니다.

• 다른 Frame간 전달되는 Object의 타입은 팝업 형식의 호출에만 국한된 것이 아니고 IFrame으로 구성된 화면에도 적용됩니다. Frame 간의 파라미터 전달 방식은 String 타입의 객체를 파라미터로 전달하십시오.

$r_title(비권장 사용 예)
//Child

comf.onPopupClose = function(retValue) {

//...

comf.onPopupClose(retValue);
}
comf.onPopupClose = function(retValue) {
	opener.comf._onPopupClose(retValue);
}

//Parent
comf._onPopupClose = function(retValue) {
	scwin.callUserCallback(retValue);
}

$r_title(권장 사용 예)
//Child

scwin.onPopupClose = function() {

  // ...

comf.onPopupClose(retValue);
}
comf.onPopupClose = function(retValue) {
	var str = JSON.stringify(retValue);
	opener.comf._onPopupClose(str);
}


//Parent
comf._onPopupClose = function(str) {
	var retValue = JSON.parse(str);
	scwin.callUserCallback(retValue);
}

객체 제어

JavaScript는 느슨한 타입(loosely typed) 언어, 혹은 동적(dynamic) 언어입니다. 즉, 변수 타입을 미리 선언할 필요가 없고 프로그램이 처리되는 과정에서 자동으로 파악 변환되기도 합니다. 공통함수가 객체 타입에 따른 대응을 못하고 에러가 발생하는 경우 스크립트가 중지되고 브라우저에 따라 성능 및 메모리에 영향을 받습니다.

$r_title(비권장 사용 예)
scwin.addDateSimpleisDate = function(sDate) {
	try {
		var date = “”;
		var isDate = scwin.isDate(pYmd);  //8자리 이상의 string여부 체크
		if (!isDate) return;
		cYmd = pYmd.substring(0, 8);
		var dTime = (pYmd+””).substring(8);
		var isSet = Number(offset); //isDate에서 숫자인지 체크하지는 않음      
		if (isDate && typeof isSet == “number”)  date = $p.dateAdd(cYmd, isSet);
		if (typeof format != “undefined” && format == “yyyyMMdd”) {
			date = date;
		} else {
			date = date + “” + dTime;
		}
		return date;
	} catch (e) { }
}

$r_title(권장 사용 예)
scwin.addDateSimpleisDate = function(sDate) {
	try {
		var date = "";
		var isDate = scwin.isDate(pYmd);
		if (!isDate) return;
		var cYmd = pYmd.substring(0, 8);
		var dTime = pYmd.substring(8);
		var isSet = Number(offset);
		if (!isNaN(isSet)) date = $p.dateAdd(cYmd, isSet);  
		// Number 변환시 NaN가 아닌 경우 dateAdd 수행
		if (typeof format == “undefined” || format != “yyyyMMdd”)  
		date = date + dTime;
		return date
	} catch (e) { }
}

전역 변수 선언

JavasSript는 느슨한 타입(loosely typed) 언어로 변수 선언을 위해 사용하는 var 문자를 누락해도 스크립트는 정상적 수행됩니다. 단, 이 경우 해당 변수는 전역에 선언되어, 함수 종료 후에도 계속 참조가 가능하고 자동 릴리즈가 되지 않습니다. SPA 방식으로 이동하는 화면인 경우 이는 메모리 누수 현상으로 이어집니다.

$r_title(비권장 사용 예)
scwin.getDay = function(pYmd, format) {
	try {
		if (pYmd.length > 8) {
			pYmd = pYmd.substring(0, 8);
	}
	if (typeof format !== "undefined" && format !== "" && 
	WebSquare.util.getBoolean(format)) {
		date = WebSquare.date.getDay(pYmd);	
		//date가 var 선언이 생략되어 있어 전역변수로 사용됨
    } else {
      // …
    }
    return date;
  } catch (e) {
  }
}

$r_title(권장 사용 예)
scwin.getDay = function(pYmd, format) {
	try {
    var date = -1;  
	//var를 생략하지 않고 
	// date가 가질 수 없는 값을 초기값으로 설정한뒤 
	// case에 따른 수식결과를 저장한뒤 리턴한다.
    if (pYmd.length > 8) {
		pYmd = pYmd.substring(0, 8);
    }
    if (typeof format !== "undefined" && format !== "" && 
	WebSquare.util.getBoolean(format)) {
		date = WebSquare.date.getDay(pYmd);
    } else {
       // …
    }
    return date;
  } catch (e) {
  }
}

공통 코드 조회

각 업무 페이지의 SelectBox나 CheckBox와 같은 공통 코드(혹은 코드성 데이터)가 존재합니다. 이 같은 공통 코드는 업무 페이지의 데이터를 불러오기 전에 먼저 조회해야 합니다. 비동기(asynchronous) 통신을 사용할 경우 공통 코드 조회가 완료되기 전에 업무 페이지의 데이터가 먼저 로드될 수 있습니다. 이 경우 SelectBox, CheckBox와 같은 공통 코드가 제대로 표현되지 않습니다.

아래의 방법을 권장합니다.

• orkflow 혹은 동기 통신을 사용하십시오.

• 동기 통신을 통해 함수 구현 시 하나의 request에 (각 업무 페이지에서 필요한) 코드 여러 개를 한번에 조회하십시오.

• MDI 혹은 WindowContainer를 사용할 경우 한번 조회한 공통 코드는 공통 영역에 저장하십시오.

웹사이트 성능 최적화

WebSquare5로 렌더링된 화면은 대부분의 작업을 브라우저에 위임합니다. 즉, XML 파일을 HTML Tag 로 변환하여 브라우저가 변환된 HTML을 해석하도록 위임합니다.

아래와 같은 최적화 작업을 수행하여 웹사이트 성능을 최적화하십시오.

Expires 헤더 추가

정적인 자원(stylesheet, image, script 등)의 비효율적인 처리는 성능 저하로 연결됩니다.

해당 자원들 헤더에 Expires 정보를 추가하여 캐시 처리를 하십시오.

Gzip 압축

외부 파일 및 Response 데이터를 압축하여 성능을 높일 수 있습니다.

대부분의 브라우저가 Gzip 압축 전송을 지원하므로 Gzip 압축을 권장합니다.

기타 주의할 내용

WFrame

IFrame 수가 지나치게 많은 경우 메모리 점유율이 올라갑니다. IFrame 대신 WFrame을 사용을 권장합니다.

TabControl

TabControl 컴포넌트는 frameMode 속성값으로 iframe과 wframe을 제공하며, 해당 속성값에 따라 컨텐츠를 렌더링합니다. 단, iframe 을 설정할 경우 탭 수에 비례하여 브라우저의 메모리 점유가 증가합니다. 따라서 메인 층에서 사용하는 경우에만 속성값을 iframe으로 지정하길 권장합니다. src 속성은 컨텐츠에 웹스퀘어5 컴포넌트를 직접 구성하지 않고 content 영역을 XML 파일을 불러 렌더링합니다.

다음은 잘못 사용한 코드 예입니다.

$r_title(잘못된 frameMode 설정 (예))

<w2:tabControl confirmTrueAction="exist" useTabKeyOnly="true" id="tabControl1" useConfirmMessage="false" confirmFalseAction="new"
    alwaysDraw="false">
    <w2:tabs id="tabs1" style="width:70px;height:30px" label="" disabled="false"></w2:tabs>
    <w2:tabs id="tabs2" style="width:70px;height:30px" label="" disabled="false"></w2:tabs>
    <w2:tabs id="tabs3" style="width:70px;height:30px" label="" disabled="false"></w2:tabs>
    <w2:tabs id="tabs4" style="width:70px;height:30px" label="" disabled="false"></w2:tabs>
    <!-- 올바른 예 -->
    <w2:content id="content1" alwaysDraw="false" frameMode="wframe" src="/tabChild_001.xml"></w2:content>
    <!-- 잘못된 예. 브라우저 리소스를 많이 사용하게 될 iframe 를 사용 -->
    <w2:content id="content2" alwaysDraw="false" frameMode="iframe" src="/tabChild_002.xml"></w2:content>
    <!-- 잘못된 예. frameMode를 사용하지 않음. wframe 를 사용하여 해당 컴포넌트에 src 사용. -->
    <w2:content id="content3" alwaysDraw="false">
        <w2:wframe src="/tabChild_003.xml"></w2:wframe>
    </w2:content>
    <!-- 잘못된 예. frameMode 를 사용하지 않음. iframe 를 사용 해당 컴포넌트에 src 사용. -->
    <w2:content id="content4" alwaysDraw="false">
        <w2:iframe id="" src="/tabChild_004.xml" spa="false"></w2:iframe>
    </w2:content>
</w2:tabControl>

동기 요청 최소화

대부분의 프로젝트에서는 현재 시간 (서버 시간), 사용자 정보, 또는 사용자 권한을 조회하기 위해 동기 요청을 사용합니다. 한 화면에서 동기 요청을 여러 번 호출하는 것은 성능 저하로 이어질 수 있습니다.

하나의 요청으로 처리 가능한 함수를 구현하십시오.

성능 관리

초기 화면 네트워크 튜닝

초기 화면은 시스템 관점에서는 리소스 다운로드와 실행 및 그 외 준비로 시간이 많이 소요되는 단계이지만, 사용자 입장에서는 시스템의 진입 단계로 빠른 응답속도가 제공되어야 하는 중요한 화면입니다. 따라서 네트워크를 통해 리소스가 수집되는 단계를 이해하여 리소스 로딩에 대한 튜닝 작업이 반드시 필요합니다.

리소스 로딩

Network 패널의 주어진 입력 항목에 대한 전체 타이밍 정보를 확인할 수 있습니다.

위와 같은 정보는 아래의 console 명령으로 추출할 수 있습니다.

performance.getEntriesByType('resource').filter(item => item.name.includes("config.xml"))

네트워크 문제 진단

Queue에 저장되거나 지연된 시리즈

• 확인된 가장 일반적인 문제는 큐에 저장되거나 지연된 일련의 항목으로 이런 현상이 나타나면 단일 클라이언트에서 너무 많은 리소스를 가져오고 있다는 의미입니다.

• HTTP 1.0/1.1 연결의 경우, Chrome은 호스트당 최대 6개의 TCP 연결을 적용합니다. 한번에 12개의 항목을 요청하는 경우, 첫 6개부터 먼저 시작되고 나머지 절반은 큐에 저장됩니다.

• 첫 절반 중 하나가 완료되면 큐에 대개중인 첫 번째 항목이 요청 프로세스를 시작합니다.

느린 TTFB

느린 TTFB는 긴 대기 시간 즉 녹색이 많이 나타나는 경우입니다. 이 시간은 200ms 미만이 좋습니다. 이 시간이 길다면, 그 원인은 아래와 같습니다.

1. 클라이언트와 서버 사이의 네트워크 상태가 잘못된 경우

2. 서버 애플리케이션의 응답이 느린 경우

처리 용량 확보

해결 방안

jQuery 셀렉터 사용

id 셀렉터

사용 예 (1)

Object에 지정된 id를 이용하여 검색하는 것이 가장 빠른 속도를 보장합니다.

$r_title(예제 1)
<xf:group class="grp_shbox" id="">
	<w2:anchor id="btn_shbox " class="btn_shbox_hide" outerDiv="false" 
		style="" ev:onclick="scwin.btn_shbox_hide_onclick">
		<xf:label><![CDATA[검색영역 숨기기]]></xf:label>
	</w2:anchor>
</xf:group>

Anchor 컴포넌트 접근 방법

".grp_shbox. btn_shbox_hide”

“.btn_shbox_hide”

“#btn_shbox”

“a.btn_shbox_hide”

가장 빨리 접근하는 방법: “#btn_shbox”

사용 예 (2)

아래와 같이 컴포넌트에 id 속성이 없는 경우에는 가장 가까운 상위 컴포넌트의 id 속성으로부터 자식 셀렉터를 이용하여 “#link_area .link_text”로 지정하는 방법이 더 빠릅니다.

$r_title(예제 2)
<xf:group id="link_area" class="btn_shbox" tagName="ul">
	<xf:group class="" tagName="li">
		<w2:anchor class="link_text" outerDiv="false" style="">
			<xf:label><![CDATA[고객센터]]></xf:label>
		</w2:anchor>
	</xf:group>
</xf:group>

태그 셀렉터

클래스 셀렉터는 jquery 셀렉터 중 검색 시간이 가장 많이 소요됩니다. 태그 명을 사용하거나 클래스로 셀렉터를 지정해야 하는 경우, 태그 명 추가를 권장합니다.

$r_title(예제)
<xf:group id="link_area" class="btn_shbox" tagName="ul">
	<xf:group class="" tagName="li">
		<w2:anchor class="link_text" outerDiv="false" style="">
			<xf:label><![CDATA[고객센터]]></xf:label>
		</w2:anchor>
	</xf:group>
</xf:group>

위의 예제에서 “#link_area .link_text”보다 “#link_area a”가 더 빠릅니다. 따라서 “#link_area a.link_text”와 같이 태그 명을 추가하는 것이 좋습니다.

메서드 체인

동일한 Object에 여러 개의 작업을 실행하는 경우 검색된 결과에 여러 개의 메소드를 붙여서 순차적으로 호출하는 “메서드 체인”을 사용하십시오. 태그를 다시 검색하는 과정을 생략할 수 있어 상당한 속도 개선을 기대할 수 있습니다.

$r_title(예제)
$("#link_area").css("color", "red").slideUp(2000).slideDown(2000);

셀렉터 캐싱

메서드 체인을 이용할 수 없는 경우, 셀렉터 검색 결과를 캐싱(변수에 저장 후 재사용)하여 재검색을 생략하고 그 결과 처리 속도를 올릴 수 있습니다. 아래는 검색 결과를 “linkText”에 저장하여 사용하는 예제입니다.

$r_title(예제)
var linkText = $("#link_area a.link_text");
linkText.css("...");
	...중략...
linkText.toggle("...");
	...중략...
linkText.click("...");

셀렉터 범위 지정

아래 예제와 같이 셀렉터의 검색 범위를 지정하여 검색 속도를 개선할 수도 있습니다.

$r_title(예제 (1))
$("#link_area li a.link_text").css("...");
	...중략...
$("#link_area li span").toggle("...");
	...중략...
$("#link_area li a").click("...");

아래는 공통 셀렉터인 $("#link_area li")를 변수 “linkText”에 저장하여 셀렉터 뒤에 검색대상인 linkText를 지정하여 변수의 범위 내에서 검색하는 예제입니다. HTML 전체에서 검색하는 보통의 지정 방법과 비교하여 검색 속도를 개선할 수 있습니다.

$r_title(예제 (2))
var linkText = $("#link_area li");
$("a.link_text", linkText).css("...");
	...중략...
$("span", linkText).toggle("...");
	...중략...
$("a", linkText).click("...");

재귀 호출과 반복문 튜닝

재귀 호출형 함수는 호출할 때 마다 스택 메모리가 생성되는며, 이는 재귀 조건이 달성된 후에야 제거됩니다. 그 결과 메모리가 계속 쌓이는 문제가 있습니다. 재귀로 호출된 함수가 많은 경우 스택 메모리 한계로 인해 스택오버플로우(stack overflow) 및 브라우저 멈춤현상이 발생합니다. 일반적인 반복문은 스택에 쌓이지 않지만 일정 시간 후에는 스크립트 수행 속도가 점점 떨어지고 스크립트 타임아웃(script timeout) 현상이 발생할 수 있습니다. 특히 모바일 브라우저는 5초 이내에 스크립트 타임아웃이 발생하기 때문에 무거운 로직을 반복문으로 처리하는 것은 자제해야 합니다.

DataCollection 제어

반복적인 DataCollection 변경

DataCollection의 데이터 변경은 이벤트 발생으로 이어지며, 이는 곧 (ref로 연결된 Component 등) 관련된 객체들에 대해서도 추가 작업이 필요함을 의미합니다. 따라서 셀단위로 데이터를 반복 설정하는 것보다 데이터를 한번에 설정할 것을 권장합니다.

$r_title(비권장 사용 예)
scwin.setBasicData = function() {
	
	// ...

	dataCollection1.setCellData("name","WebSquare");
	dataCollection1.setCellData("address","서울시 구로구");
	dataCollection1.setCellData("telephone","01011112222");
}

$r_title(일반 사용 예)
scwin.setBasicData = function() {
	var basicData = {};
	basicData["name"] = "WebSquare";
	basicData["address"] = "서울시 구로구";
	basicData["telephone"] = "01011112222";
	
	dataCollection1.setJSON(basicData);
	}

$r_title(권장 사용 예)
scwin.setBasicData = function() {
	var basicData =	{"name":"WebSquare",
					"address":"서울시 구로구",
					"telephone":"01011112222"}
	dataCollection1.setJSON(basicData);
}

여러행 추가시 Array를 이용하여 처리

여러 행을 추가하는 경우 Array를 만들어 Data를 추가한 후 한번에 DataCollection에 추가하는 것이 가능합니다.

$r_title(비권장 사용 예)
scwin.addBodyLink = function(ds_obj){
	var lv_ARow = ds_obj.insertRow();
	ds_obj.setCellData(lv_ARow, "link_nm", "주민등록증 진위확인/잠김해제");
	ds_obj.setCellData(lv_ARow, "link_url", 
	"http://www.egov.go.kr/main?a=AA090UserJuminIsCertApp");
	ds_obj.setCellData(lv_ARow, "add_gubun", 1);    
  
	lv_ARow = ds_obj.insertRow();
	ds_obj.setCellData(lv_ARow, "link_nm", "운전면허증 진위여부 조회");
	ds_obj.setCellData(lv_ARow, "link_url", 
	"http://dls.koroad.or.kr/jsp/ool/olq/OL_LcnsTruthYnRtvV.jsp");
	ds_obj.setCellData(lv_ARow, "add_gubun", 1);        
  
	lv_ARow = ds_obj.insertRow(); 
	ds_obj.setCellData(lv_ARow, "link_nm", "외국인등록증 진위 확인");
	ds_obj.setCellData(lv_ARow, "link_url", 
	"http://www.hikorea.go.kr/pt/FrnRegIdChkPopupR_kr.pt");
	ds_obj.setCellData(lv_ARow, "add_gubun", 1);  

	// ...

	ds_obj.setJSON(linkData, true);

$r_title(권장 사용 예)
scwin.addBodyLink = function(ds_obj){
	var linkData = 
		{{"link_nm”:"주민등록증 진위확인/잠김해제”, 
		"link_url”:"http://www.egov.go.kr/main?a=AA090UserJuminIsCertApp”, 
		”add_gubun”:”1”},
		{"link_nm”:"운전면허증 진위여부 조회”, 
		"link_url”:"http://dls.koroad.or.kr/jsp//OL_LcnsTruthYnRtvV.jsp”, 
		”add_gubun”:”1”},
		// ...
};
ds_obj.setJSON(linkData, true);

반복문 내에 사용시 이벤트 중지 후 처리

반복문 내에서 건당 작업이 필요한 경우, DataCollection 변경 시 발생하는 이벤트를 중지하고 변경이 완료된 후 이벤트가 발생하도록 처리하십시오.

$r_title(사용 예)
//broadcast 비활성화에 의해 dataList를 변경해도 연동된 컴포넌트 UI는 갱신되지 않음.
$p.data.setBroadcast(false); 
	for(var i = 0; i < 10; i++){
		dataList1.insertRow(i);
	};   
	for(var i = 0; i < 10; i++){
		dataList2.insertRow(i);
	}; 

//dataList1, dataList2의 최종데이터로 연동된 컴포넌트 ui가 갱신된다.
$p.data.setBroadcast(true);

GridView 튜닝

• GridView 컴포넌트는 많은 양의 데이터를 DataCollection에 저장하고 이를 화면에 Table 형식으로 표시합니다. 이를 위헤 각 셀에 지정된 타입에 따라 스트립트 수행 및 렌더링이 반복적으로 발생합니다. 데이터 요청부터 GridView에 데이터라 렌더링되는 시간은 셀이 많은 수록 증가하고 증가폭도 늘어납니다.

메모리의 사용량 역시 셀이 많을수록 증가폭이 늘어납니다.

아래는 1초 내 메모리 증가분은 100M를 기준으로 허용하는 것입니다. 아래 테이블에 따라, 약 400,000 Cell을 기준으로 제한하는 것을 권장합니다.

성능 개선을 위한 추가 기능

SPA

WebSquare 엔진, 공통 CSS, 공통 JavaScript 등 여러 화면에서 공통으로 사용되는 모듈과 화면 소스의 Lifecycle을 분리하여 화면 로딩 및 전환 속도를 높이는 기능입니다. WindowContainer 및 TabControl는 WebSquare 엔진, 공통 CSS, 공통 JavaScript 등 여러 화면에서 공통으로 사용되는 모듈을 미리 로딩하여 화면 로딩 및 전환 속도를 높일 수 있습니다.

WFrame

IFrame은 분리된 전역메모리 영역(window)을 사용하여 개발은 용이하지만 메모리 및 성능이 떨어질 수 있습니다. 이를 보완하기 위해 WebSquare5 SP2는 WFrame을 제공합니다. 개발 생산성 향상과 메모리 및 성능 향상을 위해 WFrame들은 전역메모리 영역(window)을 공유하지만 각 WFrame은 분리된 지역변수를 참조합니다. (The internal link is invalid. 참조.)

성능 저하 원인 및 해결 방안

본 단락은 성능 저하가 발생할 경우 그 원인 및 해결 방안을 분류하여 정리한 것입니다.

웹 서버 설정

JSON, JS, XML, CSS 다운로드 속도

정적인 자원에 대한 Caching 설정 오류

SSL Handshake

WebSquare 설정

Cache 설정 및 압축 설정

engineType 설정

$r_title(WebSquare engineType 설정 (예))
<!-- 파일명 : /{websquare_home}/config/websquare.xml -->
<!-- 웹스퀘어 엔진의 난독화 및 압축 수준을 설정하는데 사용 개발환경에는 5, 운영환경에는 6을 권장 -->
<engineType value="6"/

통신 최적화

화면 프리징

HTTP 오류 발생 리소스

HTTP 1.1 Max Connection 초과시

동시에 다수의 HTTP 요청

다수의 JS 파일 요청

데이터 튜닝

XML 방식의 대량 데이터 사용

리소스 중복 로딩

CSS, JS 중복 로딩 오류

화면 튜닝

TabControl이 여러 Tab을 포함

TabControl 컴포넌트는 여러 화면을 탭으로 구성할 때 사용하는 컴포넌트입니다.

각 탭에 표시하는 화면의 복잡도(컴포넌트의 수)를 바탕으로 브라우저가 그려야 하는 모든 컴포넌트를 고려해야 합니다.

alwaysDraw 속성은 아래와 같이 TabControl 컴포넌트가 포함하는 모든 탭의 컴포넌트의 렌더링 여부를 결정합니다.

화면 로딩 속도

외부 컴포넌트 수

그리드 엑셀 업/다운로드

그리드 컬럼 개수

그리드 대량 데이터

IE 하위 호환성

성능을 고려하지 않은 개발

IFrame 개수

WFrame 개수

화면당 컴포넌트 수

IE 브라우저에서의 렌더링 속도

속도 저하 원인

IE 브라우저에서 JavaScript 기반 파서(xmlsax.js, xmlw3cdom.js)를 사용할 경우, ActiveX 기반 내장 XML 파서와 비교하여 렌더링 속도가 최대 30배 저하됩니다.

IE 브라우저의 렌더링 속도 저하 원인

(1) JavaScript 기반 파서를 사용하도록 config.xml 파일에 설정된 경우

(2) IE 브라우저의 ActiveX 기반 내장 XML 파서를 사용하지만, 실행 시 오류가 발생한 경우

확인 방법

현재 사용 중인 XML 파서는 WebSquare 로그를 통해 확인할 수 있습니다.

IE 브라우저 화면에서 Ctrl키 + 마우스 우클릭 후 로그보기를 선택하십시오.

해결 방법

config.xml

config.xml 파일에서 useActiveXObject 설정을 확인합니다.

아래와 같이 useActiveXObject="false"인 경우, IE 브라우저는 JavaScript 기반 파서(xmlsax.js, xmlw3cdom.js)를 사용합니다.

$r_title(config.xml 설정 (외부 JS XML 파서를 사용))
<WebSquare>
   <xhr useActiveXObject="false" useResponseXML="true"/> 
</WebSquare>

useActiveXObject 설정을 true로 변경하거나 다음과 같이 해당 설정을 주석으로 처리하십시오.

$r_title(config.xml 설정 (useActiveXObject 설정 주석 처리))
<!-- <xhr useActiveXObject="true" useResponseXML="true"/> -->

클라이언트

JavaScript 기반 파서(xmlsax.js, xmlw3cdom.js) 사용 설정이 config.xml 파일에 없어도, 일부 PC에서 렌더링 속도가 느릴 수 있습니다.

이는 주로 IE 브라우저의 ActiveX 기반 내장 XML 파서에 문제가 있는 경우입니다.

위의 비권장인 경우와 동일한 로그가 확인될 경우 IE 브라우저를 초기화하거나 재설치하십시오.

WebSquare 로그 분석

로그 조회

화면에서 Ctrl + 마우스 오른쪽 버튼을 클릭 후, [로그보기]를 선택합니다.

$r_title(일반적인 로그 (예))
06:03:00.590 00000 000000 BootLoader] WebSquare Runtime Engine Version : ${version}_${java_version}

06:03:00.591 00001 000001 BootLoader]     Copyright 2009  INSWAVE Systems Co., Ltd. All Rights Reserved.

06:03:00.591 00000 000001 BootLoader] [STEP1][START] Loading Runtime Engine.

06:03:03.635 03044 003045 websquare] import core css : http://demo:8000/100003/BR_MAINB_websquare50/websquare/skin/stylesheet_ext.css

06:03:03.659 00024 003069 websquare] import user css(early_xml) : /dws/cm/css/all.css

06:03:03.659 00000 003069 websquare] import user css(early_xml) : /dws/cm/css/contents.css

06:03:03.659 00000 003069 websquare] import user css(early_xml) : /dws/cm/css/mkt.css

06:03:03.660 00001 003070 BootLoader] [STEP2][ENGINE] Runtime Engine Load complete. Time:3101ms

06:03:03.979 00319 003389 websquare] w2xDocumentRoot[]

06:03:03.979 00000 003389 websquare] w2xHome        [/dws/]

06:03:03.979 00000 003389 websquare] w2xPath        [/dws/mkt1001m01_5.xml]

06:03:03.979 00000 003389 websquare] w2xTheme       [null]

06:03:04.502 00523 003912 BootLoader] [STEP3][RESOURCE] Resource(XML, Skin, CSS, JS) Load Complete. Time:842ms

06:03:05.838 01336 005248 BootLoader] [STEP4][CREATE] WebSquare Object Creation Complete. Time:1336ms

06:03:05.839 00001 005249 websquare] [WebSquare.util.js]script loading[script_ordered_async]

06:03:06.716 00877 006126 websquare] [WebSquare.util.js]script loading[script_ordered_async]

06:03:06.719 00003 006129 BootLoader] controlCollection.toHTML - before

06:03:06.760 00041 006170 BootLoader] controlCollection.toHTML - after

06:03:06.764 00004 006174 BootLoader] [STEP5][RENDER] HTML Rendering Complete. Time:926ms

06:03:06.865 00101 006275 BootLoader] [STEP6][ADJUST] Pre Event Activation. Time:101ms

06:03:06.865 00000 006275 BootLoader] Asynchronous call process

06:03:07.772 00907 007182 BootLoader] [STEP7][EVENT] Event Activation. Time:907ms

06:03:07.821 00049 007231 websquare] WebSquare.layer.showProcessMessage [processing..]

06:03:07.824 00003 007234 websquare] /mkt/mkt1/mkt1001m01/selectBascInfo.do

06:03:07.826 00002 007236 websquare] /session/getSessionData.json

06:03:07.831 00005 007241 websquare] /session/getSessionData.json

06:03:07.832 00001 007242 websquare] /dws/view/com/data/dc_movePageMenuList.json

06:03:07.832 00000 007242 websquare] /memorydata/selectCustMenu.json

06:03:07.833 00001 007243 websquare] /dws/view/com/data/dc_menuList1.json

06:03:07.834 00001 007244 websquare] /dws/view/com/data/dc_menuList2.json

06:03:07.834 00000 007244 websquare] /dws/view/com/data/dc_menuList3.json

06:03:07.835 00001 007245 websquare] /dws/view/com/data/dc_menuList4.json

06:03:07.836 00001 007246 websquare] /session/getSessionData.json

06:03:07.839 00003 007249 BootLoader] [STEP8][EXECUTE] JS load and Global Script Execution Completed. Time:67ms

06:03:07.839 00000 007249 BootLoader] [STEP SUMMARY] Initial procedures completed. Duration : 7280, 시간 요약 : 3101 842 1336 926 101 907 67 7280

06:03:07.857 00018 007267 websquare] ajax complete. Status[200] async[true] url[/session/getSessionData.json]

06:03:07.859 00002 007269 websquare] ajax complete. Status[200] async[true] url[/mkt/mkt1/mkt1001m01/selectBascInfo.do]

06:03:07.995 00136 007405 websquare] ajax complete. Status[200] async[true] url[/session/getSessionData.json]

06:03:07.996 00001 007406 websquare] ajax complete. Status[200] async[true] url[/memorydata/selectCustMenu.json]

06:03:08.006 00010 007416 websquare] ajax complete. Status[200] async[true] url[/dws/view/com/data/dc_movePageMenuList.json]

06:03:08.009 00003 007419 websquare] ajax complete. Status[200] async[true] url[/dws/view/com/data/dc_menuList1.json]

06:03:08.026 00017 007436 websquare] ajax complete. Status[200] async[true] url[/dws/view/com/data/dc_menuList2.json]

06:03:08.038 00012 007448 websquare] ajax complete. Status[200] async[true] url[/dws/view/com/data/dc_menuList3.json]

06:03:08.044 00006 007454 websquare] ajax complete. Status[200] async[true] url[/session/getSessionData.json]

06:03:08.045 00001 007455 websquare] ajax complete. Status[200] async[true] url[/dws/view/com/data/dc_menuList4.json]

06:03:13.804 05759 013214 websquare] testFun.hogaList - 1

06:03:13.806 00002 013216 websquare] convertTypeB - 2 [{"o_FluctAmt21":"-18236","o_RemOfferVol21":"2","hoga":"2","o_RemOfferVol21_Color":"1","hoga_Color":"1","gubun":"5"},{"o_FluctAmt21":"-39898","o_RemOfferVol21":"2","hoga":"2","o_RemOfferVol21_Color":"1","hoga_Color":"1","gubun":"5"},{"o_FluctAmt21":"-80343","o_RemOfferVol21":"2","hoga":"2","o_RemOfferVol21_Color":"1","hoga_Color":"1","gubun":"3"},{"o_FluctAmt21":"-133879","o_RemOfferVol21":"2","hoga":"2","o_RemOfferVol21_Color":"1","hoga_Color":"1","gubun":"3"},{"o_FluctAmt21":"-91962","o_RemOfferVol21":"2","hoga":"2","o_RemOfferVol21_Color":"1","hoga_Color":"1","gubun":"3"},{"o_FluctAmt22":"-39607","hoga":"2","o_RemBidVol22":"2","o_RemBidVol22_Color":"4","hoga_Color":"1","gubun":"3"},{"o_FluctAmt22":"-8555","hoga":"2","o_RemBidVol22":"2","o_RemBidVol22_Color":"4","hoga_Color":"1","gubun":"3"},{"o_FluctAmt22":"-7913","hoga":"2","o_RemBidVol22":"2","o_RemBidVol22_Color":"4","hoga_Color":"1","gubun":"3"},{"o_FluctAmt22":"-27099","hoga":"2","o_RemBidVol22":"2","o_RemBidVol22_Color":"4","hoga_Color":"1","gubun":"5"},{"o_FluctAmt22":"-24134","hoga":"2","o_RemBidVol22":"2","o_RemBidVol22_Color":"4","hoga_Color":"1","gubun":"5"}]

06:03:13.838 00032 013248 websquare] convertTypeB - 3

06:03:13.842 00004 013252 websquare] testFun.hogaList - 2

06:03:13.843 00001 013253 websquare] 39  1 starthogaList fps : 25.6

로그 구조

$p.log()함수를 이용한 로그는 다음과 같은 형태로 생성됩니다.

$r_title(로그 형태)
시간 이전로그출력후경과시간 첫로그출력후경과시간 로그출력기] 로그메시지

06:03:13.838 00032 013248 websquare] convertTypeB 라는 로그는 아래와 같이 해석할 수 있습니다.

Step 로그

$r_title(Step 로그 (예))
06:03:00.591 00000 000001 BootLoader] [STEP1][START] Loading Runtime Engine.

06:03:03.660 00001 003070 BootLoader] [STEP2][ENGINE] Runtime Engine Load complete. Time:3101ms

06:03:04.502 00523 003912 BootLoader] [STEP3][RESOURCE] Resource(XML, Skin, CSS, JS) Load Complete. Time:842ms

06:03:05.838 01336 005248 BootLoader] [STEP4][CREATE] WebSquare Object Creation Complete. Time:1336ms

06:03:06.764 00004 006174 BootLoader] [STEP5][RENDER] HTML Rendering Complete. Time:926ms

06:03:06.865 00101 006275 BootLoader] [STEP6][ADJUST] Pre Event Activation. Time:101ms

06:03:07.772 00907 007182 BootLoader] [STEP7][EVENT] Event Activation. Time:907ms

06:03:07.839 00003 007249 BootLoader] [STEP8][EXECUTE] JS load and Global Script Execution Completed. Time:67ms

06:03:07.839 00000 007249 BootLoader] [STEP SUMMARY] Initial procedures completed. Duration : 7280, 시간 요약 : 3101 842 1336 926 101 907 67 7280

오류 로그

$r_title(오류 로그 (예))
19:27:23.626 00000 007026 websquare] 작업 도중 오류가 발생하였습니다.

Exception Occured at element id [tradingGridView2]

* message     : Cannot read property 'getRealRowIndex' of undefined

* stack

   TypeError: Cannot read property 'getRealRowIndex' of undefined

   at WebSquare.uiplugin.gridViewApiController.getCellStyleClassName (eval at <anonymous> (http://demo:8000/100003/BR_MAINB_websquare50/websquare/bootloader.js:267:28), <anonymous>:3931:35)

   at WebSquare.uiplugin.styleController.setCellStyle (eval at <anonymous> (http://demo:8000/100003/BR_MAINB_websquare50/websquare/bootloader.js:267:28), <anonymous>:395:32)

   at Object.PageFunc.setCurrentBorder (<anonymous>:613:50)

   at Object.PageFunc.convertTypeB (<anonymous>:852:26)

   at Object.PageFunc.Realmkt1001m01_applyRTSData (<anonymous>:1003:34)

   at Object.testFun.hogaList (<anonymous>:1701:30)

   at Object.testFun.starthogaList (<anonymous>:1733:29)

   at Object.testFun.testStart (<anonymous>:1713:29)

   at <anonymous>:1:9

* caller

   at WebSquare.uiplugin.gridViewApiController.prototype.getCellStyleClassName

   at WebSquare.uiplugin.styleController.prototype.setCellStyle

   at function ()

   at function (data)

   at function (data)

   at lOfferVol_

   at function ()

   at function ()



<<Internal JavaScript Source Block [/dws/mkt1001m01_9.xml][0] Start>>

[/dws/mkt1001m01_9.xml:0001]

[/dws/mkt1001m01_9.xml:0002]

[/dws/mkt1001m01_9.xml:0003]            

[/dws/mkt1001m01_9.xml:0004]            // page function object

[/dws/mkt1001m01_9.xml:0005]            FFFF = 0;

[/dws/mkt1001m01_9.xml:0006]            var PageFunc  = $.extend({}, PageFunc );

[/dws/mkt1001m01_9.xml:0007]


… 생략 ...


[/dws/mkt1001m01_9.xml:0611]                            } else {

[/dws/mkt1001m01_9.xml:0612]                                tradingGridView.setCellStyle (i-5 , 2 , 'border', '');

[/dws/mkt1001m01_9.xml:0613]                                tradingGridView2.setCellStyle(i   , 2 , 'border', '');

[/dws/mkt1001m01_9.xml:0614]                                

[/dws/mkt1001m01_9.xml:0615]                                if( i == 11) {

[/dws/mkt1001m01_9.xml:0616]                                    tradingGridView.setCellStyle (5  , 2 , 'border-bottom', '');

[/dws/mkt1001m01_9.xml:0617]                                    tradingGridView2.setCellStyle(10 , 2 , 'border-bottom', '');

[/dws/mkt1001m01_9.xml:0618]                                }

[/dws/mkt1001m01_9.xml:0619]                            }

점검 목록

성능 관련 문제가 발생할 경우 아래 내용을 확인하십시오.

일반

JavaScript

통신

네트워크

CSS

jQuery

메모리 누수

기타

컴포넌트

일반

Generator

GridView

IFrame

Submission

TabControl

팝업

데이터

외부 연동