웹페이지

JAVASCRIPT STEP 58 - JSON

2023. 5. 4. 11:13
728x90

★ JSON, Java Script Object Notation

  • 자바스크립트 객체 표기법
  • 자바스크립트의 객체를 문자열로 표현할 때 사용하는 포맷
  • 자바스크립트에서 사용 중인 데이터(객체)를 이부 환경에 전달 > (파일입출력, 네트워크에 전달) > 하나의 문자열로 표현하는 방법 > JSON
  • XML과 함께 데이터 전달용으로 많이 사용
  • 언어 독립적 > 대부분의 언어/환경에서 JSON 지원

■ 규칙

  • 1. 반드시 프로퍼티를 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능)
{
    "name" : "홍길동",
    "age" : 20
}
  • 2. 반드시 값도 쌍따옴표로 묶는다.(홀따옴표, 역따옴표 불가능)
  • -> 값 : boolean, 숫자 > 그냥 표현 가능
"name" : "홍길동",
"age" : 20
  • 3. 메소드 표현 불가능 > 데이터(변수)만 표현 가능
{
    "name" : "홍길동",
    "age" : 20
    //"hello" : function() {} //불가능
}

 

■ 응용

  • JSON 형태로 인코딩한 결과물
const hong = {
    name: '홍길동',
    age : 20,
    gender : "남자"
};

//str
//- JSON 형태로 인코딩한 결과물
//- 직렬화
let str = JSON.stringify(hong);
  • JSON 형식의 문자열 수신
//JSON 형식의 문자열 수신
const data = '{ "name" : "홍길동", "age" : 20}';

//console.log(data)

const result = JSON.parse(data);

console.log(result.age);
728x90
저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임  (0) 2023.04.28
JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기  (0) 2023.04.28
JAVASCRIPT STEP 55 - 다량의 선 애니메이션  (0) 2023.04.28
JAVASCRIPT STEP 54 - 셀 클릭 애니메이션  (0) 2023.04.28
JAVASCRIPT STEP 53 - 이미지 뷰어  (0) 2023.04.28
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임
  • JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기
  • JAVASCRIPT STEP 55 - 다량의 선 애니메이션
  • JAVASCRIPT STEP 54 - 셀 클릭 애니메이션
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 정보처리기사필기
  • 데이터베이스
  • 프론트엔드
  • DBA
  • 앱개발자
  • 정보보안전문가
  • css
  • java
  • 백준
  • IT자격증공부
  • 정보처리기사
  • html
  • JavaScript
  • 개발블로그
  • 웹개발자
  • ajax
  • IT개발자
  • DB
  • 백엔드
  • 웹개발
  • it
  • 개발자
  • 코딩테스트
  • React
  • IT자격증
  • 자바
  • jquery
  • 웹페이지
  • jsp
  • 알고리즘

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 58 - JSON
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.