axios를 이용한 rest-api post하기!

뭔가 코드를 다 넣기에는 조금 무리가 있어서... 그냥 짧게 짧게 적으려고 한다
어짜피 구조만 대충 알고 있으면 꾸겨넣는 법은 계속 하다보면 할 수 있어지니깐

핸드폰 번호를 알맞게 다 넣고 버튼을 누르면 인증번호를 요청하는 api의 구조를 만든 것인데

const getValidationNumber = async () => {
  let num1 = document.getElementById("PhoneNumber01").value;
  let num2 = document.getElementById("PhoneNumber02").value;
  let num3 = document.getElementById("PhoneNumber03").value;
  let number = num1 + num2 + num3;
  axios({
    method: "post",
    url: "http://localhost:3000/tokens/phone",
    data: {
      myphone: `${number}`,
    },
  }).then((res) => {
    console.log(res); // 에러코드같은거 보려고 일부로 넣는 편이다.
  });
  document.querySelector("#ValidationInputWrapper").style.display = "flex";
  console.log("인증 번호 전송");
};

번호를 적는 입력칸이 3개로 나눠져있어서 일단 각각을
document.getElementById().value를 통해 가져오고 한개로 합쳐주는 작업을 했다.

그 후 axios를 사용하여

요청을 하는 값이기에
method:"post"
익스프레스를 사용해서 웹서버를 열고있다보니 정해놓은 포트번호와 endPoint
url: "http://localhost:3000/tokens/phone"

가져오는 값은 data에 담아서 보낼 것이고, myphone에 number의 값을 담아서 보낼 것이라

data: {myphone: `${number}`}

그 나머지는 일단 에러코드를 확인 하기 위해 넣어놨다.

그리고 반대편, 받아주는 곳에서는

import { checkValidationPhone, getToken, sendTokenToSMS } from "./phone.js";
import express from "express";
import cors from "cors";

app.use(cors());
app.use(express.json());

app.post("/tokens/phone", (req, res) => {
  console.log(req.body);
  const myphone = req.body.myphone;

  checkValidationPhone(myphone);
  // 1.  휴대폰 번호 자리수 맞는지 확인하기
  const isValid = checkValidationPhone(myphone);
  if (isValid) {
    // 2. 핸드폰 토큰 6자리 만들기
    const mytoken = getToken();
    // 3. 핸드폰 번호에 토큰 정보 전송하기
    sendTokenToSMS(myphone, mytoken);
    res.send("인증완료!");
  }
});

함수를 불러오기 위해서
import { checkValidationPhone, getToken, sendTokenToSMS } from "./phone.js";
express를 웹서버로 사용하고 있어서

import express from "express";
app.use(express.json());

웹 호스팅을 사용하지 않고 개인 컴퓨터 웹서버로 활용하기 때문에 조건을 없애놔야 접근이 가능해서

import cors from "cors";
app.use(cors());

rest로 값을 받아오기 위해 선언하고, endPoint 지정하고, 주고 받아야하니까
app.post("/tokens/phone", (req, res)

1 : 프론트쪽에서 나에게 보내는 값은 req에 담겨오고
2 : 그 중 내가 필요한 데이터들은 body에 담겨오고
3 : 내가 담을 때 myphone 에 담았으니 그것을 재정의하고
const myphone = req.body.myphone;
그리고 만들어놓은 함수에 담겨온 데이터가 들어가있는 myphone을 인자로 줘서 함수를 빙글빙글 돌렸다.

내가 지금.....프론트쪽에서 선언하는 방식이 수업과는 다른 방식을 쓰고 있어서(ㅠㅠ)
왜인지는 모르겠는데 처음 과제할때 본 구조가 저거라 ; ; ;
바꾸려고 했는데 멘토님이 신기하다고 그냥 지켜나가보라고 하시길래(ㅋㅋ)
울며겨자먹기로 찾아서 썼다...

아, 그리고 package.json 지금 모듈을 쓰고 있고, axios,cors,exprss를 사용중이라 뭐 하나라도 빠지면 바보된다

 "type": "module",
  "dependencies": {
    "axios": "^0.26.1",
    "cors": "^2.8.5",
    "express": "^4.17.3"
    }

참고한 블로그
아마 앞으로도 참고할 듯 한 링크

코딩트리