[💻] Json

JSON( javascript Object Notation )라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용 되는 경량의 DATA 교환 형식을 의미한다.

• Javascript에서 객체를 만들 때 사용하는 표현식.
• 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 XML을 대체해서 데이터 전송에 사용한다.
• 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법.
• 비동기통신에 사용하는 대표적인 데이터 교환 형식

프론트엔드가 준 데이터를 뿌리는거임!! api통신

📌 비동기통신

웹페이지 사용자의 요청에 빠르고 효율적으로 응답하기 위해 동기화 하지 않는 통신 방법

Javascript의 object(객체)와 같이  key(속성)-value(값)가 묶여진 표기법을 사용

• 배열(array)는 리스트 형식 [ 대괄호 ]
• 객체(object)는 속성 값 쌍의 집합 { 중괄호 }
• 복수의 data는 , 로 구분

중괄호로 시작{ }해서 안에 쓸 데이터들을 담는다.

//sample.json파일
{
    "items":[
        {
            "name":"윤미",
            "age":18
        },
        {
            "name":"소미",
            "age":28
        },
        {
            "name":"미미",
            "age":38
        }
    ]
}

문자열은 항상 " "를 이용하여 표기 해야 한다.

데이터 작성후 제이쿼리에 연결시켜준다.

📌 fetch문법

옛날에는 @ajax @getJson 을 이용해서 json을 불러왔지만 요즘에는 fetch문법를 이용한다.

fetch("./sample.json") // 가지고오고 싶은 데이터,주소도 가능
.then((response) => response.json()) //response → 받다
.then((json) => {
    // console.log(json);
    // alert(json);
    const items = json.items; //json데이터의 items에 접근
    let html = ''; //변수가 반복해서 계속들어갈꺼라 한번 생성
    items.forEach(item => { //개수만큼 반복해야함
        html += `<li>${item.name}</li>`; //변수에 담음
   });
	//list(변수)
   list = document.querySelector('.list'); ///.list 선택해줬음 (자바스크립스 선택법)
   list.innerHTML = html; //.list에다가 넣었음
});//

✏ .then((response) => response.json())

response를 json으로 받아오겠다

꼭 response.json로 받는건 아니지만 대부분이 json이다.

✏ => (에로우펑션)

실행이라는 뜻 (새로나온 문)
쓰는법

( ) => { }

✏ const 변수명= json.변수명;

json안에 있는 변수명을 가져오겠다!

const란 절대 변하지 않는 변수, 재할당 불가능한 변수(var는 가넝)

items 에 대한 복수선택자 forEach문을 사용

📌 자바스크립트 선택법

list = document.querySelector('.list');

• querySelector - 단일영역 , 여기다가 p태그를 넣으면 제일 앞에 있는 p태그 하나만 선택됨

• querySelectorAll - 모든 영역 ex) 모든 p태그

📌 반복문

for → 내가 돌릴 갯수를 설정해야함, 귀찮
forEach(각각) → 배열만 적어주면 갯수만큼 알아서 돌아감

• element → json정보에 들어갈 수있게 해주는애, 아무이름이든 상관없음

배열이름.forEach(element => {

});

무조건 객체로 이루워져있다

• 객체 - 오브젝트
  

    사과 = {
         당도(변수)
         당도:10,
         색:"빨강",
         금액:1000
     }
    ```

✏ 내가 만든 html(body)에 넣고싶을때

let html = ''; //html이란 변수임

human.forEach(element => {
    html += `<li>${element.name}</li>` //${데이터}
    // console.log(html); // 하나씩 순차적으로 실행 (과정을 볼수있음)
});
console.log(html); // 최종값

let → 재할당 가능함, 바뀔꺼같은 데이터면 let

html += `<li>aaaa</li>`
html = html + `<li>aaaa</li>`

• += → html변수에 태그를 합쳐서 HTML에 담는다.
  그걸 배열 개수만큼 돌린다. (난 3번)

• 문자열에 변수를 보관하고 바꿀때 쓰면됨

• 백틱 을 사용하지 않고 ‘ ’ 따옴표를 쓴다면 변수를 못쓴다. 끊어써야함 → 번거로움
  → 백틱을 사용하면 한번에 사용가능

adult = '성인'

if (element.age < 20) {
    adult = '미성년자'
}else{
    adult = '성인'
}

adult = (element.age < 20) ? '미성년자':'성인';

pet = (element.pet) ? '있다':'없다';

html += `<li>이름 : ${element.name}<br> 성인: ${adult}<br> 펫: ${pet}</li>`

• ? = 참이면
• : = 거짓이면 (없다면)

element.pet이 조건문이 없는이유는
→ if문 자체가 참일때 실행되는 애임으로 자체가 조건문이 될수있다.