동기 / 비동기

• HTTP : 서버 통신의 길로 요청과 응답 으로 이루어짐
  • front -> back : 요청
  • back -> 다른 back (express 서버 -> 메일관련/ 문자발송관련 back) : 요청
  • 그에 대한 응답

글등록하고 불러오기했는데 왜 안불러와지지?

: 등록이 완료되기전에 불러오기하면 요청오류로 안불러와짐

• 등록 요청을 받으면 데이터베이스에 데이터를 등록하여 저장을 해야지만 벽한 게시글 등록 완료가 된것으로 그 이후에 게시글 불러오기를 해야지 불러와짐!

• 즉, 응답이 모두 끝난후 불러오기 요청 해야하는것

📌 동기방식

: 등록 요청을 했으면 등록이 끝날때까지 기다렸다가 다음에 요청하는것

• 서버 컴퓨터가 작업이 끝날때까지 통신
• 자바스크립트는 동기 방식

📌 비동기방식

: 요청들이 서로 기다릴 필요가 없을 때 사용

• 동시에 여러 일 할 때 사용 : 게시글 목록 가져오기 와 상품 목록 가져오기 가 동시에 이루어질때 ( 즉, 서로가 다르고 독립적으로 이루어졌을때 가능)

• ex) 게임이 다운로드 될때까지 기다리는것에 아니라 게임 다운 받으면서 카톡하는것

• 더 효율적인 방식

• 끝날때까지 기다리지 않는 통신

• 서버에 요청(등록, 수정, 삭제 등) 저장이 될때까지 기다리지 않고 다른 작업 진행

• 대부분 비동기 방식 사용

• 자바스크립트에서 axios 사용해서 비동기로 작용시키게된것

Axios

Axios
: Node.js를 위한  HTTP 비동기 통신 라이브러리

Axios 설치

• yarn add axios

Axios 사용

const data = axios.get('https://koreanjson.com/posts/1')
console.log(data) // Promise

1) 게시물 1번 조회 요청
2) DB에 가서 1번 게시글을 찾음
3) 1번 게시글 찾으면 res 응답
4) 1번 게시글을 data 상자에 저장을 하게됨
5) 저장된 데이터 내용을 보려고 console.log(data) 실행
6) console에 담긴 결과가 promise
=> axios가 기본적으로 비동기로 동작을 하기때문에 req를 보내놓고 res가 올때까지 기다리지않고 바로 console.log 를 실행하게됨. 따라서 데이터가 언제인지 모르겠지만 데이터를 받게되면 줄게 라는 약속만 받은 상태인것

만약, 실제로 받을때까지 완벽하게 기다렸다가 console.log 실행을 시키고 싶다면?
=> 응답을 받을때까지 기다려줘야지 console.log 가 실행되는 부분까지 내려가지 않음

완벽하게 기다렸다가 console.log 를 실행시켜주기위해선!
async 와 await 사용

async function 함수이름() {
const data = await axios.get('https://koreanjson.com/posts/1')
console.log(data) // {id:1, title: "정당의 목적이나 활동이.."}
}

📌 비동기 통신이 async와 await 로 인해 다시 동기 통신으로 된것!

휴대폰 인증 토큰과 회원가입 이메일 발송은 vscode에서 필기하면서 구현해봄