form 전송

• 동기 처리는 끝나야 다음꺼가 진행되고, 비동기 처리는 유도리 있게 진행하는 형태이다.
• 그리고 <form> 에서의 <input type = “submit”> 이나 <button type = “submit”> 은 전송 시 페이지 이동이 일어난다. 즉 동기 방식 HTTP 통신을 하고 있는 것이다.
• 비동기 방식에서는 <button *type*="button" *onclick*="axiosGet()">axios get 전송</button> 이런식으로 함수를 걸어서 js로 폼 전송을 적용시켜준다.
  • 따라서 js코드 내에서 폼 유효성 검사를 하는 코드를 작성해야한다!

---

• 동기 방식의 HTTP 전송
  • 페이지를 아예 이동해 서버가 데이터를 처리한다.
  • 한 번에 하나만 처리. 예를 들어 로그인 시 비번을 잘못 입력하면 그에 대한 알람을 한 화면에서 보여주는
• 비동기 방식의 HTTP 통신
  • 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능하다.
  • 폼의 데이터를 서버와 dynamic하게 송수신 하는 것이다!
  • 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것!

---

• 즉 무언가를 제출 할 때마다 페이지를 이동하는 것이 아니라 한 페이지에서 동작하게 하고 싶다면?
  • 비동기 방식을 이용하면 된다.
  • 예를 들어 로그인 실패 시 창이 이동되지 않고 현재 페이지에서 값을 처리하고 알림을 주는 상황.
• 비동기 HTTP 통신 방법으로는 3가지가 있다. Ajax, Axios, Fetch.
  • 얘네는 문법이 다를 뿐 사실상 같은 개념이다.
  • 참고로 client가 server로 요청을 보내는 부분이기 때문에 백엔드에 가깝다.

Axios

• Node.js와 브라우저를 위한 Promise API를 활용한다.
• 비동기 HTTP통신이 가능하다.
• return값이 Promise객체로 온다!

---

• 장점
  • Promise 기반이다.
  • 브라우저 호환성이 뛰어나다! 주로 이걸로 사용!
• 단점
  • 모듈을 설치하거나 호출을 해야 사용 할 수 있다!
  • cdn 파일 입력 ! https://axios-http.com/kr/docs/intro

---

▶️ Axios 요청 문법

axios({
  method: "GET",
  url: "/axios",
  params: data 
 })

• url : 통신하고자 하는 주소를 넣어준다.
  • form에서의 action에 해당한다. 내가 데이터를 보내고자 하는 주소!
• method : 통신하고자 하는 방식을 넣어준다.
  • get, post, patch, delete 등
• data : json형태의 보내고자 하는 데이터를 {}안에 넣어준다.
  • { key: value, key: value} 의 형태로 만들어 준다.
  • put, post, patch 일 때 사용한다.
  • req.body로 데이터를 보낸다.
• params : get 요청으로 데이터를 보낼 때 url의 ? 뒤에 객체로 보내지는 부분을 넣어준다.
  • { key: value, key: value} 의 형태로 작성한다.
  • req.query에 데이터가 담긴다.
  • params 값을 안보낼거면 URL에 쿼리스트링을 작성해서 보내도 된다.

▶️ Axios 응답 문법

axios({
  method: "GET",
  url: "/axios",
  params: data 
 }).then((response) => {
	//서버가 제공한 응답(데이터)
	console.log(response.data) 
	//서버 응답의 HTTP 상태 코드. 성공이면 200
	console.log(response.status)
	//서버가 응답한 헤더
	console.log(response.headers)
});

• Promise 기반이기 때문에 .then을 사용해준다.
• 백에서는?
  • res.send를 이용해 데이터를 보낸다.
  • res.send를 이용하면 데이터를 클라이언트로 다시 보낼 수 있다.

▶️ Axios 코드 예시

//[index.js]파일

//---------------axios get
app.get("/axios", function (req, res) {
  console.log(req.query);
  res.send(req.query);
});
//---------------axios post
app.post("/axios", function (req, res) {
  console.log(req.body);
  const data = {
    ...req.body,
    msg: "반가워요", //메시지 추가해서 send 하기
  };
  res.send(data);
});

//[index.ejs]파일

//--------------------기본 getData()만들기 --------------------
//input에서 입력한 값에 대해 유효성을 검사 할 것이다.
//submit으로 하는게 아니라 자동으로 폼 검증이 안되기 때문!
      function getData() {
        const form = document.forms["register"];

        if (!form.checkValidity()) { //폼의 유효성 검사를 해서 boolean값 반환
          form.reportValidity(); //오
          return false; 
        }
        //그럼 여기서 getData라는 함수의 반환값은 총 두가지 형태가 되게 된다.
        //false | object (객체 형태)

        const data = { //form에서 name으로 쓰인 게 key값이 된다.
          id: form.id.value,
          pw: form.pw.value,
          name: form.name.value,
        }
        return data
      }

//--------------------axiosGet --------------------
    //axios함수는 promise객체를 return한다.
    //get요청으로 데이터 보낼때는 params를 사용한다.
    function axiosGet() {
      const data = getData()

      axios({
        method: "GET",
        url: "/axios",
        params: data 
      }).then((res) => {
        // 서버에서 보내준 응답이 res에 담긴다.
        console.log("res", res)
        console.log("res.data", res.data)
        const {
          name
        } = res.data
        $("#result").html(`axios get 요청 성공 ${name}님 환영합니다.`)
      })
    }
 //--------------------axiosPost --------------------
  async function axiosPost() {
    //폼 유효성 검사를 하고 싶다. 이걸 뭘로 하는가?
    //input태그에 있는걸로 폼 유형성 검사를 하고 싶다? 이건 form의 submit이 일어날때만 동작한다.
    //동적 폼전송은 form의 submit을 이용하는게 아니고, js로 버튼에 함수를 걸어서 해준다.
    //따라서 js코드 내에서 폼 유효성 검사를 하는 코드를 작성해야 한다!
    //방법1) const regex=//, regex.test() 이용해서 하면 된다.
    //검사하는 식 입력해서 확인하는 함수를 걸어주는 것.
    //근데 이게 아니라 폼 요소자체로 유효성을 검사하고 싶으면?
    //방법2) form.checkValidity과 form.reportValidity을 사용해도 된다.
  const data = getData();
    //data에 받아오는 값은 두가지 형태 중 하나이다.
    //getData를 보면 된다. 얘도 결국 false 아니면 object이다.
    if (!data) return; //데이터의 값을 판별하는것
    //true여야 이 if문안으로 들어가서 다음꺼가 실행된다.
    //false면 걍 중지. 

    const res = await axios({
      method: "POST",
      url: "/axios",
      data: data,
    })

    axios({
      method: "POST",
      url: "/axios",
      data: data,
    }).then((res) => {
      console.log(res.data)
      const {
        name
      } = res.data

      console.log("res", res)
      console.log("res.data", res.data)
      $("#result").html(`axios post 요청 성공 ${res.data.name}님 환영합니다.`)
    })
  }

JSON이란?

• JavaScript Object Notation의 약자이다.
• 데이터를 표시하는 방법 중 하나이다! 데이터를 문자열의 형태로 나타내기 위해 사용한다.
• 가독성이 뛰어나 컴퓨터와 사람 모두 해석하기에 편리하다.
• JavaScript의 Object를 기반으로 하는 텍스트 형식이다.