221206 TIL

• 콜백함수는 setTimeOut 에서 많이 쓰임
• 콜백함수는 인자로 들어가는 함수
• 콜백함수는 비동기 처리와 밀접하다!

setTimeOut(function(){console.log("1")},3000)
console.log("2")

출력값
2
1

1은 3초뒤 찍히게 되어있어서 2가 먼저 찍히고 1이 찍힌다. (settimeout 때문에 / 3000 -> 3초)

데이터를 주고 받을 때에는 비동기 통신을 해야한다.

fetch("url") <- 비동기통신, 비동기API
여기서 then을 안쓰고 const response 등을 쓰면..

이런식으로 사용하면 fetch는 비동기 방식이기 때문에 정보를 가져오는게 느려서 console.log를 먼저 찍어준다.
근데? console.log의 response는 선언만 되고 아직 정보가 안왔기 때문에 undefined 가 찍힌다 (헉)

그럼 어떡해?? -> 그래서 콜백함수를 쓴다!!
콜백함수는 결국 setTimeout 과 같은 역할을 해주는 것!!

(끔찍한 콜백지옥의 현장)

콜백함수는 결국 저렇게 비동기 형식을 동기 처럼 만든 것.

그렇다면 왜? 비동기 형식을 동기처럼 만들었을까.

우리는 코드상에 일의 순서를 적어놓는다.
그렇다면 선행되어야 할 일이 있고, 그 다음에 따라와야 할 일이 있다.

결국 서버에서 데이터를 뭉탱이로 받아오는 것을 1번, 가져온 그 뭉탱이 중 body 부분만 갖고와서 json화 시키는 것이 2번 이 되어야 한다.

만약 동기처럼 만들지 않으면 1번->2번 이 아닌 2번->1번 순서로 일을 처리하기 때문에..
undefined를 json화 시키고 데이터를 받아오는 끔찍한 상황이 나온다. (holymoly..)

그래서 우리는.. then을 쓴다.
콜백지옥을 안만드려고..

fetch -> 뭉탱이
fetch.then (어쩌고) -> 뭉탱이 json화
fetch.then(어쩌고).then(저쩌고) -> 뭉탱이 json화 시킨 애를 가져와서 console찍어봄

이거를 라이브서버로 테스트해보면..

새로고침을 하면 A가 안뜨고 있다가 조금 있다가 뜬다.
-> 이는 response를 하는 시간이 걸리기 때문이다.

그 후 A가 뜨면 B가 같이 뜨게된다.

이걸 fetch().then().then( 이 안에!! ) 넣어줘야 fetch로 끌고온 뭉탱이를, Json화 시키고, "이안에" 부분이 실행이 된다.

추가 정보!
runtime 환경
오픈 위드 라이브 서버 -> 브라우저 환경
VS코드에서 node ~~~.js -> 노드 환경