[포스코x코딩온] 웹 풀스택 과정 4주차 비동기 HTTP 통신 axios

 

비동기 http 통신

 

클라이언트와 서버가 데이터를 주고 받을때 HTTP 통신을 사용

비동기 HTTP 통신은 새로고침 없이 데이터를 주고받을 수 있음

 

 

비동기식 HTTP 통신 3가지

1. ajax 
2. *axios : 요즘 제일 많이 사용, 서버로 http 요청을 보내고 응답 받을 수 있음
3. fetch

 

 

 

axios

 

비동기 http 통신이 가능

장점 promise기반으로 만들어졌다.

1. npm install axios //설치
2. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //ejs 상단에 복붙

 

 

Q. axios 사용해서 버튼을 눌렀을때 input에 입력한 데이터 값을 하단에 출력하려면?

 

 

 

1. 먼저 axios 설치 후 <script>를 복붙한다.

1. npm install axios //설치
2. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //ejs 상단에 복붙

 

 

 

2. 폼페이지를 만들어야 하므로 onclick 속성이 있는 button, 결과값을 출력할 수 있는 빈 div 태그를 만든다.

*axios 사용시 데이터 수집을 위해 form에 name값만 주고 버튼에 submit 값은 안줘도됨 (어디에 제출하는게 아니므로)

<form name="register">
      <label for="name">이름</label>
      <input type="text" name="name" id="name" required />
      <br />
      <fieldset>
        <legend>성별</legend>
        <input type="radio" name="gender" value="남자" id="man" />
        <label for="man">남자</label>
        <input type="radio" name="gender" value="여자" id="woman" />
        <label for="woman">여자</label>
      </fieldset>
      <br />
      <button type="button" onclick="axiosGet()">axios get 제출</button>
      <button type="button" onclick="axiosPost()">axios post 제출</button>
</form>
    <div class="result"></div> //결과값 출력할 곳

 

 

★3. axios 사용하여 데이터 전송

axios 사용하여 버튼을 눌렀을때 데이터 전송되게 한다.

onclick 함수 안에 코드 입력

* form은 document.forms["name값"] 으로 가져오기!!

 

- ejs 코드

<script>
      const result = document.querySelector(".result"); //결과값 출력할 곳

      function axiosGet() {
        console.log("axios GET!!!!!!");

        const form = document.forms["register"]; //폼은 도큐먼트 폼이 따로 있음 폼에 class는 안되고 name 속성만 가능
        const data = { //서버에 보낼 데이터
          name: form.name.value, //폼의 name값
          gender: form.gender.value, //폼의 gender값
        };

        axios({
          url: "/axios",
          method: "GET",
          params: data, //**axios에서 get일때는 params사용, 위에 data이름을 params로 하면 params 하나만 입력해도됨
        }).then(function (response) {
          console.log(response.data);
          //구조분해할당
          //   const name = abc.data.name
          //   const gender = abc.data.gender
          const { name, gender } = response.data;
          
          result.textContent = `이름은 ${name}, 성별은 ${gender}.`;
        });
      }
</script>

 

** axios 사용해서 HTTP 요청을 보낼 땐 주로 GET, POST 메소드를 사용한다.

○ GET 메소드 : 데이터를 서버로부터 가져올때 사용된다. 데이터를 URL의 쿼리 파라미터 형태로 전송하며, 

axios에서는 ' params ' 속성을 사용해서 데이터를 전송한다.

○ POST 메소드 : 서버로 데이터를 보낼때 사용된다. 데이터를 HTTP 요청의 본문(body)에 담아서 보내며,

axios에서는 ' data ' 속성을 사용해서 데이터를 전송한다.

 

 

 

 

- 서버 코드

const { escapeXML } = require("ejs");
const express = require("express");
const app = express();
const PORT = 8000;

//템플릿
app.set("view engine", "ejs");
app.use(express.static(__dirname + "views"));

//body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

//pages
app.get("/", function (req, res) {
  res.render("index"); //index 파일 렌더링
});

app.get("/axios", function (req, res) {
  console.log(req.query);
  res.send(req.query);
});


//port 생성
app.listen(PORT, function () {
  console.log(`http://localhost:${PORT}`);
});

 

 

 

 

실습 - 아이디 banana, 비밀번호 4321을 변수로 저장하고 로그인 성공, 로그인 실패 띄우기 

 

- ejs 코드

<form name="register3">
      <label for="id">아이디</label>
      <input type="text" id="id" name="userid" />
      <br />
      <label for="pw">비밀번호</label>
      <input type="password" id="pw" name="pw" />
      <br />
      <!-- axios쓸땐 어디에 제출하는게 아니므로 submit 쓰지 않음, input에 required 안먹는이유도 제출할곳이 없어서 -->
      <button type="button" onclick="onClick()">로그인</button>
</form>
      <div class="result"></div>

<script>
      const idid = "banana";
      const pwpw = "4321"; //input 입력값은 문자열로 받으므로 문자로 저장

      const result = document.querySelector(".result");

      const form = document.forms["register3"];

      function onClick() {
        console.log("axios post 요청~!");

        const data = {
          id: form.userid.value,
          pw: form.pw.value,
        };

        //예외처리
        //사용자가 아이디, 비번 입력하지 않을때
        console.log(data.id);
        if (data.id === "" || data.pw === "") {
          result.textContent = "아이디와 비밀번호를 입력하세요";
          return; //즉시종료
        }
        //axios는 위의 예외처리 조건이 충족되지 않은 경우에 실행되는 것
        axios({
          url: "/axios3",
          method: "post",
          data,
        }).then(function (reponse) {
          console.log(response.data);
          if (reponse.data.id == idid && reponse.data.pw == pwpw) {
            result.textContent = `로그인 성공`;
            result.style.color = "red";
          } else {
            result.textContent = `로그인 실패`;
            result.style.color = "blue";  
          }
        });
      }
</script>

 

- 서버 코드

app.post("/axios3", function (req, res) {
  console.log(req.body);
  res.send(req.body);

*req.body는 POST 요청의 본문(body)에 담긴 데이터