json

json은 promise의 형태를 가진 객체를 다룬다!

콜백함수, Promise

콜백함수와 Promise는 json을 이해하기 위해서 필수적으로 알아야하는 것이다.

• 콜백함수 : 쉽게 설명해서 함수에 들어가는 매개변수 대신 함수가 들어가는 것을 말한다 (함수 안의 함수) 특정 시간이 됐을 때 실행하게 된다. 비동기를 동기처럼 표현할 때 사용하기도 한다.
  예를들면 '서버에서 데이터를 다 받아오고 난 후 이 함수를 실행!' 이런 느낌이다.
• Promise : 비동기 처리에 사용되는 객체이며 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. Promise는 서버에서 데이터를 다 받아오기도 전에 함수가 실행되서 오류가 나는 것을 해결하기 위해 사용한다.
  -> Promise의 3가지 상태!!
  -> Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  -> Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 // then 사용
  -> Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 // catch 사용
  Promise에 사용되는 메서드는 많고 알아야 할 것도 많으니 오늘은 이정도만 알고 넘어가자.

-> *비동기란
특정 코드의 연산이 끝날 때까지 멈추지 않고 다음 코드를 실행하는 것

코드확인

먼저 코드를 보면서 json에 대해 알아보자

const response = fetch("https://jsonplaceholder.typicode.com/todos/1")
  	.then((res) => res.json())
  	.then((data) => {
    console.log(data);

    let tempLItag = document.createElement("li");
    tempLItag.textContent = "테스트입니다";
    document.querySelector("ul").appendChild(tempLItag);
  });

위의 코드는 해당 url의 원하는 값을 찾아 이용하는 코드
한 줄씩 확인해보자

fetch("https://jsonplaceholder.typicode.com/todos/1")

1. fetch를 통해, 해당 url의 모든 소스들을 받아온다

.then((res) => res.json())

2. 이 then은 통신에 대한 then이고 res 통신 후 가져온 값이며, fetch에서 데이터를 받아와야 .then(콜백함수)이 실행이된다
   json()을 수행한 결과 = body부분 가져오기 수행
   json도 promise 형식이기때문에 body를 다 받고나면 다음 .then()을 실행한다

.then((data) => {

3. then도 promise 형태의 비동기 함수이기 때문에 data는 json() 처리를 한 후 가져온 body 부분이다

console.log(data);
	// 'DOM'

4. 'DOM'이라고 입력한 부분에서 DOM을 제어해주면 된다!!

  });

5. .then 함수 밖에서 response(응답값)에 대한 제어를 하게되면 Pending(대기)상태가 되니 함수 안에서 DOM을 통해 작업해야 원하는 값을 출력할 수 있다!!

정리

정리하자면

• 비동기 형식을 동기처럼 만들기 위해 콜백함수를 사용한다
• 동기처럼 만들어야 하는 이유는 코드상의 일의 순서가 중요하기 때문이다
  (선행되야 할 일이 있고, 그 다음에 따라와야 할 일이 있기 때문)
• 순서를 보면
  1.서버에서 전체 데이터 받기
  2.가져온 데이터 중 body 부분만 가지고 와서 json화 시키기
  3.콜백함수를 사용해 제어하기 => 콜백지옥을 피하고 간편하게 보기 위해 .then을 사용

아직 응답값을 제어하는 방법을 적진 않았지만 전체적인 흐름과 이렇게 작성하는 이유정도는 파악 할 수 있어야 한다
다음에는 활용하는 방법에 대해서 알아보자