자바스크립트를 이용한 CSV 파일 파싱

What You'll Be Creating

CSV(Comma Separated Values) 파일 형식은 애플리케이션 간에 데이터를 교환하는 데 자주 사용되는 방식입니다.

이번 짧은 팁에서는 자바스크립트를 이용해 CSV 파일의 데이터를 시각화하는 법을 배우겠습니다.

CSV 파일 만들기

우선 간단한 CSV 파일을 만들어봅시다. 이를 위해 여기서는 온라인 테스트 데이터 생성기인 Mockaroo를 이용하겠습니다. 파일은 다음과 같습니다.

CSV 파일을 HTML 테이블로 변환하기

이제 파일을 생성했으니 파일을 파싱해서 연관된 HTML 테이블로 만들 준비가 끝났습니다.

첫 번째 단계로 jQuery의 ajax 함수를 이용해 이 파일로부터 데이터를 가져오겠습니다.

1 2 3 4

$.ajax({     url: 'csv_data.csv',     dataType: 'text',   }).done(successFunction);

AJAX 요청이 성공했다고 가정하면 successFunction이 실행됩니다. 이 함수는 반환된 데이터를 파싱해서 HTML 테이블로 변환하는 것을 책임집니다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

function successFunction(data) {   var allRows = data.split(/\r?\n|\r/);   var table = '<table>';   for (var singleRow = 0; singleRow < allRows.length; singleRow++) {     if (singleRow === 0) {       table += '<thead>';       table += '<tr>';     } else {       table += '<tr>';     }     var rowCells = allRows[singleRow].split(',');     for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {       if (singleRow === 0) {         table += '<th>';         table += rowCells[rowCell];         table += '</th>';       } else {         table += '<td>';         table += rowCells[rowCell];         table += '</td>';       }     }     if (singleRow === 0) {       table += '</tr>';       table += '</thead>';       table += '<tbody>';     } else {       table += '</tr>';     }   }   table += '</tbody>';   table += '</table>';   $('body').append(table); }

여기서는 각 CSV 행을 테이블 행으로 변환합니다. 이를 염두에 두고 위 코드가 어떻게 동작하는지 간략하게 설명하겠습니다.

• 우선 정규표현식을 이용해 AJAX 응답을 나눕니다. 즉, 각 CSV 행으로 분리합니다.
• 그런 다음 CSV 행을 순회해서 데이터 필드를 나눕니다.
• 최종적으로 데이터 필드를 순회해서 각 필드에 해당하는 테이블 셀을 만듭니다.

이 코드를 더 잘 이해하려면 다음 그림을 참고합니다.

이 시점에서는 왜 /\r?\n|\r/ 정규표현식을 이용해 CSV 행을 나눴는지 이해하는 것이 중요합니다.

이미 알고 계실 수도 있겠지만 운영체제마다 줄바꿈을 표현하는 방식 다릅니다. 예를 들어, 윈도우 플랫폼에서 줄바꿈을 나타내는 문자는 \r\n입니다. 즉, 위와 같은 정규 표현식을 이용해 그러한 모든 줄바꿈 표현을 매칭할 수 있게 됩니다.

또한 대부분의 텍스트 편집기에서는 줄바꿈 형식을 선택할 수 있습니다. 예를 들어, Notepad++에서는 다음과 같습니다. Notepad++에서는 다음과 같은 방법으로 원하는 문서 형식을 지정할 수 있습니다.

이를 확인하기 위해 앞의 예제 파일을 살펴봅시다. 선택한 문서 형식에 따라 문서의 모양이 다음과 같이 바뀔 것입니다.

HTML 테이블에 스타일 추가하기

결과 테이블을 살펴보기에 앞서 테이블에 기본적인 스타일을 몇 가지 추가해봅시다.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

table {   margin: 0 auto;   text-align: center;   border-collapse: collapse;   border: 1px solid #d4d4d4; }   tr:nth-child(even) {   background: #d4d4d4; }   th, td {   padding: 10px 30px; }   th {   border-bottom: 1px solid #d4d4d4; }

다음은 생성된 테이블입니다.

결론

이번 글에서는 CSV 파일을 HTML 테이블로 변환하는 과정을 살펴봤습니다. 물론 이러한 변환 작업에 웹 기반 도구를 이용할 수도 있었지만 직접 코드를 작성해서 이러한 작업을 수행하는 이 언제나 더 도전의식을 북돋는다고 생각합니다.

출처: http://code.tutsplus.com/ko/tutorials/parsing-a-csv-file-with-javascript--cms-25626