JSON(JavaScript Object Notation)은 데이터를 표현하기 위한 경량의 형식입니다. 자바스크립트에서는 JSON을 사용하여 파일 입출력을 간편하게 처리할 수 있습니다. 이번 블로그에서는 자바스크립트에서 JSON을 사용하여 파일을 읽고 쓰는 방법에 대해 알아보겠습니다.

파일 읽기(File Reading)

자바스크립트에서 파일을 읽기 위해서는 FileReader 객체를 사용합니다. FileReader 객체를 생성한 후, 해당 객체의 readAsText() 메서드를 사용하여 파일을 읽을 수 있습니다. 아래는 예시 코드입니다.

var input = document.getElementById('fileInput');
var file = input.files[0];
var fileReader = new FileReader();

fileReader.onload = function(e) {
  var contents = e.target.result;
  var jsonData = JSON.parse(contents);
  // 파일 내용을 JSON 객체로 변환하여 사용할 수 있습니다.
}

fileReader.readAsText(file);

위의 코드에서 fileInput은 파일 선택을 위한 입력 엘리먼트입니다. 파일을 선택한 후 readAsText() 메서드를 호출하여 파일을 읽습니다. 파일이 성공적으로 읽혀지면 onload 이벤트가 발생하고, 읽은 파일의 내용은 e.target.result로 접근할 수 있습니다.

파일 쓰기(File Writing)

자바스크립트에서 파일을 쓰기 위해서는 JSON.stringify() 함수를 사용하여 JSON 객체를 문자열로 변환한 후, 해당 문자열을 파일로 저장합니다. 쓰기를 위해서는 Blob 객체와 FileWriter 객체를 사용합니다. 아래는 예시 코드입니다.

var jsonData = { 'name': 'John Doe', 'age': 30 };
var jsonString = JSON.stringify(jsonData);
var blob = new Blob([jsonString], { type: 'application/json' });
var fileWriter = new FileWriter();

fileWriter.onwriteend = function() {
  console.log('File saved successfully!');
}

fileWriter.write(blob);

위의 코드에서 jsonData는 파일에 저장할 JSON 객체입니다. JSON.stringify() 함수를 사용하여 JSON 객체를 문자열로 변환한 후, Blob 객체에 저장합니다. 이후 FileWriter 객체를 사용하여 해당 Blob 객체를 파일로 저장합니다. 파일 쓰기가 완료되면 onwriteend 이벤트가 발생합니다.

이렇게 자바스크립트에서 JSON을 사용하여 파일을 읽고 쓸 수 있습니다. 파일 입출력을 통해 데이터를 저장하고 불러오는 기능을 구현할 때, JSON은 간편하고 유용한 포맷이 될 수 있습니다. 이를 통해 자바스크립트 애플리케이션에서 파일 관리를 보다 쉽게 처리할 수 있습니다.