📔
web_study
  • JavaScript
  • 엘리_자바스크립트
    • 자바스크립트 기본
      • 클래스 예제와 콜백함수
      • 연산자 boolean
      • 함수 정의, 호출 그리고 콜백
      • 변수타입과 object 차이점
    • JavaScript async 와 await
    • JavaScript Promise
    • 자바스크립트 callback
    • 자바스크립트 json
    • 유용한 10가지 배열 함수들
    • 자바스크립트 배열(array)
    • 자바스크립트 object
    • 자바스크립트 (class vs object) 객체지향 언어
    • 자바스크립트 함수
    • 자바스크립트 연산.반복문
    • 데이터타입, data types, let vs var, hoisting
    • script async 와 defer의 차이점 콘솔 출력
    • 자바스크립트역사
  • 생활코딩
    • 재귀함수
    • 정규 표현식
    • 객체지향
      • 객체지향 프로그래밍
      • 생성자와 new
      • 전역객체
      • this
      • 상속
      • prototype
      • 표준 내장 객체의 확장
      • object
      • 데이터 타입
      • 참조
    • 함수지향
      • 유효범위
      • 값으로서의 함수와 콜백
      • 클로저
      • arguments
      • 함수의 호출
    • UI API, 문서
    • 모듈
    • 객체
    • 배열
    • 함수
    • 반복문
    • 조건문
    • 숫자와문자
    • 변수
    • 비교
  • 노마드 코더
    • Getting the Weather part One Geolocation
    • Image Background
    • TO DO List
    • Saving the User Name
    • Clock part One
    • 조건문 ( if , else, and, or)
    • evnet handlers
    • Function
    • Objects
    • Arrays
    • Variable(변수!)
    • Javascript
  • javascript30
    • Dram Kit
    • clock
    • Css Javascript
    • Array Cardio
    • flex panels
    • type ahead
    • Canvas Draw
    • Speech Synthesis
    • Whack A Mole
  • web standard
    • script 부분
    • form부분
    • 웹접근성
    • <meta>
  • 자바스크립트_이론
    • 기본지식(JAVASCRIPT)
    • 기본지식(CSS)
    • 기본지식(HTML)
    • 기본지식(HTTP)
    • Dom
    • 라이브러리, 프레임워크, 플로그인
Powered by GitBook
On this page
  • json
  • HTTP
  • AJAX
  • XML
  • ​
  • object to JSON
  • json to object
  • 유용한 사이트

Was this helpful?

  1. 엘리_자바스크립트

자바스크립트 json

json

  • 데이터를 주고 받을때 쓸 수 있는 가장 간단한 포멧

  • 텍스트를 이용해 사용하기때문에 가볍고 사람 눈으로 읽기에도 편함

  • KEY와 VALUE 로 이루어짐

  • 데이터를 서버와 주고 받을때 직렬화 하다

  • 프로그래밍언어와, 플랫폼에 상관없이 JSON으로 변환하고 쓸 수있다.

HTTP

  • 브라우저 위에서 동작하고있는 웹페이지나, 앱어플리케이션 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지를

  • hypertext tansfer protocal 을 어떻게 서로 주고 받는지를 정리한것을 규약한것 프로토콜의 하나

AJAX

  • 웹페이지에서 동적으로 서버에게 데이터를 주고 받을수 있는 기술

  • 최근 개발된 fetch() API로 좀 더 간편하고 빠르게 주고 받을 수 있게 되었다. (브로우저 서버 통신)

  • 인터넷 익스플로우에서는 지원이 안됨

XML

  • html과 같은 마크업하는 언어 태그들을 이용해서 화면에 나타나게함

  • 요즘에는 많이 사용되지 않음

​

object to JSON

//stringfy(obj)
let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(['apple', 'banana']);
console.log(json);
// JSON은 "" 로 출력이됨 (JSON 규격사항)

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birhDate: new Date(),
    jump: () => {
        console.log(`${name} can jump!`);
    },
};
// JSON 에는 함수나 심볼은 유효하지 않기 때문에 그렇게 인자로 들어와도 결국은 null로 리턴

json = JSON.stringify(rabbit);
console.log(json); // {"name":"tori","color:" "white"....이런식으로 출력됨}

json = JSON.stringify(rabbit, ['name','color','size']); // replacer
console.log(json); // name, color, size 만 출력됨

json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'ellie' : value; // name이 ellie로 변환됨
});
console.log(json);
  • JSON 에는 parse, stringify가 있음

  • 두가지는 전달 되는 매게변수가 다르다. 각각 다른 방식으로 호출이 가능하다. (오버로딩)

json to object

//parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json); // rabbit의 값이 출력됨
const obj = JSON.parse(json, (key, value) => {
    console.log(`key: ${key}, vlaue: ${value}`);
    return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump(); 에러 함수는 포함이 되있지 않기때문에 그것을 obj전환 했을때 점프라는 기능을 갖고있지 않음 


console.log(rabbit.birhDate.getDate());
console.log(obj.birhDate.getDate()); //29

유용한 사이트

Previous자바스크립트 callbackNext유용한 10가지 배열 함수들

Last updated 3 years ago

Was this helpful?

JSON Diff checker:

JSON Beautifier/editor:

JSON Parser:

JSON Validator:

http://www.jsondiff.com/
https://jsonbeautifier.org/
https://jsonparser.org/
https://tools.learningcontainer.com/json-validator/