CSV 파일이란?

CSV 파일은 쉼표로 구분된 값(Comma-Separated Values)의 약자로, 표 형식의 데이터를 저장하는 일반 텍스트 파일 형식입니다.
CSV 파일 예시

이름,전화번호,이메일 주소
김철수,010-1234-5678,kim@example.com
박지영,010-2345-6789,park@example.com
이영희,010-3456-7890,lee@example.com

언제 사용할까?

주로 log 파일을 생성할때 사용하게된다. 필요에 따라 웹에 보여주는 데이트를 다른 프로그램을 통해 특정 형태로 가공하기 위해 사용할 수도 있겠다.
텍스트 편집기: 메모장과 같은 텍스트 편집기로 CSV 파일을 열고 편집할 수 있습니다.
스프레드시트 프로그램: Excel, Google Sheets와 같은 스프레드시트 프로그램으로 CSV 파일을 열고 편집할 수 있습니다.
데이터 분석 프로그램: R, Python과 같은 데이터 분석 프로그램으로 CSV 파일을 열고 분석할 수 있습니다.

object -> CSV file convertion

1. object -> CSV 형태로 변경

papaparse liberary를 사용 하는 방법이있다. papaparse는 객체를 csv형식으로 변경 할 수 있다.

$npm install papaparse --save @types/papaparse

const userList = [
      {
        name: '김철수',
        phone: '010-1234-5678',
        email: 'kim@example.com'
      },
      {
        name: '박지영',
        phone: '010-2345-6789',
        email: 'park@example.com'
      },
      {
        name: '이영희',
        phone: '010-3456-7890',
        email: 'lee@example.com'
      }
    ];

userList를 csv형태로 변경

const csv = Papa.unparse(userList);

//console.log(csv)
name,phone,email
김철수,010-1234-5678,kim@example.com
박지영,010-2345-6789,park@example.com
이영희,010-3456-7890,lee@example.com

2. blob을 이용해 다운로드 가능한 형태로 변경

const blob = new Blob([csv], { type: 'text/csv' });
//blob의 첫번째인자는 배열이다, csv 형태의 데이터를 추가로 넣을 수 있다.

size를 같는 파일 형태로 변경된다.

//console.log(blob)
{size: 140, type: 'text/csv'}

Download

생성되 파일에 URL을 생성해 주면 다운로드가 가능하다.

  window.location.href = URL.createObjectURL(blob);

다운받아보면 파일명이 알아보기 힘들다

*다운로드 파일 이름 수정 하기

  //파일 이름을 지정할수 없음.
  //window.location.href = URL.createObjectURL(blob);

  //파일이름을 지정하려면 a태그를 만들어서 클릭해야함.
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  //다운로드시 기본 이름을 설정한다. 
  link.download = 'CSV_FILE.csv'
  //로그파일 같은 경우 이름에 파일 구분 할수 있는 값을 넣으면 구분하기 좋다.
  //link.download = `log_operation [${startDateTime}-${endDateTime}]`.csv`;

  //link를 생성하고 클릭이벤트 발생후 DOM에서 제거해준다. 
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

끝.