🟡 들어가며

전자정부프레임워크 기반의 대내외 포털 유지보수 작업 중, 예상치 못한 알림창 메시지를 확인하게 되었습니다.


해당 오류는 자바스크립트의 스코프 범위 처리와 관련된 var 키워드의 특성에서 기인한 문제였고,
이를 let과 const 기반으로 리팩터링함으로써 코드 안정성과 가독성을 개선할 수 있었습니다.

 

🧩 발견된 이슈

for(var j = 0; j < tempCodes.getRowCount(); j++){ 
	var codeId = tempCodes.getCellData(j, "codeId");

	if(index == codeId){
		var codeName = tempCodes.getCellData(j, "codeName");
		break;
	}
}

com.win.alert(codeName + " 코드값 입니다.");

 

위 코드는 codeName이 for문 안에서 var로 선언되었음에도,
스코프 특성상 for문 바깥에서 참조되어도 오류가 발생하지 않는 구조입니다.

그러나, codeName이 설정되지 않은 상태에서도 undefined 값이 알림창에 그대로 출력되는 문제가 발생했습니다.

🔎 원인 분석

  • var는 함수 단위 스코프(function scope) 이기 때문에,
    • for문 블록 내에 선언된 변수라도 바깥에서 참조가 가능함
  • 변수 선언의 위치와 무관하게 변수 호이스팅이 발생
  • 알림 조건 검사 없이 출력되어 "undefined 은(는) 이미 선정되었습니다." 같은 이상한 메시지 노출

 

🔧 리팩터링 방안

목표

  • 변수의 생명주기를 명확히
  • 잘못된 알림 방지
  • JS 최신 문법 적용 (ES6+)
if (index == info.newValue) {
	let codeName = "";

	for (let j = 0; j < tempCodes.getRowCount(); j++) {
		const codeId = tempCodes.getCellData(j, "codeId");

		if (index == codeId) {
			codeName = tempCodes.getCellData(j, "codeName");
			break;
		}
	}

	if (codeName) {
		com.win.alert(codeName + " 코드값 입니다.");
		const row = CodeDeptList.getRowPosition();
		CodeDeptList.setCellData(row, "attr1", 0);
	}
	break;
}

 

🗂️ 주석 관리 방식 (문서화 목적 포함)

// [issue-2025.00.00] 변수 생명주기 명확화를 위한 블록 스코프(let/const) 적용
// - 기존 코드에서 "undefined 은(는) 000 입니다." 알림 표시 문제 발생
// - var의 function-level hoisting으로 인해 가독성과 유지보수성 저하
// - if 조건문 보완 및 block scope 적용으로 오류 방지 및 코드 명확성 향상

 

이런 방식으로 주석을 기록하면

  • 후속 유지보수자들이 코드 흐름을 쉽게 이해할 수 있고,
  • 이슈 발생 시 빠르게 원인을 유추할 수 있습니다.

✅ 기술적으로 얻은 교훈

  • var의 사용은 지양하고 block scope 를 사용해 표준을 준수하자. (let, const가 기본)
  • 코드의 스코프를 명확하게 정의해두는 것이 유지보수의 핵심
  • 공공 시스템일수록 리팩터링 로그/주석은 기술 문서 수준으로 남겨야 한다

티스토리툴바