javascript hell #1

function addGroup() {
var groupNameNew = document.all["groupNameNew"];
var categoryNew = document.all["categoryNew"];
var groupTypeNew = document.all["groupTypeNew"];
var openKeyNew = "";
var externalKeyNew = "";

if (categoryNew[1].checked) { // 비공개 체크
  openKeyNew = "<img src='"+IMAGEURL+"/imgs/ico_key.gif' align=\"absmiddle\">\n";
} else {
  openKeyNew = "";
}

if (groupTypeNew.value =="2") { // groupTypeNew의 값이 2일때 북마크 그룹
  externalKeyNew = "<img height=0 width=2><img src='"+IMAGEURL+"/imgs/icon_bkmark.gif' align=\"absmiddle\">\n";
}

if (!validateField(groupNameNew, "새 그룹 명")) {
  return;
}

var str= "";
var maxGroupId = parseInt(document.all["maxGroupId"].value) + 1;  

if (maxGroupId==null||maxGroupId=="") {
  maxGroupId = 1;
}

groupNameNew.value = groupNameNew.value.toHtmlChar();

var viewGrpNameNew = valueSubstring(groupNameNew.value, 8);

str = "<table width=\"576\"  border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n"
      + "<tr>\n"
      + "<td width=\"60\" align=\"center\" height=\"36\"><a href=\"javascript:groupMoveUp('"+maxGroupId+"');\"><img src='"+IMAGEURL+"/imgs/btn_up01.gif' align=\"absmiddle\"></a>&nbsp;<a href=\"javascript:groupMoveDown('"+maxGroupId+"');\"><img src='"+IMAGEURL+"/imgs/btn_down01.gif' align=\"absmiddle\"></a></td>\n"
      + "<td width=\"195\" style=\"padding-left:10px\"><span name=\"spanGroupName1\" id=\"spanGroupName1\" style=\"display:none\"><input type=\"text\" name=\"groupName\" maxlength=50 style=\"width:180px\" class=\"box\" value=\""+groupNameNew.value+"\"></span><span name=\"spanGroupName2\" id=\"spanGroupName2\"><a href=\"javascript:hideList('"+maxGroupId+"');cm_paperInit();\" id=b><span name=\"spanGroupName2Sub\" id=\"spanGroupName2Sub\">"+viewGrpNameNew+"</span></a> <span name=\"spanOpenKey\" id=\"spanOpenKey\"> "+openKeyNew+"</span><span id=\"spanExternalKey\">" + externalKeyNew + "</span> (<span name=\"spanGBCnt\" id=\"spanGBCnt\" class=\"eng\">0</span>)</span>  </td>\n"
      + "<td width=\"195\">\n"
      + "<Div name = \"ssDiv\" id = \"ssDiv\" style=\"display:none\">\n"
      + "<div id=\"SS_TempDiv\" style=\"display:none\"></div>\n"
      + "</Div>\n"
      + "</td>\n"
      + "<td  align=\"right\"><span name=\"spanGMConfirm\" id=\"spanGMConfirm\" style=\"display:none\"><a href=\"javascript:modifyGroupConfirm('"+maxGroupId+"');\">[수정완료]</a> <a href=\"javascript:modifyGroupCancel('"+maxGroupId+"');\">[취소]</a></span><span name=\"spanGMInit\" id=\"spanGMInit\"><a href=\"javascript:modifyGroup('"+maxGroupId+"')\">[수정]</a> <a href=\"javascript:delGroup('"+maxGroupId+"')\">[그룹삭제]</a></span>&nbsp;&nbsp;</td>\n"
      + "</tr></table>\n\n"
      + "<table width=\"100%\"  border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n"
      + "<tr>\n"
      + "<td align=\"right\">\n"
      + "<div name=\"innerDiv\" id=\"innerDiv\" style=\"display:none;\">\n"
      + "<table width=\"92%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#F8F8F8\">\n"
      + "<tr><td height=\"1\" colspan=\"2\" bgcolor=\"#C1C1C1\"></td></tr>\n"
      + "<tr><td height=\"8\"></td></tr>\n"
      + "<tr><td>\n"
      + "<table name=\"tbuddy\" id=\"tbuddy\" width=\"92%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"#F8F8F8\">\n"
      + "</table>\n"
      + "</td></tr>\n"
      + "<tr><td align=\"right\" colspan=\"2\" style=\"padding: 15 10 10 0\"><a href=\"javascript:moveBuddyPopOpen('"+maxGroupId+"')\">이동</a> | <a href=\"javascript:deleteBuddyUnit('"+maxGroupId+"')\" style=\"color:#E20000\">삭제</a></td></tr>\n";

if (groupTypeNew.value =="2") {
  str = str + "<tr><td colspan=\"2\" style=\"padding: 0 10 10 0; padding-left:20px;\">새 북마크 <input type=\"text\" name=\"bmNameNew"+maxGroupId+"\" style=\"width:180px; height:19px\" class=\"box\" value=\"북마크 이름을 써주세요\" onFocus=\"javascript:newBMNameCK(this);\"> <input type=\"text\" name=\"bmLinkNew"+maxGroupId+"\" style=\"width:180px; height:19px\" class=\"box\" value=\"주소(URL)를 써주세요\" onFocus=\"javascript:newBMLinkCK(this);\"> <a href=\"javascript:addBM('"+maxGroupId+"');cm_paperInit();\">[추가]</a></td></tr>\n";
}

str = str + "</table><BR></div>\n"
      + "</td>\n"
      + "</tr>\n"
      + "<input type=\"hidden\" name=\"groupId\" value=\""+maxGroupId+"\">\n"
      + "<input type=\"hidden\" name=\"groupType\" value=\""+ groupTypeNew.value+"\">\n"
  + "<tr><td height=\"1\" bgcolor=\"#E0E0E0\"></td></tr>\n"
      + "</table>\n";

var totGrpObj = document.all["bigTable"];
var totGrpCnt = document.all["bigTable"].rows.length; //Group Total Cnt

totGrpObj.insertRow(totGrpCnt);
totGrpObj.rows[totGrpCnt].insertCell(0);
totGrpObj.rows[totGrpCnt].setAttribute( "id" , "grp"+maxGroupId );
totGrpObj.rows[totGrpCnt].cells[0].innerHTML = str;

if(IE) {
  if (categoryNew[0].checked) { // 공개 체크
   var oSS = new SS_create("<select name='openYN' onchange=\"javascript:changeGroupOpen('"+maxGroupId+"')\" STYLE='border-style:solid;border-width: 1px 1px 1px 1px;border-color:cccccc;color:333333;font-size:9pt;background-color:none;width : 60px;height:19px;font-size:9pt;'><option value='1' selected>공개</option><option value='0'>xx비공개</option></select>");
  } else {
   var oSS = new SS_create("<select name='openYN' onchange=\"javascript:changeGroupOpen('"+maxGroupId+"')\" STYLE='border-style:solid;border-width: 1px 1px 1px 1px;border-color:cccccc;color:333333;font-size:9pt;background-color:none;width : 60px;height:19px;font-size:9pt;'><option value='1'>공개</option><option value='0' selected>비공개</option></select>");
  }

  document.all.SS_TempDiv.appendChild(oSS.Table);
  document.all.SS_TempDiv.removeNode();
} else {
  var oSS = document.createElement("select");
  oSS.setAttribute("name", "openYN");
  oSS.setAttribute("onchange", "\"javascript:changeGroupOpen('"+maxGroupId+"')\"");
  oSS.setAttribute("STYLE", "border-style:solid;border-width: 1px 1px 1px 1px;border-color:cccccc;color:333333;font-size:9pt;background-color:none;width : 60px;height:19px;font-size:9pt;");
  var oOP = document.createElement("option");
  oOP.setAttribute("value", "1");
  oOP.appendChild(document.createTextNode("공개"));
  var oOP1 = document.createElement("option");
  oOP1.setAttribute("value", "0");
 
  if (categoryNew[0].checked) { // 공개 체크를 확인하여, 공개 일 경우 oOP를 선택으로, 비공개일 경우 oOP1을 선택으로 한다.
   oOP.setAttribute("selected", "");
   oOP1.appendChild(document.createTextNode("xx비공개"));
  } else {
   oOP1.setAttribute("selected", "");
   oOP1.appendChild(document.createTextNode("비공개"));
  }
  oSS.appendChild(oOP);
  oSS.appendChild(oOP1);
 
  document.all.SS_TempDiv.appendChild(oSS);
}

document.all.maxGroupId.value = parseInt(maxGroupId);

makeGroupList(totGrpCnt, 'C', 'N');

groupNameNew.value="그룹명을 써주세요";
categoryNew.selectedIndex = 0;
groupTypeNew.checked=false;
}


-----------------------------------------------------------------------------------------------------

어제. 새로운 프로젝트에 버그가 등록되어서. 기존 개발 코드를 보았다.

원인은 javascript 오류.

사실. 웹개발에서 javascript 는 최대 난제 중에 하나이지 않을까 한다.
가장 사용자에게 민감하게 보일수 있는 부분이며. 또한. 그만큼 개발의 노동이 많이 들어 가는 부분이다.

일단. 코드는......  난감하게 날 만들었다.. -_-;;

버그 때문에 처음 본 개발부분인데.......  어쩜 이렇게 잘써놨는지(?).....
당시 코딩했던 개발자의 긍지가 부러울뿐이다..

사실. 개발자에게 완벽을 바랄 수는 없다. 빡빡한 일정에. 버그에. 테스트에. 서비스 오픈에.
욕은 욕대로 먹으면서. 최고의 품질이 나오길 원하니. 결국. 딜레마에 빠질수 밖에 없지 않을까 한다.

뭐 어쨌든.
수정을 위해 @.@ 라인 라인을 해석해 보았다.
결국 수정을 위한 코드 변경은 table width 값을 100% -> 576 이었다.

결과적으로 코드를 정상적으로 수정 했으니. 서비스측면에서는 같은 결과겠지만.
현재 작동하는 이코드 자체를 보자면. 엄청나게 안 좋은 코드란 걸 알수 있다.

아무리 노가다성 script 코드라 할지라도. 기본적으로 개발에서는 모듈화가 기본적인 개발자세가 아닌가 한다.
위와 같은 코드가 현재 개발운영자에게는 단순해 보이는 코드일수 있지만.
그일을 인계받는 사람이나 다른 개발자의 눈은 전혀 그렇지 않을 것이다.

결국. 어디 책에서 나온 말 처럼 . 코딩만으로도 다른 개발자와 대화 할수 있는 코드를 만들어야 하는것이
아닌가 하다. 물론. 어떤 정형화된 규칙이나 템플릿이 있다면 더 좋겠지만. 가장 범용적으로 이해 할수 있는
정도라면 충분히 그 가치를 가질수 있지 않을까 한다.


P.S
겨우 저 몇자를 고치기 위해 내 인생의 30분에게 조의를 표할 뿐이다.