동기 vs 비동기
기다리고 안기다리고
왜 필요하냐
불러오는 속도가 아무리 빨라도 등록이 완료되기 전에 불러오기 때문이다
동기
게시글 등록 -> 게시글 등록완료 -> 기다렸다가 -> 게시글 불러오기
비동기
게시글 등록 -> 게시글 등록완료 -> 게시글 불러오기
비동기 요청들이 서로 기다릴 필요가 없을 때 쓴다.
동시에 여러 일 할 때 사용(사진 참조 ex-페이지가 켜질 때 게시물 목록, 상품목록 가져올때)
비동기 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않고 진행
javascirpt는 동기적 방식으로 움직인다
async function qqq() {
const data = await axios.get('api에서 받아오는 함수')
console.log(data)
}
await는 함수로 묵여있어야지만 쓸 수있고 async를 function앞에 써줘야 된다 (세트메뉴)await만 있으면 에러뜬다.
axios는 비동기라서 앞에 await를 써줘서 데이터를 불러올때까지 기다려줘야한다.
async / await해석: 기존에 비동기로 작동하는 녀석을 / 기다려줘
디버깅잡기
브라우저 검사에 들어가서
html css 는 elements로가서 확인
올바른 방법: element에서 직접 바꿔보고 확인되면 vscode에서 변경.
js는 콘솔을 이용해 디버깅을 잡고 변수마다 값이 잘 들어오는지 console.log로 찍어보면 된다.
network는 network에서 확인
깔끔하게 지워주고 요청하기 버튼눌러보면 api받아오는게 보인다. preflight는 가짜api임
가짜 api는 먼저 길을 가보고 잘 되는지 확인해보는 거다.
fetch는 진짜 api이다.
