[Oracle] 테이블 컬럼을 리스트로 추출해 동적인 그리드 만들기

 좌측 그리드의 row를 클릭하면 오른쪽 그리드가 조회되는 화면을 만들었는데, 좌측 그리드의 값에 따라 조회하는 테이블이 각각 달라서 우측 그리드의 컬럼을 정적인 값으로 고정하기 힘들었다. 할 순 있었지만 애매한 단어 선택으로 사용자에게 혼란을 야기할 것이 분명했고, 이는 곧 수정 요청 사항으로 접수되기 마련이다(경험이다).
 그래서 우측 그리드가 조회될 때마다 컬럼을 동적으로 세팅되도록 설계했다. 이 때 동적으로 세팅되는 컬럼 값을 조회해오는 컬럼 값 그대로 뿌려주니 전부 영어로 출력되어, 데이터를 알아보기 어려워서 각각의 테이블 컬럼 코드와 매핑된 컬럼 값을 가져와서 뿌려주기로 했다.

SELECT *
  FROM ALL_COL_COMMENTS
 WHERE TABLE_NAME = '테이블명'
 
 OR
 
 SELECT *
  FROM COLS
 WHERE TABLE_NAME = '테이블명'

위 쿼리를 활용해 테이블의 정보를 확인할 수 있었고, 나의 경우엔 COLUMN_NAME에 컬럼 코드 값, COMMENTS에 컬럼 명을 매핑해놨다.

컬럼 코드 값과 컬럼 명

SELECT '{'||LISTAGG('"'||COLUMN_NAME||'":"'||COMMENTS||'"',',') WITHIN GROUP (ORDER BY COLUMN_NAME)||'}' AS COLUMNS
  FROM ALL_COL_COMMENTS
 WHERE TABLE_NAME = '테이블명'

 LISTAGG 함수는 row 단위로 출력되는 데이터를 특정 구분자로 연결시켜 1row 리스트로 추출해주는 함수다. 해당 함수를 사용해 COLUMN_NAME과 COMMENTS를 JSON Object 형식으로 추출했다.

debugger에서 찍은 COLUMN_LIST 값

 위 사진의 데이터는 가공을 위해 인위적으로 JSON처럼 보이게 만들었을 뿐, type을 체크해보면 JSON 객체가 아닌 String이다. 이를 JSON 객체로 바꿔주고 컬럼 명을 설정해주는 부분에 키값으로 호출해주면 된다.

// 수정 전
if ($NC.isNotNull(rowData)) {
  for (let field in rowData) {
    if (field == "id" || field == "CRUD") {
      continue;
    }
    $NC.setGridColumn(columns, {
      id: field,
      field: field,
      name: field, //컬럼 명을 설정해주는 부분
      minWidth: field.length * 10
    }, false);
  }
}
  
// 수정 후
let COLUMN_ARRAY = JSON.parse(rowData.COLUMN_LIST); // String → JSON 객체로 변환

if ($NC.isNotNull(rowData)) {
  for (let field in rowData) {
    if (field == "id" || field == "CRUD") {
      continue;
    }
    $NC.setGridColumn(columns, {
      id: field,
      field: field,
      name: COLUMN_ARRAY[field], // JSON 객체에서 key 값으로 value 값 추출
      minWidth: field.length * 10
    }, false);
  }
}

JSON 객체로 잘 바뀐 모습이다. ($NC.toArray() 함수는 JSON.parse()와 동일한 역할을하는 공통 함수이다.)

 처음에는 COLUMN_ARRAY.field 과 같은 방식으로 호출하면 될 줄 알았는데, for문을 돌면서 field에 String 형으로 값이 들어가다 보니 원하는대로 호출이 되지 않았다(COLUMN_ARRAY.'BU_CD' 이렇게 호출 된 듯).
그래서 위의 수정된 코드 처럼 COLUMN_ARRAY[field] 형식으로 바꾸니 값이 잘 나왔다.