console.log(a)
var a = 1;
-> undefined가 나옴
위 내용은 오류가 안남 WHY?
(let은 오류가 난다.
이게 바로 호이스팅이다.
호이스팅은 코드를 실행하기전에 변수선언을 스코프의 최상단으로 끌어올리는 것이다(X)
호이스팅은 코드를 실행하기전에 변수선언을 스코퍼의 최상단으로 끌러올리는 것처럼 보이는 현상을 말한다(O)
자바스크립트 엔진은 코드 실행 전, 해당 코드를 형상화 하고 구분하는 과정을 거친다.
여기서 이미 변수 및 함수선언이 저장되어 있기 때문에 변수선언(var a = 1) 보다
호출( console.log(a) )가 먼저 나와도 오류 없이 작동을 한다.
네이버에 get을 하면, 코드의 제어권은 네이버에 있다.
네이버가 정보를 줄 때 까지 나는 기다려야 한다.
바로 이게 비동기 통신이다.
setTimeout(() => {
console.log("hello");
}, 30000); - - - - 1번
console.log("bye"); - - - - 2번
-> 실행순서는 2번 -> 1번 순이다.
then,catch,finally,async,await
이제 우리는 1번 -> 2번 순으로 구현을 해보려고 한다.
바로 axios를 통해서,
fetch("http://localhost:3001/posts").then((res) => {
console.log(res);
});
하지만 fetch는 오류가 나게 되었을 때, 오류메세지를 안준다. 따라서 잘 사용을 안한다.
axios
.get("http://localhost:3001/posts")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
// alert을 주거나, 오류 페이지로 이동, 오류 관련 데이터를 반드시 적제
});
axios
.get("http://localhost:3001/posts")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
// alert을 주거나, 오류 페이지로 이동, 오류 관련 데이터를 반드시 적제
});
console.log(1);
여기서는 무조건 console.log(1)이 먼저 수행이 된다. 그다음 get 요청을 받아옴
const fetchData = async () => {
const response = await axios.get("http://localhost:3001/posts");
console.log("response", response);
return response;
};
fetchData();
async로 묶어놓은 함수 스코프 안에서 await를 사용 할 수 있다.