[JavaScript] JSON.parse(), JSON.stringify(), 파일입출력

#1 JSON 이란?

JSON(제이슨)은 JavaScript Object Notation의 약자로, 브라우저와 서버간 데이터를 저장하거나 전송할 때 많이 사용되는 데이터 교환 형식이다. JSON의 문서 형식은 자바스크립트의 객체(Object) 형식을 기반으로 만들어졌다. 

 

#2 JSON 형식

{
	"name" = "기영이",
	"race" = "toy poodle",
	"age" = 0.5,
	"weight" = 2,
	"color" = "cream"
}

JSON 객체의 형식은 { key : value } 으로, 언뜻 보면 그 형식이 저번에 배웠던 자바의스크립트의 프로퍼티(property)와 유사하다. 차이점이라고 한다면 자바스크립트의 프로퍼티에서는 key와 value의 값이 String일 경우, 'value' 이렇게 작은따옴표로도 표현이 가능했지만, JSON에서는 아래 예시 처럼 꼭 "key" 값과 "value" 값 모두에 쌍따옴표를 사용해야한다.

 

[
	{"name":"기영이", "race":"toy poodle", "age": 0.5},
	{"name":"기철이", "race":"scottish fold", "age": 1}
]

JSON 배열의 경우, 기본 JSON 객체들을 대괄호로 담고 있다 [ { key : value } ,  { key : value } ]

 

#3 JSON.stringify()

JSON.stringify() 라는 메소드는 JavaScript 객체를 JSON 객체로 변환시켜주는 함수이다.

먼저 자바스크립트 형식의 객체를 만들고 그 객체를 JSON.stringify() 메소드를 사용해 JSON 객체로 만들어보자.

var family = new Array();
var dog = {name: '기영이', race: 'toy poodle', age: 0.5};
var cat = {name: '기철이', race: 'scottish fold', age: 1};
// family, dog, cat 이라는 JavaScript 객체를 생성

family.push(dog);
family.push(cat);
// dog 와 cat 객체를 family 라는 JavaScript 의 Array 객체에 추가

var familyJSON = JSON.stringify(family);
// familyJSON 이라는 객체를 새롭게 생성 후, JSON.stringify()를 사용해 JSON 객체로 변환

이제 console.log(family), console.log(familyJSON) 을 이용해 두 객체를 출력하면

 

콘솔창을 확인해보면 JavaScript 객체가 출력된 후 JSON 객체가 출력되었다. 아래의 JSON 객체를 살펴보면 위에서 JavaScript 객체에서는 name: '기영이' 가 "name":"기영이" 이렇게 JSON 형식대로 잘 변환이 된 것을 알 수 있다!

 

#4 JSON.parse()

JSON.parse() 라는 메소드는 위의 JSON.stringify() 와는 반대로 JSON 객체를 JavaScript 객체로 변환시켜주는 함수이다. 우리가 생성한 familyJSON 에는 방금 family 라는 자바스크립트 객체를 JSON 형식으로 변환한 객체가 담겨있는데 JSON.parse() 메소드를 이용해 JSON 객체를 다시 familyJS 라는 자바스크립트 객체로 변환해보자. 

var familyJS = JSON.parse(familyJSON);

console.log() 를 이용해 출력해봐도 다시 JavaScript 파일로 잘 변환이 된 것을 알 수 있다. 

 

#5 파일 입력

우리는 여기서 더 나아가 file.writeFile() 이라는 메소드를 사용해서 방금 JSON.stringify()로 만든 JSON 객체를 .json 파일로 저장해보자. 파일 생성은  file.writeFile(생성할 파일의 경로, 파일 안에 작성할 내용, 인코딩 방식, 콜백 함수(에러 객체))  의 형식으로 가능하다.

var file = require('fs');

먼저 js 파일에 다음과 같은 코드를 입력해준 뒤,

file.writeFile("familyJSON.json", familyJSON, "utf-8", function(e){
    if(e){
        console.log(e); // 오류가 발생했을 때 해당 오류 출력 
    }else{
        console.log("JSON file is created successfully"); // 파일이 잘 만들어졌다면 출력할 문구 
    }
})

위의 코드를 추가하고 콘솔창에서 node 를 이용해 js 파일을 실행시켜주면, 아래 사진과 같이 콘솔창에 성공 문구가 출력됨과 동시에 js 파일이 있는 동일한 경로에 familyJSON.json 이라는 파일이 잘 생성되었을 것이다! (물론 경로를 설정하여 현재 작업중이 아닌 다른 폴더에 파일을 생성할 수 있다.) 

생성된 familyJSON.json 파일을 열어보면 아까 stringify()를 통해 변환 후 출력해봤던 JSON 객체들이 잘 저장된 것을 확인할 수 있다.

 

#6 파일 출력

파일 출력은 file.readFile() 메소드로 가능하며, 메소드의 사용은  file.readFile(출력할 파일의 경로, 인코딩 방식, 콜백 함수(에러 객체, 파일의 내용을 담아올 객체))  으로 할 수 있다. 

file.readFile("familyJSON.json", "utf-8", function(e, datas){
    if(e){
        console.log(e); // 오류가 발생했을 때 해당 오류 출력 
    }else{
        let home = JSON.parse(datas); //읽어온 파일의 데이터들을 home 이라는 객체에 JS 형식으로 저장
        console.log(home); // home 을 출력
    }
});

familyJSON.json 파일에서 데이터를 읽어와 home 이라는 새로운 객체에 JSON.parse() 메소드를 통해 JavaScript 형식으로 변환 후 출력해보면 다시 JavaScript 형식으로 변환된 객체가 잘 출력된다 ㅎㅎ 

 

오늘은 이렇게 자바스크립트에서 JSON 형식으로 변환 또는 그 반대 방법인 JSON.stringify() 와 JSON.parse(), 그리고 두 메소드를 활용한 파일 입출력까지 배워보았다! 다음에는 더 재미있는 것을 배워보자!