구마찌의 이진수 여행기
[Javascript]CSV 파일 읽어오기 본문
1. CSV 파일 ?
> 우리가 보게될 결과화면
필드와 필드간 데이터들이 콤마(,)형태로 구분이 되어 있는 파일 형태.
위 사진에서는 split()으로 콤마(,) 구분을 없애 줬지만, 실제로는 저 공백 옆에 콤마가 존재한다.
2. 목표
CSV 파일을 읽어들어서 비동기 그래프를 그려주기로 했다.
3. CSV 파일 읽어오기
> files 폴더 안의 두개의 csv파일들을 testHTML.html에서 읽어올 것이다.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
>JQuery로 파일을 ajax하여 읽어올 것이기 때문에 import 시켜줘야한다!
<script type="text/javascript"> $(function() { var fileName = "C:/Users/gpwlw/workspace/Test/WebContent/files/data_";
// 파일 이름 var parseName = ""; // 파일 이름 + 숫자 (var -> int 할거) var parse = 0; // var형 i를 정수로 변환시킨 값을 담을 변수 for(var i=1;i<3;i++) { parse = parseInt(i); parseName = fileName + parse + '.csv'; // 파일 경로 + sequence + 확장자 $.ajax({ url:parseName, dataType:'text', success: function(data) { var allRow = data; //.split(/\r?\n|\r/) var textLine = ""; for(var singleRow = 0; singleRow < allRow.length; singleRow++) { var collapse = allRow[singleRow].split(","); for(var count = 0; count < collapse.length; count++) { textLine += collapse[count]; } } $('#textArea').append(textLine); $('#textArea').append("<br>"); } });} }); </script>
개인 경로로 바꿔야 할 부분
<meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <div id="textArea"></div> </body> </html>
>id를 호출해서 html에 보여주기 위해 확인
고민했던 부분이 몇가지 있다.
- 고민 1
Cross origin requests are only supported for protocol schemes:
크롬에서 돌리니까 이런 오류가 난다. 왜나는거야.
힌트는 그 밑에 줄에 있는 chrome이라는 단어이다.
chrome에서 로컬파일(내 컴퓨터 안에 있는 파일들)을 돌리게 되면 보안상 오류를 내뿜어버린다.
그럴땐 ~ chrome 바로가기를 하나 새로 생성한 다음에
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
빨간 글자 그대로 붙여넣기 하면 된다. (아마 뜻은 웹 보안을 뭉개버린다 이런 뜻인듯 ..)
아! 그리고 이 작업을 할땐, 꼭 모든 크롬창을 닫고 해야한다!!!!!
이 작업을 끝내니 완전 잘됨.
- 고민 2
이 오류는 또 뭐지.. 분명 files폴더 안에 data_1.csv와 data_2.csv를 넣었는데 왜 안되지.. 한시간을 고민하다가
원인을 찾았다. 자꾸 찾을 수 없다고 나오길래 url을 보니..
할 말이 없던데.. url에 아무것도 안적었으니까 당연히 못찾지 .. 그리고 또 있었다.
이건 솔직히 못찾을만 했다. 파일 경로를 찾아가는 데 /이냐 \이냐 고민을 많이 했다.
내가 파일 경로를 찾아갈 땐 /, \는 파일 경로를 컴퓨터가 뱉어줄 때 ( 파일을 찾아서 반환해준다는 표현이 맞을라나?)
파일 속성을 들어가면, 그러니까 우리가 두 눈으로 보게되는 파일의 경로를 보면 \로 시작한다.
운영체제에 따라 파일의 경로를 정의하는 것이 바뀌지만
윈도우에서는 파일 경로를 찾아갈 때 /나 \\를 사용한다. (\ 하나는 쓰지 않음)
그리고 절대경로를 제대로 설정해줬다.
- 고민 3
파일 경로도 잘 찾아갔고, consol.log(parseName);으로 파일 이름이 나오는 것도 확인 했는데
내가 원하는 값이 화면에 나오지 않았다.
확장자는 파일의 목숨이다. 확장자가 없으면 얘는 무슨 파일이지? 정체성을 잃게 된다.
파일한테 정체성을 부여해주지 못한 것이다.. 미안해 파일아
4. 결과
1번 참고
'JAVA > Javascript' 카테고리의 다른 글
| [Javascript]Highcharts를 이용한 동적 그래프 그리기 (4) | 2018.08.30 |
|---|
