JSON, JavaScript Object Notation
- 자바스크립트 객체 표기법
- 자바스크립트의 객체를 문자열로 표현할 때 사용하는 포맷
- 자바스크립트에서 사용중인 데이터(객체)를 외부 환경(파일입출력, 네트워크)에 전달 > 하나의 문자열로 표현하는 방법 필요 > JSON
- XML과 함께 데이터 전달용으로 많이 사용
- 언어 독립적 > 대부분의 언어/환경에서 JSON 포맷 지원
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
</style>
</head>
<body>
<script>
JavaScript Object 표기법
const o1 = {
name: '홍길동',
age: 20
};
JSON 표기법
{
"name": "홍길동",
"age": 20
}
JSON 규칙
- 반드시 프로퍼티를 쌍따옴표로 묶는다.(홑따옴표, 역따옴표 사용 불가능)
- 반드시 값도 쌍따옴표로 묶는다.(홑따옴표, 역따옴표 사용 불가능)
단, 값이 boolean, 숫자일 경우 묶어도 되고, 그냥 표현해도 됨
- 메소드 표현 불가능 > 데이터(변수)만 표현 가능
{
name: "홍길동"(X)
"name": "홍길동"(O),
"age": 20(O)
"age": true(O)
hello: function() {
불가능
}
}
const hong = {
name: '홍길동',
age: 20,
gender: 'male',
hello: function() {
console.log(this.name);
},
nick: [ '술꾼', '망나니', '바보' ],
address: {
sido: '서울시',
gugun: '강남구',
dong: '역삼동'
}
};
str
- JSON 형태로 인코딩한 결과물
- 직렬화(Serialized) 한 결과물
let str = JSON.stringify(hong); //문자열을 return
console.log(str); //{"name":"홍길동","age":20,"gender":"male"} (hello() 미포함)
console.log(typeof hong); //object
console.log(typeof str); //string
console.log(str.name); //undefined > str은 문자열이지 object가 아니기 떄문에 name을 호출할 수 없음
console.log(str); //{"name":"홍길동","age":20,"gender":"male"} (hello() 포함)
-> JSON에서는 메소드를 넣을 수 없으니 알아서 걸러버림
console.log(str); //{"name":"홍길동","age":20,"gender":"male","nick":["술꾼","망나니","바보"]} 배열은 출력 가능
console.log(str); // {
// "name":"홍길동",
// "age":20,"
// gender":"male",
// "nick":["술꾼","망나니","바보"],
// "address":{"sido":"서울시","gugun":"강남구","dong":"역삼동"}
// }
// JSON(string) > JavaScript(object)
JSON 형식의 문자열을 전달 받음
const data = '{"name": "홍길동", "age": 20}';
// console.log(data) //안나옴
const result = JSON.parse(data); //JSON 형식으로 변환
console.log(result.name); //홍길동
console.log(result.age); //20
//JavaScript Object > JSON > JavaScript Object
//https://jsonformatter.org/json-parser 잘 만들었는지 확인
//https://jsonplaceholder.typicode.com/ 더미 만드는 사이트 com/뒤에 todos 나 posts를 붙이기
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - 클래스, class (0) | 2023.05.08 |
|---|---|
| JavaScript - CSS 스크롤 이동 애니메이션 (0) | 2023.05.08 |
| JavaScript - CSS 이미지를 연결시켜서 애니메이션 효과 주기 (0) | 2023.05.08 |
| JavaScript - CSS 체크박스 선택 시 이미지 이동 (0) | 2023.05.08 |
| JavaScript - CSS 접었다가 클릭하면 열기 (0) | 2023.05.08 |