코드캠프 Day4

dev_eunchae·2022년 5월 12일
0

부트캠프 일지

목록 보기
4/40
  1. 동기와 비동기 방식 ' Async-Await'

동기

  • 게시글 등록 - 완료 (응답이 모두 끝난 후 요청) - 불러오기
  • 서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신

비동기

  • 순서가 상관이 없을 때 - 동시에 여러개의 일을 할 때
  • 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신
  • 서버에 요청 (등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않음
    (ex.네이버 메인 / 게임받으며 카톡하기)

' async/ await ': 비동기를 동기로 바꿔주는 명령어

  1. Vscode에서 데이터 전송하기
//비동기 통신
function 함수이름 () {
const data = axios.get('https : //koreanjson.com/posts/1')
console.log(data) //Promise
}

데이터를 받아올 때까지 기다려야하지만, 그렇지 않고 2번줄로 넘어옴.
data 안에는 비어있음, 언젠간 주겠다는 약속만

왜 ?

📌 javascript => 동기적 방식

그러면...

📌 axios 등의 라이브러리 => 비동기적 방식

//동기 통신
async function 함수이름() {
const data = await axios.get('https : //koreanjson.com/posts/1')
console.log(data) // {id :1 , title :"~" , ...
}

백엔드에서 데이터를 받아올 때까지 기다렸다가 data에 저장하고 내려옴

설정하기
const createBoard = useMutation () - 변경 / post, put, delete
const createBoard = useQuery () - 가져오기 / get

실행하기
createBoard()

오늘 공부를 돌아보며

아아.. 400 에러에 빠졌다... 3시간째 뭘 해도 400만 나온다...

profile
Frontend 수련 중

0개의 댓글