-
질문 & 답변
카테고리
-
세부 분야
백엔드
-
해결 여부
해결됨
axios를 활용한 데이터 통신
23.05.02 08:35 작성 23.05.02 08:38 수정 조회수 593
0
핸드폰 번호를 입력하면 페이지 상에서는
개발자 도구에서 이렇게 잘 나오지만
vscode console에 찍어보면 myphone 번호가 아니라 undefined로 나옵니다.
아래는 phone.js 코드입니다. (length에서 자꾸 에러가 나서 그 부분만 수정된 코드입니다.)
function checkPhone(myphone) {
//1. 휴대폰 번호 자릿수 맞는지 확인하기(10-11자리)
if (myphone && myphone.length < 10 || myphone && myphone.length > 11) {
console.log("에러 발생!!! 휴대폰 번호를 제대로 입력해주세요.");
return false;
} else {
return true;
}
}
//2. 인증번호 6자리 만들기
function getToken() {
const result = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
console.log(result);
return result;
}
//3. 핸드폰 번호에 토큰 전송하기
function sendTokenToSMS(myphone, result) {
console.log(myphone+ "번호로 인증번호" + result + "를 전송합니다.");
}
module.exports = { checkPhone, getToken, sendTokenToSMS };이건 signup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입 연습하기</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function zzz(){
//1. 입력한 휴대폰 번호 가져오기
const myphone = document.getElementById("myphone").value
console.log("나의 핸드폰 번호 : ", myphone)
//2. 해당 휴대폰 번호로 인증번호 API 요청하기
axios.post("http://localhost:3000/tokens/phone", {
qqq: myphone
}).then((res) =>{
console.log(res.data)
document.getElementById("result").innerText = res.data
})
}
</script>
</head>
<body>
휴대폰 번호 : <input id="myphone" type="text"/><button onclick="zzz()">인증하기</button>
<div id="result">인증상태</div>
<button>회원가입하기</button>
</body>
</html>
index.js
const express = require('express');
const { checkPhone, getToken, sendTokenToSMS } = require('./phone.js');
const swaggerUi = require('swagger-ui-express');
const swaggerJsdoc = require('swagger-jsdoc');
const {options} = require('./swagger/config.js');
const swaggerSpec = swaggerJsdoc(options);
const cors = require('cors');
const app = express();
//use : 모든 메소드에서 작동한다.
app.use(express.json())
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
app.use(cors())
//GET 방식의 API를 만들겠다.
//endpoint는 /로 하겠다.
// /qqq이쪽 endpoint로 누군가 요청을 하면 아래 함수를 실행을 시키겠다.
app.get('/boards', function (req, res) {
//1.DB에 접속 후, 데이터를 조회. 조회한 데이터를 객체로 담아온다.
const result = [
{number : 1, writer: "철수", title : "제목입니다.", contents: "내용이에요."},
{number : 2, writer: "영희", title : "제목입니다.", contents: "내용이에요."},
{number : 3, writer: "훈이", title : "제목입니다.", contents: "내용이에요."},
]
//2.DB에서 꺼내온 결과를 브라우저에 응답(response)으로 주기
res.send(result)
}, function (req, res){
})
app.post('/boards', function (req, res) {
//1. 브라우저에서 보내준 데이터 확인하기
console.log(req)
console.log("=====")
console.log(req.body)
//2. DB에 접속 후, 브라우저에서 받은 데이터를 디비에 저장해야 함.
//3. DB에 저장된 결과를 브라우저에 응답(response) 주기
res.send('게시물 등록에 성공하였습니다.')
})
app.post('/tokens/phone', function(req, res){
const myphone = req.body.phone
//1. 휴대폰번호 자릿수 맞는지 확인 (10-11자리)
const isValid = checkPhone(myphone)
if(isValid === false) return
//2. 핸드폰 토큰 6자리 만들기
const myToken = getToken()
//3. 핸드폰 번호에 토큰 전송하기
sendTokenToSMS(myphone, myToken)
res.send("인증완료!!!")
})
//포스트맨에서 send 버튼 누르는 것 = 기다린다 = listen
app.listen(3000)
답변을 작성해보세요.
답변 1