웹페이지

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 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 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

인기 글

태그

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

최근 댓글

최근 글

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

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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