JavaScript Object Notation
자바스크립트 객체 표기법
인터넷을 찾아보시면 다음과 같이 나와있습니다.
사람이 읽을 수 있는 문자 기반의 데이터 교환 표준
이 말에서 우리는 파악할 수 있습니다.
•
내가 읽기 편하게끔 되어져 있는 문자(영어) 형태구나
•
데이터 교환 표준이구나
◦
데이터를 교환할 때 사람들끼리 약속한 표준이구나
•
자바스크립트 문법이 아니구나
그럼 여기서 더 의문을 가져볼 수 있는 몇 가지가 저는 있습니다.
1.
다른 언어로도 JSON형태의 데이터 포맷을 만들 수 있나?
2.
굳이 데이터 포맷을 정해놓는 이유는? 그냥 코드로 작성해서 넘겨주면 안되는건가??
이 의문점에 대해 조사해보았습니다.
첫번째로, 다른 언어로도 만들 수 있다고 합니다.
자바스크립트로부터 파생된 거라 앞에 JS가 붙어있기는 하지만, 언어로부터 독립된 데이터포맷이라고 합니다.
두번째 점은 이제 막 JS를 습득하기 시작한 입문자 시절의 저로써는 궁금했습니다.
사실 지금 생각해보면 큰 틀의 웹 동작 방식을 아예 몰랐던 것 같습니다..
웹에서 저희가 그려놓은 HTML, CSS 위에서 JS를 통해 서버로부터 넘어온 데이터를 화면에서 상황에 따라 다르게 그려내고, 다시 웹에서 사용자의 입력 데이터를 추가해 새로운 데이터를 보내주는 거죠(JSON형태나 다른 형태로)
다른 XML이라던지 포맷들도 존재하긴 합니다.
근데 좀만 찾아보시면 느낌이 오시겠지만, JSON이 가독성이 매우 높습니다.
더 가독성 좋은 포맷도 나중에 생길 수도 있겠지만, 현존하는 포맷 중에서 저는 읽기 가장 편한거 같습니다. 거부감도 안 들고…(공대 감성이 없달까)
데이터 교환 방법
그렇다면 어떤 식으로 JSON형태의 데이터를 서버로부터 주고 받을 수 있을까요?
우선, 몇 가지 JSON 작성법을 알려드리겠습니다.
•
json파일의 확장자는 “.json”입니다.
•
< “key” : “value” > 형태(<>는 아님)로 데이터를 표현합니다.
◦
여기서 key와 value는 큰따옴표(””)로만 문자열 처리를 해줘야합니다(작은 따옴표X)
◦
Value의 자료형이 몇 개로 한정되어 있습니다.
▪
문자열
▪
숫자
▪
배열
▪
객체
▪
논리값(Boolean)
▪
null
undefined값은 지원하지 않습니다.
NaN같은 값은 지원하지 않습니다.
함수는 지원하지 않습니다.
•
Tail Comma를 지원하지 않습니다.
◦
Tail Comma란, 마지막 속성 뒤에 ,를 붙이는 걸 의미합니다.
◦
다른 언어에서는 자주 객체 안에 마지막에도 ,를 붙여놓고 쓰기도 하는데 JSON에서는 사용하시면 안됩니다.
그럼 이제 한 번 어떤 식으로 데이터를 주고 받을 수 있을 지 작성해보겠습니다.
자바스크립트로 작성했습니다.
// example.js
const data_from_user = {
"name" : "Lee Si Young",
"age" : 20,
"height" : 183,
"family" : ["father", "mather", "sister"]
};
JavaScript
복사
예시로 제가 로그인 폼에서 사용자의 데이터를 받아냈다고 생각해볼게요
그렇다면 이제 어떻게 데이터로 변환해서 서버로 보낼 수 있을까요?
// example.js
JSON.stringify(data_from_user);
// js obj to json : JSON.stringify()
이렇게 JSON으로 변환해준 데이터를 서버로 보내주면 됩니다.
JavaScript
복사
그렇다면 서버로부터 받아온 JSON데이터는 어떻게 사용할 수 있을까요?
// example2.js
const data;
fetch('어떤 url')
.then((response) => response.json())
.then((jsonData) => data = jsonData);
JavaScript
복사
또 다른 경우도 있을 수 있습니다.
제가 JSON데이터를 가지고 있다면, 어떻게 사용할 수 있을까요?
한 폴더 내에 .json파일과 .js파일이 존재한다고 생각해보겠습니다.
// example_json.json
{
"name" : "Lee Si Young",
"age" : 20,
"height" : 183,
"family" : ["father", "mather", "sister"]
}
JSON
복사
// example_javascript.js
import JSON_DATA from "./example_json.json"
// json to js obj : JSON.parse()
const data = JSON.parse(JSON_DATA);
// 이후 데이터 처리
이렇게 JSON 데이터를 객체로 변환해주면 됩니다.
JavaScript
복사