※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
JSON(JavaScript Object Notation)은 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식이다. JSON은 데이터 포맷일 뿐이며 특정 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 방법이다.
ㆍ서버와 클라이언트 간의 데이터 전송 시 많이 사용된다.
ㆍ자바스크립트의 Object 객체 표기법과 매우 유사하다.
ㆍJSON 데이터는 자바스크립트 JSON 객체의 parse() 함수를 이용하면 자바스크립트 Object 객체로 변환해서 사용할 수 있다.
ㆍ프로그래밍 언어에 상관없이 사용할 수 있는 데이터 교환 방식이다.
ㆍ대부분의 언어에서 JSON 데이터를 처리할 수 있는 라이브러리를 제공한다.
JSON 데이터는 자바스크립트의 Object 객체와 마찬가지로 키(key)-값(value)을 가지며 키(key)는 반드시 쌍따욤표(" ")를 이용해서 표기해야 한다. 참고로 자바스크립트 Object의 키는 쌍따옴표를 사용하지 않아도 된다.
JSON 객체에는 2개의 중요한 내장 함수가 있다.
ㆍJSON.stringify
데이터를 서버로 전송하기 위해서는 데이터 형태를 문자열 형태로 변환해야 한다. JSON.stringify는 Object 데이터를 문자열로 변환한다.
ㆍJSON.parse
서버로부터 응답받은 데이터는 문자열 형태이다. JSON.parse 함수를 사용하면 자바스크립트 Object 객체로 변환한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
let data = {
employees: [
{ firstName: "John", lastName: "Doe" },
{ firstName: "Anna", lastName: "Smith" },
{ firstName: "Peter", lastName: "Jones" },
],
};
let stringValue = JSON.stringify(data); //Object 객체를 JSON 타입으로 전환
console.log(stringValue);
let text =
'{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
let obj = JSON.parse(text); //JSON 타입의 객체를 Object 객체로 변환
console.log(obj);
</script>
</body>
</html>
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_03. 내장 객체_Symbol (0) | 2023.11.29 |
|---|---|
| JavaScript_03. 내장 객체_Window (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Math (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Map (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Set (0) | 2023.11.28 |
