[Vue3&TypeScript] json타입의 데이터 객체를 Map구조로 변환시키는 공통함수 만들기 (convertColsToHeaderMap)

PrimeVue의 DataTable 콤포넌트를 사용하여 그리드를 구현하여 사용중인데, 그리드 헤더용 컬럼값을 똑같이 엑셀다운로드할때도 만들어서 했는데, 다 만들어놓고 보니 아이디어가 떠 올랐다. 1군데만 수정하면 엑셀다운로드할때는 동일하게 사용하니 유지보수에 좋을 듯 싶다. 그리드만 수정하고 엑셀다운로드 헤더는 까먹고 누락시키는 일은 방지되겠지!!!

const cols = [
  { field: 'rnum', header: '순번', style: 'w-[4.375rem]' },
  { field: 'tradeNm', header: '상호', sortable: true },
  { field: 'subscribe', header: '청약일' },
  { field: 'serviceStart', header: '계약시작일' },
       ...................중략..................
  { field: 'serviceEnd', header: '계약종료일' },
  { field: 'update', header: '업데이트일' },
  { field: 'insert', header: '등록일' },
];

위 구조의 데이터를 엑셀 다운로드용 헤더로 사용하기 위해 아래와 같이 또 만들어주었다.

const headerMap = {
    rnum: '순번',
    tradeNm: '상호',
    subscribe: '청약일',
    serviceStart: '계약시작일',
    serviceEnd: '계약종료일',
    update: '수정일',
    insert: '등록일',
  };

구현된 함수

아래는 cols 배열을 기반으로 headerMap 객체로 변환하는 TypeScript 함수이다. field를 key로, header를 value로 설정한다.

type Column = {
  field: string;
  header: string;
  [key: string]: any;
};

export function convertColsToHeaderMap(cols: Column[]): Record<string, string> {
  return cols.reduce((map, col) => {
    map[col.field] = col.header;
    return map;
  }, {} as Record<string, string>);
}

// 사용 예시
const cols = [
  { field: 'rnum', header: '순번', style: 'w-[4.375rem]' },
  { field: 'tradeNm', header: '상호', sortable: true },
  { field: 'subscribe', header: '청약일' },
  { field: 'serviceStart', header: '계약시작일' },
  { field: 'serviceEnd', header: '계약종료일' },
  { field: 'update', header: '업데이트일' },
  { field: 'insert', header: '등록일' },
];

const headerMap = convertColsToHeaderMap(cols);
console.log(headerMap);

[연관자료]

[Vue3&TypeScript] dataTable의 exportCSV() 사용시 엑셀 한글 깨짐 현상 해결 방법