대부분 FileReader 사용법을 찾아보면 file type 의 input tag 를 활용해 내가 선택한 local file 을 읽어오는 예제가 대부분인데, 내가 필요한건 서버에 올려둔 txt 파일을 읽어서 화면에 출력하는 기능이었음.
서칭을 해보다가 발견한건 FileReader 가 아니라 XMLHttpRequest 를 활용해서 서버에 올라간 파일을 읽어오는 방법이 있다는 것 같아 시도해봤다.
[참고링크]
https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file
https://myeonguni.tistory.com/1526
추가로 아래는 MDN 사이트 문서. 각 XMLHttpRequest 사용법이랑 명세? 라고 보면 되겠다.
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
결과적으로 위 링크들의 방법은 성공하지 못했음. 서버에 올라간 .txt 파일을 열어보려 했으나, 우리 서버는 CORS 제약? (참고 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ) 때문에 response 데이터의 header 에 Access-Control-Allow-Origin 가 설정되어 있어야 했다.
-> FileReader 가 아닌 XMLHttpRequest 는 말 그대로 파일을 읽는 역할이 아닌, 서버와 연동해 return 값을 받는 형태이기 때문인 듯. 일반적으로는 AJAX 통신을 활용해 데이터를 Object 형으로 받아 client 에서 처리하는 역할으로 알고 있는데, 아무튼 파일 전용이 아닌 return 값이 필요한 것.
근데 .txt 파일에는 header 가 지정될 수 없고, 뿐만 아니라 plain 한 text file 은 다른 file structure 를 모두 포함할 수 없다고 한다. (참고 : https://stackoverflow.com/questions/3005777/set-file-header-of-txt-file-in-net )
그 말인 즉, 현재 진행중인 프로젝트에서 XHR을 활용해 .txt 파일을 읽어들여 해당 값을 화면에 출력하는게 무리라는 뜻.
원래는 서버에 html 파일을 작성하고, iframe 으로 컨텐츠를 출력하고 있었는데 변경을 하려던 이유는 iframe이 모든 브라우저에서 지원되는 태그가 아니라는 사실을 뒤늦게 깨달아서. 핸드폰 운영체제나 지원하는 브라우저 등에 따라 컨텐츠가 잘려보이는 이슈가 발생했던 것.
->근데 지금 다시 확인해보니까 웬만한 브라우저는 다 지원하는 것 같다. 종종 지원하지 않는 attribute 정도는 있는 것 같지만, tag 자체는 사파리나 파이어폭스나.. 웬만해서는 지원 되는 듯.
사실 서버와 통신할거면 아예 서버에서 불러와서 return 해도 되는거였겠지만, 내용이 긴 문서들이다 보니 트래픽 걱정을 했는데 괜한 걱정인가 싶기도 하고..
일단 iframe 지원 여부와는 별개로 화면이 깨지는 상황이 발생하는건 변하지 않으니까, 오늘 수정하는건 보류하고 다음에 다시 쓰기로...
(20.01.31 : 결국 이대로 포기하고 그냥 iframe 다른 방법으로 박아넣음. 됐는지는 해당 폰이 지금 없어서 확인 불가)