Axios 통신

 

 

fontend와 backend연결

지난번 만들었던 휴대폰 인증번호 생성 API를 가지고
연결하는 것을 진행해보자

HTML body

휴대폰번호 : <input id="myPhone" type="text" /> <button type="button" onclick="zzz()"> 인증하기 </button>

<div id="result"> 인증상태 </div>

<button> 회원가입하기 </button>

 

 

 

처리로직 만들기

1. 휴대폰 번호를 Input 에 입력한다
2. 인증하기 버튼을 클릭한다
3. javascript에서 입력된 번호를 api 호출 시 인자로 전달한다
4. api는 랜덤하게 생성한 인증번호를 서버단에 출력하고, 정상 처리시
   htm문서에 인증상태 글자를 지우고 결과를 바뀌게 한다
   html -> javascript -> api -> javascript > html

 

 

api로 휴대폰번호를 전달시 고려사항

• html에 입력된 휴대폰 번호를 어떻게 가져올 것 인지
• api를 어떻게 호출할 것 인지
• 전달을 한 뒤 결과값을 어떻게 전달 받을 것 인지

 

 

API의 통신방법

• API에게 요청시 통신모듈은 fetch , axios가 있다
  window에 기본 내장되어있고 axios는 별도 다운이 필요하다
  주로 axios를 써서 나도 axios를 이용해본다
• axios는 npm을 통해 다운받거나 Cdn을 통해 다운로드가 가능하며
  cdn으로 다운 시 window에 다운로드된다

[!AXIOS 사이트]
https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

 

 

처리진행

1. inputBox에 id 를 생성하여 js에서 가져올 수 있게 한다
2. document.getElementById 나 querySelector를 사용해서 입력된 번호를 가져온다
3. axios를 사용하여 api를 호출하며, 인자로 phone번호를 전달한다

import cors from 'cors'
// cors 오류가 나타나서 추가함
// 다음 시간에 cors 재설명 예정


axios 작성
axios.post("http://localhost:3000/tokens/phone", {
	phone : myPhone
}).then((res) => {
	console.log(res.data)
	ocument.getElementById('result').innerText = res.data
})

response로 응답받은 데이터는 object 객체임으로 필요한 값만 추출시 
data메서드를 사용해서 추출하고 innerText를 사용하여 Html에 내용변경을 한다

 

 

 

 

 

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤

gayulz - Overview

---