[JS] #12 JavaScript JSON

1. JSON에 대하여

 

 JavaScript 안에서는 사용되는 여러 가지 문법이 있는데(AJAX, AngularJS, React 등등) 그 중 하나이다.

 JSON은 JavaScript Object Notation의 약자로 문법에 대한 표기법이다(언어가 아니다).

 data를 서로 주고 받는 통신 상황에서 data를 어떻게 저장할 것인지 표기하는 문법이라고 이해하면 된다.

 

 이 JSON이 가장 흔히 쓰이는 것이 바로 댓글이다.

 사이트를 들어가면 사이트 내에서 이동할 때마다 URL이 바뀌는 것을 확인할 수 있다.

 URL이 바뀐다는 것은 그 사이트가 사용자에게 URL이 바뀔 때마다 새로운 문서의 전체를 준다는 것이다.

 이 모습이 페이지 단위(문자 단위; 비동기식)로 통신하는 모습이다.

 

 그런데 댓글을 열고, 다른 댓글을 더 보기 위해 [더보기] 버튼을 클릭했다.

 사이트에 새로운 댓글이 추가되었지만 URL이 바뀌지 않는다.

 이 말은 즉 새로운 문서를 사용자에게 제공하는 것이 아니라 일부분의 데이터만 사용자에게 추가로 제공한다는 뜻이다.

 

 이처럼!!

 서버에서 자료를 받아올 때 전체를 받아올 것인지, 일부분만 받아올 것인지를 결정해주고,

 데이터의 형태를 어떻게 받아올 것인지를 결정하는 것이 개발자의 몫이다.

 

 과거에는 일부분만 서버로부터 데이터를 받아올 때 xml 형식으로 많이 받아왔다.

 그런데 xml의 단점은 문법이 복잡하다는 것에 있다.

 그래서 개발된 것이 바로 JSON이다.

 

 그렇기에 JSON은 언어가 아니라는 것이다.

 단지 문법일 뿐이다.

 JSON은 현재 AJAX, NoSQL DB 등에서 주로 사용되고 있다.

 

* JSON 문법으로 구성된 문서파일을 작성할 때는 확장자명을 .json으로 한다.

 

 

2. XML도 곁들여서 알아보자

 

 XML은 여는 태그와 닫는 태그로 구성되어있는 문법이다.

 또한 Custom tag(사용자 정의 태그) 기반이다.

 이 커스텀 태그란 태그를 개발자가 직접 만드는 것을 뜻한다.

 

 예를 들어 개발자가 <database></database>라는 태그를 만들었다.

 그 안에 <driver></driver>,<username></username>,<password></password> 태그를 만들고 값을 넣는다.

<database>
    <driver>OracleDriver</driver>
    <username>system</username>
    <password>1234</password>
</database>

 이렇게 개발자들이 만든 각기 다른 태그들 안에서 데이터를 뽑아오기 위해선 복잡하고 긴 코드를 작성해야했다.

 그래서 지금은 환경설정 파일 작성시나 안드로이드 기반 앱개발시 View단을 구성할 때 주로 사용한다.

 

 

3. JSON의 기본 구조

 

 JSON은 [속성:값]의 쌍으로 데이터가 구성되어있다.

 여기서 속성은 name, key, property라 불리기도 하고 값은 value, data로 불리기도 한다.

 - 속성 구성시 " " 기호는 생략가능하다.

 - 값 구성시에는 { } 안에 저장한다. 자료형에 따라 맞는 기호를 사용해야한다(문자형이면 "" 붙이기 등).

{name:value, "name":value, 'name':value}

 

 예를 들어 위의 xml 문서에서 만들었던 것을 JSON 문법으로 만들면 아래와 같다(간단).

{driver:"OraclaDriver", username:"system", password:1234}

 

 

4. JSON으로 변수 선언하기

 

 JSON은 배열에서 나온 문법이다.

 순수하게 자바스크립트에서 배열을 만드는 것과 JSON 문법을 활용하여 배열을 만드는 것을 함께 살펴보며 JSON을 더 알아보자.

 

 1) Array 순수 배열

let person=["John", "Doe", 46];
document.write(person.length); // 3
document.write("<hr>");
document.write(person[0]);
document.write("<hr>");
document.write(person[1]);
document.write("<hr>");
document.write(person[2]);

 

 2) JSON 변수 선언

let person={"firstName":"John", "lastName":"Doe", "age":46};
// name에 "" 는 생략 가능
let person={firstName:"John", lastName:"Doe", age:46};

 

 3) Array에서 JSON처럼 변수를 선언하기(사실 굳이.. 이긴 하지만 차이를 보기 위해 ^_^)

let person=[];
person["firstName"]="John";
person["lastName"]="Doe";
person["age"]=46;

document.write(person["firstName"]);
document.write("<hr>");
document.write(person["lastName"]);
document.write("<hr>");
document.write(person["age"]);
document.write("<hr>");

 

 

5. JSON이 접근하는 방법!

 

 아래의 코드를 보며 자바 스크립트와 JSON에서 같은 데이터에 어떻게 다르게 접근하는지 확인해보자.

// JavaScript 접근
document.write(person["firstName"]);
document.write("<hr>");
document.write(person["lastName"]);
document.write("<hr>");
document.write(person["age"]);
document.write("<hr>");

// JSON 접근
document.write(person.firstName);
document.write("<hr>");
document.write(person.lastName);
document.write("<hr>");
document.write(person.age);
document.write("<hr>");

 

 JSON이 데이터에 접근하는 방식을 더 배우기 위해선 AJAX나 다른 배워야 할 것들이 필요하다.

 지금 시점에서는 JSON의 문법 정도만 기억해두는 것으로 충분하니 알아두자.

 

 

6. JSON 활용 방법

 

1) 배열 안에서 JSON 문법 사용하기

 아래의 코드를 살펴보자.

let persons=[
     {firstName:"John",  lastName:"Doe1", age:46}
    ,{firstName:"Tom",   lastName:"Doe2", age:48}
    ,{firstName:"Jimmy", lastName:"Doe3", age:44}
];

 

 위처럼 persons 변수를 배열로 선언한 후에 JSON 문법을 사용하여 배열 안에 배열을 손쉽게 넣을 수 있다.

 이제 persons 변수 안에 있는 데이터들을 반복문을 사용하여 불어와보자.

for(let i=0; i<persons.length; i++) {
    document.write(persons[i].firstName); // [object Object]
    document.write(persons[i].lastName);
    document.write(persons[i].age);
    document.write("<hr>");
}

출력된 모습

 

 

2) JSON 문법 안에서 배열 사용하기

let myObj={
     name:"John"
    ,age:30
    ,cars:["Ford", "BMW", "Fiat"]
}

document.write(myObj.cars[0]); // Ford

 

 위의 코드를 살펴보면 myObj라는 변수에 JSON문법을 활용하여 데이터를 넣는 도중 cars라는 key값에 배열을 지정하였다. 이렇게 JSON 문법 안에서 데이터를 배열로 줄 수도 있다.

 

 

 

7. JSON : for ~ in 반복문

 

1) 형식

for( key in object ) {  }

 이 반복문은 object를 key값에 대입하는 반복문이다.

 JSON 문법에서 아주 자주 쓰이기 때문에 익숙해지면 좋아서 소개한다.

 

2) 사용 예시

 아래의 코드는 일반적으로 배열을 표기하는 for문이다.

const numbers=[45,4,9,16,25];

for(let i=0; i<numbers.length; i++){
    document.write(numbers[i]);
    document.write("<hr>");
} // for end

 

 그리고 아래의 코드가 in을 사용한 for문이다.

const numbers=[45,4,9,16,25];

for(let i in numbers) {
    document.write(numbers[i]);
    document.write("<hr>");
} // for end

 

 in 뒤에 적힌 numbers가 갖고 있는 object만큼 반복을 하게 된다.

 

 

8. JSON에서 자주 쓰는 함수 : JSON에서 문자열 다루기

 

1) JSON.parse()

 위의 함수는 JSON의 문자열을 분리해주는 기능을 한다.

 아래의 코드를 확인해보자.

let person='{"firstName":"John", "lastName":"Doe", "age":46}';
document.write(person.length);
document.write(person); // 그냥 문자열
document.write("<hr>");

 지금 person 안에 들어있는 것은 눈에 보이기로는 JSON 문법 같아 보여도 ' ' 안에 들어있기에 전체가 문자열이다.

 이 문자열 안에서 JSON 형식으로 형을 변환시키는 것이 바로 JSON.parse() 함수이다.

 

 이어지는 아래의 코드를 확인해보자.

let obj=JSON.parse(person); // JSON형식으로 형변환
document.write(obj.firstName);
document.write(obj.lastName);
document.write(obj.age);
document.write("<hr>");

 obj라는 변수를 선언해주고 person 변수 안에 들어있는 내용을 JSON.parse 함수를 사용해 JSON형식으로 형변환 했다.

 그리고 아래와 같이 출력시키면 정상적으로 출력이 된다.

위는 문자열 그대로 출력, 아래는 문자열에서 JSON 형변환이 된 모습

 

 

2) JSON.stringify()

 위의 함수는 JSON.parse의 반대로 JSON의 값을 문자열로 변환해주는 기능을 한다.

 사용 방법도 동일하다.

let txt={"firstName":"John", "lastName":"Doe", "age":46};
let str=JSON.stringify(txt);
document.write(str.length);
document.write(str);