JavaScript만을 이용하여 파일에 텍스트를 기록할 방법은 없을까요?

HDNua의 이미지

질문 있습니다.
(이 질문은 다른 커뮤니티에 올린 질문을 복사한 것입니다.)

같은 것을 물어보기 위해 질문을 두 개 올렸는데 차례로 보이겠습니다.

-----
질문 1.

현재 JavaScript 관련하여 작성하고 있는 강의 문서가 있습니다.

이전까지는 FileSystem에 접근하기 위해
Internet Explorer의 ActiveX를 사용하고 있었습니다.

애초에 ActiveX는 그 악명으로 유명한 도구였고,
이제 ActiveX를 사용할 수 없는 환경도 다가오거니와,
Google Chrome에서 FileWriter API도 지원된다는 소리도 있는데요.

1. JavaScript FileWriter Example이라고 쳐봐도 어려워서 잘 모르겠습니다.
1) https://pubs.vmware.com/vsphere-50/index.jsp?topic=%2Fcom.vmware.vsphere.vco_dev.doc_42%2FGUID861E9D4E-BA4D-4CE3-B422-5DEB800791E7.html
2) http://www.mosync.com/files/imports/doxygen/latest/html5/filewriter.md.html
3) http://www.noupe.com/design/html5-filesystem-api-create-files-store-locally-using-javascript-webkit.html
4) http://www.html5rocks.com/en/tutorials/file/filesystem/?redirect_from_locale=ko
혹시 FileWriter 관련해서 아시는 분 있으신가요?

2. FileWriter를 사용하지 않으면 JavaScript로 파일에 접근할 방법이 없는 건가요?

3. 파일 입출력 관련해서 예제 하나만 던져주시면 감사하겠습니다.

-----
질문 2.

Node.js는 찾아봤습니다.

처음 Node.js를 들었을 때 저는 jQuery처럼 js 파일 하나가 있어서
이것만 스크립트에 추가해주면 되는 식인 줄 알았습니다.

근데 아무래도 node라는 프로그램을 호출해서 동작하는 방식인 것 같은데,
제가 원하는 건 HTML 문서 내의 script 태그 안에서
JavaScript 코드를 작성하는 것만으로 텍스트파일을 생성하는 것입니다.

예를 들어 IE는 ActiveX가 있어 다음과 같은 식으로 편하게 파일 생성이 되지요.

var fso = new ActiveXObject('Scripting.FileSystemObject');
var dir = document.location.toString().replace('file:///', '');
dir = fso.GetParentFolderName(unescape(dir));
var filepath = dir + '/' + 'test.txt';
var file = fso.CreateTextFile(filepath, true);
file.Write('Hello, world!');
file.Close();

꼭 편해야 되는 건 아닙니다. 불편하면 래퍼 객체를 만들면 되니까요.
다만 ActiveX는 앞으로 안 쓸 계획이고, 제가 만들 프로그램은 반드시 파일은 생성해야 합니다. (사용자가 알아볼 수 있는 위치에)

질문. JavaScript만을 사용하여 파일을 기록할 방법은 없을까요?

-----

같은 내용을 KLDP에도 물어보고 싶습니다.
읽어주셔서 감사합니다.

xylosper의 이미지

정확하게 하자면 '브라우저의 자바스크립트'라고 해야겠지요.
각각의 자바스크립트 구현체는 자체적으로 호스트 환경을 제공하기 때문에 어떤 환경에서 돌리느냐에 따라서 달라집니다.

그리고 아마 브라우저상에서 돌아가기를 원하시는거 같은데, 특별한 브라우저의 확장기능이 있는게 아니라면 안됩니다.
말씀하신대로 Active X가 악의 축이라는 소리를 듣는 이유가 바로 로컬 시스템을 맘대로 건드릴 수 있다는 거고, 자바스크립트가 그게 가능했으면 똑같은 취급받았을 겁니다.
최근에 HTML5와 연동해서 로컬파일을 읽어오는 것은 가능해진거 같은데 쓰기는 아마 앞으로도 안될겁니다.

참고로 node.js는 '어플리케이션'을 만들기 위한 자바스크립트 호스트 환경이지 브라우저에서 돌아가기 위한 호스트 환경이 아닙니다.

그냥 파일을 다운로드 받게끔하면 안되는 상황인가요?

익명 사용자의 이미지

사실 제가 하고 있는 건 브라우저로 돌리는 웹페이지보다는 네이티브 어플리케이션에 가깝습니다.
HTML과 CSS는 그래픽을 구현하는 것이 제가 쓰는 글과 크게 관련이 없다보니 최대한 간단하게 하려고 선택한 도구여서.

화려한 그래픽이나 애니메이션 같은 걸 보여줘야 하는 프로그램이 아니고 텍스트박스랑 버튼만 있는 프로그램이니,
Node.js로 JavaScript를 이용한 GUI 앱 개발이 가능하다면 그냥 그쪽으로 갈아타봐야겠습니다.

파일을 다운로드받는 식으로 만들면 파일을 저장할 때마다 많이 번거로울 거라는 생각이 들어서 그렇습니다.
다운로드 폴더에 htm 파일 수십개가 생기는 상상을 하니 좀 끔찍하네요.

소중한 답변 감사합니다.

HDNua의 이미지

이런 때는 덧글 삭제 기능도 좀 탐이 납니다.

저는 이렇게 생각했습니다.

xylosper의 이미지

써본적은 없지만 node.js로 GUI도 가능합니다.
제가 알고 있는 것만 해도 웹킷 기반의 nw.js(구 node-webkit.js) 모듈과 Qt기반의 node-qt 모듈이 있습니다.

> 파일을 다운로드받는 식으로 만들면 파일을 저장할 때마다 많이 번거로울 거라는 생각이 들어서 그렇습니다.
다운로드 폴더에 htm 파일 수십개가 생기는 상상을 하니 좀 끔찍하네요.

브라우저라면 그 번거로움을 감수해야 합니다.
반대로 다운받은 적도 없는 파일 수십개가 생기는 상상을 하니 매우 끔찍합니다.

HDNua의 이미지

답변 감사합니다.

저는 이렇게 생각했습니다.

peecky의 이미지

보안상 임의로 파일 시스템에 접근할 수는 없을거고, 사용자가 다운로드하는 방식을 사용해야 할 것 같습니다.
http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server

HDNua의 이미지

브라우저에서는 보안 문제 때문에 바로 파일 시스템에 접근할 수 없군요. 알겠습니다.

저는 이렇게 생각했습니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.